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