diff --git a/assets/controllers/elements/datatables/datatables_controller.js b/assets/controllers/elements/datatables/datatables_controller.js
index 741e334b..a2dc45fe 100644
--- a/assets/controllers/elements/datatables/datatables_controller.js
+++ b/assets/controllers/elements/datatables/datatables_controller.js
@@ -4,8 +4,8 @@ import {Controller} from "@hotwired/stimulus";
import 'datatables.net-bs5/css/dataTables.bootstrap5.css'
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css'
import 'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css'
-import 'datatables.net-select-bs5/css/select.bootstrap5.css'
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
+import 'datatables.net-select-bs5/css/select.bootstrap5.css';
//JS
import 'datatables.net-bs5';
@@ -63,26 +63,36 @@ export default class extends Controller {
settings.url = this.element.dataset.dtUrl;
+ let options = {
+ colReorder: true,
+ responsive: true,
+ fixedHeader: {
+ header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
+ headerOffset: $("#navbar").height()
+ },
+ buttons: [{
+ "extend": 'colvis',
+ 'className': 'mr-2 btn-light',
+ 'columns': ':not(.no-colvis)',
+ "text": ""
+ }],
+
+
+ rowCallback: this._rowCallback.bind(this),
+ stateSave: true,
+ stateSaveCallback: this.stateSaveCallback.bind(this),
+ stateLoadCallback: this.stateLoadCallback.bind(this),
+ };
+
+ if(this.isSelectable()) {
+ options.select = {
+ style: 'multi+shift',
+ selector: 'td.select-checkbox'
+ };
+ }
+
//@ts-ignore
- const promise = $(this.dtTarget).initDataTables(settings,
- {
- colReorder: true,
- responsive: true,
- fixedHeader: {
- header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
- headerOffset: $("#navbar").height()
- },
- buttons: [{
- "extend": 'colvis',
- 'className': 'mr-2 btn-light',
- "text": ""
- }],
- select: this.isSelectable(),
- rowCallback: this._rowCallback.bind(this),
- stateSave: true,
- stateSaveCallback: this.stateSaveCallback.bind(this),
- stateLoadCallback: this.stateLoadCallback.bind(this),
- })
+ const promise = $(this.dtTarget).initDataTables(settings, options)
//Register error handler
.catch(err => {
console.error("Error initializing datatables: " + err);
diff --git a/assets/css/app.css b/assets/css/app.css
index 01eecf10..33891bc8 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -754,6 +754,12 @@ div.dataTables_wrapper div.dataTables_info {
display: inline-flex;
}
+/** Fix datatables select-checkbox position */
+
+table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
+ margin-top: -28px !important;
+}
+
/******************************************
* Typeahead menu
*******************************************/
diff --git a/src/DataTables/Column/SelectColumn.php b/src/DataTables/Column/SelectColumn.php
new file mode 100644
index 00000000..a3ba9161
--- /dev/null
+++ b/src/DataTables/Column/SelectColumn.php
@@ -0,0 +1,36 @@
+setDefaults([
+ 'label' => '',
+ 'orderable' => false,
+ 'searchable' => false,
+ 'className' => 'select-checkbox no-colvis',
+ 'visible' => true,
+ ]);
+ }
+
+ public function normalize($value)
+ {
+ return $value;
+ }
+
+ public function render($value, $context)
+ {
+ //Return empty string, as it this column is filled by datatables on client side
+ return '';
+ }
+}
\ No newline at end of file
diff --git a/src/DataTables/PartsDataTable.php b/src/DataTables/PartsDataTable.php
index c0e9fd89..e9be7f6a 100644
--- a/src/DataTables/PartsDataTable.php
+++ b/src/DataTables/PartsDataTable.php
@@ -48,6 +48,7 @@ use App\DataTables\Column\LocaleDateTimeColumn;
use App\DataTables\Column\MarkdownColumn;
use App\DataTables\Column\PartAttachmentsColumn;
use App\DataTables\Column\PrettyBoolColumn;
+use App\DataTables\Column\SelectColumn;
use App\DataTables\Column\SIUnitNumberColumn;
use App\DataTables\Column\TagsColumn;
use App\DataTables\Filters\PartFilter;
@@ -121,8 +122,10 @@ final class PartsDataTable implements DataTableTypeInterface
$options = $resolver->resolve($options);
$dataTable
+ ->add('select', SelectColumn::class)
->add('picture', TextColumn::class, [
'label' => '',
+ 'className' => 'no-colvis',
'render' => function ($value, Part $context) {
$preview_attachment = $this->previewGenerator->getTablePreviewAttachment($context);
if (null === $preview_attachment) {