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.
The official documentation is now available at:
- Requirements
- Installation
- Usage With Livewire
- Filters
- Sorting
- Row Actions & Bulk Actions
- Additional Features
- Contributing
- License
- PHP 8.2+
- Laravel 10.0+
- Livewire (Required for usage of this package.)
-
Require the package:
composer require ginkelsoft/datatables
-
Publish the package views (optional) for customization:
php artisan vendor:publish --provider="Ginkelsoft\DataTables\DataTableServiceProvider" --tag=views
-
Publish configuration file (optional) for customization:
php artisan vendor:publish --provider="Ginkelsoft\DataTables\DataTableServiceProvider" --tag=config
This package requires Livewire and cannot be used without it. To integrate DataTables in your Laravel project, use the following setup:
<livewire:datatable
model="App\\Models\\User"
:columns="['id', 'name', 'email', 'created_at']"
:hidden-columns="['id']"
:filters="[
['column' => 'name', 'type' => 'input', 'label' => 'Naam'],
['column' => 'email', 'type' => 'input', 'label' => 'Email'],
['column' => 'created_at', 'type' => 'date', 'label' => 'Aangemaakt op']
]"
:row-actions="[
['name' => 'edit', 'label' => 'Edit', 'route' => 'users.datatable.edit'],
['name' => 'delete', 'label' => 'Delete', 'route' => 'users.datatable.delete'],
['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}']
]"
:bulk-actions="[
'export' => ['label' => 'Export', 'route' => 'users.datatable.export']
]"
/>
You can define various filters for refining results dynamically.
:filters="[
['column' => 'name', 'type' => 'input', 'label' => 'Naam'],
['column' => 'email', 'type' => 'input', 'label' => 'Email'],
['column' => 'created_at', 'type' => 'date', 'label' => 'Aangemaakt op']
]"
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:
:sort-column="'created_at'"
:sort-direction="'desc'"
:row-actions="[
['label' => 'Edit', 'route' => 'users.edit'],
['label' => 'Delete', 'url' => 'users/{id}', 'onclick' => 'return confirm(\'Are you sure?\')']
]"
:bulk-actions="[
'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'],
'export' => ['label' => 'Export', 'route' => 'users.bulk.export']
]"
- Multi-language Support: English, Dutch, German, French, Spanish.
- Search Class for multi-column searching.
- Filter Class for custom filters (status, categories, etc.).
- Sorting Class for ascending/descending ordering.
- Select All (with confirmation modal) to choose between only visible rows or all rows.
- Custom Actions now support classes and inline styles.
- Prevent row selection when clicking an action button to avoid accidental selection.
- Fork this repository.
- Create a new branch for your feature or fix.
- Push your changes and open a pull request.
We welcome improvements to code quality, new features, or better documentation.
Ginkelsoft DataTables is open-sourced software licensed under the MIT license.
Changes in version 0.0.10:
actions
have been renamed torow-actions
.- A new configuration file has been added.
- Ensure the Livewire component is updated, otherwise, it will not work correctly.
- Official documentation site launched: https://datatables.ginkelsoft.com/