From 116f3cf3ff6e937f4ebade345ba5328c20e2371a Mon Sep 17 00:00:00 2001 From: Wietse van Ginkel Date: Tue, 4 Mar 2025 18:43:15 +0100 Subject: [PATCH 1/3] Update Readme V 0.0.9 --- README.md | 63 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 42 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 1c761af..56ec04a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Ginkelsoft DataTables +# Ginkelsoft DataTables version 0.0.9 Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular data in Laravel projects. This package **requires Livewire** for dynamic, AJAX-driven experiences. You can easily add filtering, searching, sorting, and bulk actions with minimal setup. @@ -10,10 +10,11 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular 2. [Installation](#installation) 3. [Usage With Livewire](#usage-with-livewire) 4. [Filters](#filters) -5. [Actions & Bulk Actions](#actions--bulk-actions) -6. [Additional Features](#additional-features) -7. [Contributing](#contributing) -8. [License](#license) +5. [Sorting](#sorting) +6. [Actions & Bulk Actions](#actions--bulk-actions) +7. [Additional Features](#additional-features) +8. [Contributing](#contributing) +9. [License](#license) --- @@ -48,30 +49,33 @@ This package **requires Livewire** and cannot be used without it. To integrate D ```blade ``` You can now: -- **Search** by typing in the search field. +- **Search** - **Sort** by clicking column headers. - **Paginate** without page reload. - **Select rows** individually or choose to select all. +- Filters --- @@ -81,15 +85,31 @@ You can define various filters for refining results dynamically. ```blade :filters="[ - ['column' => 'name', 'type' => 'text'], - ['column' => 'role', 'type' => 'select', 'options' => ['admin' => 'Admin', 'user' => 'User']], - ['column' => 'created_at', 'type' => 'date'], - ['column' => 'active', 'type' => 'boolean'] + ['column' => 'name', 'type' => 'input', 'label' => 'Naam'], + ['column' => 'email', 'type' => 'input', 'label' => 'Email'], + ['column' => 'created_at', 'type' => 'date', 'label' => 'Aangemaakt op'], + ['column' => 'email_verified_at', 'type' => 'checkbox', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'], + ['column' => 'email_verified_at', 'type' => 'select', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'] ]" ``` --- +## Sorting + +Sorting is enabled by default. Clickable column headers allow users to sort the data in ascending or descending order. + +By default, sorting is applied to the first column in the `:columns` array. If needed, sorting can be applied programmatically by setting: + +```php +'sortColumn' => 'created_at', +'sortDirection' => 'desc', +``` + +Sorting is supported for all columns in the dataset, including text, dates, and booleans. + +--- + ## Actions & Bulk Actions ### Row Actions @@ -139,3 +159,4 @@ We welcome improvements to code quality, new features, or better documentation. ## License Ginkelsoft DataTables is open-sourced software licensed under the [MIT license](LICENSE). + From 1ba676e863c5c685b82f8a7f6a636a29af2edeff Mon Sep 17 00:00:00 2001 From: Wietse van Ginkel Date: Fri, 7 Mar 2025 06:17:24 +0100 Subject: [PATCH 2/3] Actions become row actions Remove label bulk actions Remove label per page select update readme --- README.md | 10 +++++----- .../views/vendor/datatables/actions.blade.php | 11 ---------- .../components/bulk-action.blade.php | 1 - .../components/mobile/table.blade.php | 8 ++++---- .../components/page-result.blade.php | 3 +-- .../datatables/components/table.blade.php | 14 ++++++------- .../vendor/datatables/datatable.blade.php | 1 - .../vendor/datatables/row-actions.blade.php | 11 ++++++++++ src/Livewire/DataTableComponent.php | 20 +++++++++---------- src/Search.php | 2 +- 10 files changed, 39 insertions(+), 42 deletions(-) delete mode 100644 resources/views/vendor/datatables/actions.blade.php create mode 100644 resources/views/vendor/datatables/row-actions.blade.php diff --git a/README.md b/README.md index 56ec04a..283bcc8 100644 --- a/README.md +++ b/README.md @@ -58,12 +58,12 @@ This package **requires Livewire** and cannot be used without it. To integrate D ['column' => 'email_verified_at', 'type' => 'checkbox', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'], ['column' => 'email_verified_at', 'type' => 'select', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'], ]" - :actions="[ + :rows-actions="[ ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.datatable.export'], ['name' => 'delete', 'label' => 'Delete', 'route' => 'users.datatable.export'], ['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}'] ]" - :bulkActions="[ + :bulk-actions="[ 'export' => ['label' => 'Export', 'route' => 'users.datatable.export'] ]" /> @@ -110,12 +110,12 @@ Sorting is supported for all columns in the dataset, including text, dates, and --- -## Actions & Bulk Actions +## Row Actions & Bulk Actions ### Row Actions ```blade -:actions="[ +:row-actions="[ ['label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-green-500 text-white px-3 py-1 rounded'], ['label' => 'Delete', 'url' => 'users/{id}', 'class' => 'bg-red-500 text-white px-3 py-1 rounded', 'onclick' => 'return confirm(\'Are you sure?\')'] ]" @@ -124,7 +124,7 @@ Sorting is supported for all columns in the dataset, including text, dates, and ### Bulk Actions ```blade -:bulkActions="[ +:bulk-actions="[ 'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'], 'export' => ['label' => 'Export', 'route' => 'users.bulk.export'] ]" diff --git a/resources/views/vendor/datatables/actions.blade.php b/resources/views/vendor/datatables/actions.blade.php deleted file mode 100644 index 387228e..0000000 --- a/resources/views/vendor/datatables/actions.blade.php +++ /dev/null @@ -1,11 +0,0 @@ -
- @foreach($actions as $action) - $value) - {{ $key }}="{{ $value }}" - @endforeach> - {{ $action['label'] }} - - @endforeach -
diff --git a/resources/views/vendor/datatables/components/bulk-action.blade.php b/resources/views/vendor/datatables/components/bulk-action.blade.php index a39344b..3170923 100644 --- a/resources/views/vendor/datatables/components/bulk-action.blade.php +++ b/resources/views/vendor/datatables/components/bulk-action.blade.php @@ -1,4 +1,3 @@ - @@ -7,5 +6,5 @@ class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:ring-2 foc - + diff --git a/resources/views/vendor/datatables/components/table.blade.php b/resources/views/vendor/datatables/components/table.blade.php index 35ba584..e2a643f 100644 --- a/resources/views/vendor/datatables/components/table.blade.php +++ b/resources/views/vendor/datatables/components/table.blade.php @@ -9,12 +9,12 @@ class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blu @endif @foreach($columns as $column) - @if(!in_array($column, $hiddenColumns)) + @if(!in_array($column['column'], $hiddenColumns)) + wire:click="sortBy('{{ $column['column'] }}')">
- {{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }} - @if ($sortColumn === $column) + {{ ucfirst($column['label']) }} + @if ($sortColumn === $column['column']) @if ($sortDirection === 'asc') ▲ @@ -45,14 +45,14 @@ class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blu @endif @foreach($columns as $column) - @if(!in_array($column, $hiddenColumns)) + @if(!in_array($column['column'], $hiddenColumns)) - {{ $row->$column }} + {{ $row->{$column['column']} }} @endif @endforeach - @includeIf($actionsView, ['row' => $row]) + @includeIf($rowActionView, ['row' => $row]) @endforeach diff --git a/resources/views/vendor/datatables/datatable.blade.php b/resources/views/vendor/datatables/datatable.blade.php index beb720a..4817db0 100644 --- a/resources/views/vendor/datatables/datatable.blade.php +++ b/resources/views/vendor/datatables/datatable.blade.php @@ -30,7 +30,6 @@ @includeIf('datatable::components.bulk-action')
@endif -
diff --git a/resources/views/vendor/datatables/row-actions.blade.php b/resources/views/vendor/datatables/row-actions.blade.php new file mode 100644 index 0000000..0d5561d --- /dev/null +++ b/resources/views/vendor/datatables/row-actions.blade.php @@ -0,0 +1,11 @@ +
+ @foreach($rowActions as $action) + $value) + {{ $key }}="{{ $value }}" + @endforeach> + {{ $action['label'] }} + + @endforeach +
diff --git a/src/Livewire/DataTableComponent.php b/src/Livewire/DataTableComponent.php index f94a94c..4b11974 100644 --- a/src/Livewire/DataTableComponent.php +++ b/src/Livewire/DataTableComponent.php @@ -27,10 +27,10 @@ class DataTableComponent extends Component public array $columns = []; /** @var array List of actions available for each row */ - public array $actions = []; + public array $rowActions = []; /** @var string The Blade view file for displaying row actions */ - public string $actionsView = 'datatable::actions'; + public string $rowActionView = 'datatable::row-actions'; /** @var string The search query entered by the user */ #[\Livewire\Attributes\Url(history: true)] @@ -79,8 +79,8 @@ class DataTableComponent extends Component * * @param string $model The model class name. * @param array $columns List of table columns. - * @param array $actions Row actions. - * @param string $actionsView Blade view for row actions. + * @param array rowActions + * @param string $rowActionView Blade view for row actions. * @param array $hiddenColumns Columns that should be hidden. * @param array $bulkActions Available bulk actions. * @param array $filters Initial filters. @@ -88,8 +88,8 @@ class DataTableComponent extends Component public function mount( string $model, array $columns, - array $actions = [], - string $actionsView = 'datatable::actions', + array $rowActions = [], + string $rowActionView = 'datatable::row-actions', array $hiddenColumns = [], array $bulkActions = [], array $filters = [] @@ -97,8 +97,8 @@ public function mount( { $this->model = $model; $this->columns = $columns; - $this->actions = array_map(fn($action) => $action instanceof Action ? $action->toArray() : $action, $actions); - $this->actionsView = $actionsView; + $this->rowAction = array_map(fn($action) => $action instanceof Action ? $action->toArray() : $action, $rowActions); + $this->rowActionView = $rowActionView; $this->hiddenColumns = $hiddenColumns; $this->bulkActions = $bulkActions; $this->filters = collect($filters) @@ -319,8 +319,8 @@ public function render(): View return view('datatable::datatable', [ 'rows' => $this->getRows(), 'columns' => $this->columns, - 'actions' => $this->actions, - 'actionsView' => $this->actionsView, + 'rowActions' => $this->rowActions, + 'rowActionView' => $this->rowActionView, 'hiddenColumns' => $this->hiddenColumns, 'selectedRows' => $this->selectedRows, 'selectAll' => $this->selectAll, diff --git a/src/Search.php b/src/Search.php index 1ef8e31..1832960 100644 --- a/src/Search.php +++ b/src/Search.php @@ -41,7 +41,7 @@ public function apply(Builder $query, array $columns): Builder if (!empty($this->searchTerm)) { $query->where(function (Builder $q) use ($columns) { foreach ($columns as $column) { - $q->orWhere($column, 'like', "%{$this->searchTerm}%"); + $q->orWhere($column['column'], 'like', "%{$this->searchTerm}%"); } }); } From 0fb4a8809bfcf08dffcf952dfc0dd4a9ca122c2a Mon Sep 17 00:00:00 2001 From: Wietse van Ginkel Date: Fri, 7 Mar 2025 08:04:06 +0100 Subject: [PATCH 3/3] Added config --- README.md | 6 +++ config/datatable.php | 47 +++++++++++++++++++ .../components/page-result.blade.php | 7 ++- .../datatables/components/table.blade.php | 4 +- .../vendor/datatables/datatable.blade.php | 9 +++- .../vendor/datatables/row-actions.blade.php | 1 + src/DataTableServiceProvider.php | 8 ++++ src/Livewire/DataTableComponent.php | 13 +++-- 8 files changed, 85 insertions(+), 10 deletions(-) create mode 100644 config/datatable.php diff --git a/README.md b/README.md index 283bcc8..dce2d2d 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,12 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular php artisan vendor:publish --provider="Ginkelsoft\\DataTables\\DataTableServiceProvider" --tag=views ``` +3. **Publish configuration file** (optional) for customization: + + ```bash + php artisan vendor:publish --provider="Ginkelsoft\DataTables\Providers\GinkelsoftDataTableServiceProvider" --tag=config + ``` + --- ## Usage With Livewire diff --git a/config/datatable.php b/config/datatable.php new file mode 100644 index 0000000..8dd59dd --- /dev/null +++ b/config/datatable.php @@ -0,0 +1,47 @@ + [ + 'active' => true, + 'options' => [10, 25, 50, 100], + 'default' => 10, + ], + + 'sort' => [ + 'active' => true, + 'column' => 'id', + 'direction' => 'asc', + ], + + 'columns' => [ + 'hidden' => [], + ], + + 'filters' => [ + 'active' => true, + ], + + 'row_actions' => [ + 'view' => 'datatable::row-actions', + ], + + 'bulk_actions' => [ + 'active' => true, + ], + + 'search' => [ + 'active' => true, + ], + +]; diff --git a/resources/views/vendor/datatables/components/page-result.blade.php b/resources/views/vendor/datatables/components/page-result.blade.php index 44bf63c..7b0c40d 100644 --- a/resources/views/vendor/datatables/components/page-result.blade.php +++ b/resources/views/vendor/datatables/components/page-result.blade.php @@ -1,10 +1,9 @@ diff --git a/resources/views/vendor/datatables/components/table.blade.php b/resources/views/vendor/datatables/components/table.blade.php index e2a643f..b21d9bb 100644 --- a/resources/views/vendor/datatables/components/table.blade.php +++ b/resources/views/vendor/datatables/components/table.blade.php @@ -2,7 +2,7 @@ - @if (count($bulkActions) > 0) + @if (config('datatable.bulk_actions.active') && count($bulkActions) > 0) - @if (count($bulkActions) > 0) + @if (config('datatable.bulk_actions.active') && count($bulkActions) > 0)