Use checkboxes for selections instead of the current full row selection.

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": "<i class='fa fa-cog'></i>"
+            }],
+
+
+            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": "<i class='fa fa-cog'></i>"
-                }],
-                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);

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
 *******************************************/

src/DataTables/Column/SelectColumn.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\DataTables\Column;
+
+use Omines\DataTablesBundle\Column\AbstractColumn;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * A column representing the checkboxes for select extensions.
+ */
+class SelectColumn extends AbstractColumn
+{
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        parent::configureOptions($resolver);
+
+        $resolver->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 '';
+    }
+}

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) {