{"id":15450382,"url":"https://github.com/amiranagram/livewire-datatables","last_synced_at":"2025-04-19T22:58:39.058Z","repository":{"id":56947086,"uuid":"401978362","full_name":"amiranagram/livewire-datatables","owner":"amiranagram","description":"Livewire DataTables components for back-end. Modular, easy to use, with tons of features.","archived":false,"fork":false,"pushed_at":"2021-09-28T12:26:51.000Z","size":121,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T13:51:20.181Z","etag":null,"topics":["datatables","laravel","livewire","livewire-components","livewire-datatables"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amiranagram.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null},"funding":{"github":"amiranagram","custom":["https://www.buymeacoffee.com/amirami/"]}},"created_at":"2021-09-01T07:55:50.000Z","updated_at":"2022-07-27T08:38:40.000Z","dependencies_parsed_at":"2022-08-21T03:10:26.664Z","dependency_job_id":null,"html_url":"https://github.com/amiranagram/livewire-datatables","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiranagram%2Flivewire-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amiranagram","download_url":"https://codeload.github.com/amiranagram/livewire-datatables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249826666,"owners_count":21330673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatables","laravel","livewire","livewire-components","livewire-datatables"],"created_at":"2024-10-01T21:04:58.643Z","updated_at":"2025-04-19T22:58:39.019Z","avatar_url":"https://github.com/amiranagram.png","language":"PHP","funding_links":["https://github.com/sponsors/amiranagram","https://www.buymeacoffee.com/amirami/"],"categories":[],"sub_categories":[],"readme":"# Livewire DataTables\n\n[![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/amiranagram/livewire-datatables/run-tests?label=tests\u0026style=flat-square)](https://github.com/amiranagram/livewire-datatables/actions?query=workflow%3Arun-tests+branch%3Amaster)\n[![Total Downloads](https://img.shields.io/packagist/dt/amirami/livewire-datatables.svg?style=flat-square)](https://packagist.org/packages/amirami/livewire-datatables)\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/amirami/livewire-datatables.svg?style=flat-square)](https://packagist.org/packages/amirami/livewire-datatables)\n[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/amiranagram/livewire-datatables/Check%20\u0026%20fix%20styling?label=code%20style\u0026style=flat-square)](https://github.com/amiranagram/livewire-datatables/actions?query=workflow%3A\"Check+%26+fix+styling\"+branch%3Amaster)\n\nLivewire DataTables components for back-end. Modular, easy to use, with tons of features.\n\nInspired by [Caleb's](https://github.com/calebporzio) [Livewire Screencasts](https://laravel-livewire.com/screencasts), dedicated to my friend [Bardh](https://github.com/bardh7).\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require amirami/livewire-datatables\n```\n\nYou can publish the config file with:\n```bash\nphp artisan vendor:publish --provider=\"Amirami\\LivewireDataTables\\LivewireDataTablesServiceProvider\" --tag=\"livewire-datatables-config\"\n```\n\nThis is the contents of the published config file:\n\n```php\nreturn [\n\n    'multi_column_sorting' =\u003e false,\n\n    'row_caching' =\u003e false,\n\n];\n```\n\nThis means that by default these two options are disabled. But you can enable them for individual components.\n\n## Usage\n\nAfter creating your Livewire component, extend the component class with `Amirami\\LivewireDataTables\\DataTable`. The `DataTable` abstract class will ask you to implement `getQueryProperty` method. This is a computed property in Livewire which needs to return and instance of `Illuminate\\Database\\Eloquent\\Builder` or `\\Illuminate\\Database\\Eloquent\\Relations\\Relation`.\n\nThis is the part where you will build the base of your query, with filters.\n\n```php\nnamespace App\\Http\\Livewire;\n\nuse App\\Models\\Post;\nuse Amirami\\LivewireDataTables\\DataTable;\nuse Illuminate\\Database\\Eloquent\\Builder;\n\nclass PostsIndex extends DataTable\n{\n    public function getQueryProperty(): Builder\n    {\n        return Post::query();\n    }\n\n    public function render()\n    {\n        $posts = $this-\u003eentries;\n\n        return view('livewire.posts-index', compact('posts'));\n    }\n}\n```\n\nThis is the most basic component without any datatable features. Although it is totally fine to use the datatable without any features, it kinda beats the purpose of this package. Now let's get onto the many features this package provides.\n\n### Pagination\n\nPagination offers exactly the same features as Livewire's default one. It actually extends it. The only reason you'll have to use the pagination provided by this package is because Livewire's default one doesn't play nice with our other features.\n\n```php\nnamespace App\\Http\\Livewire;\n\nuse Amirami\\LivewireDataTables\\DataTable;\nuse Amirami\\LivewireDataTables\\Traits\\WithPagination;\n\nclass PostsIndex extends DataTable\n{\n    use WithPagination;\n}\n```\n\nYou can configure how many result you want to see per page as well. If not defined the paginator will pull the default number from the model class.\n\n```php\nnamespace App\\Http\\Livewire;\n\nuse Amirami\\LivewireDataTables\\DataTable;\nuse Amirami\\LivewireDataTables\\Traits\\WithPagination;\n\nclass PostsIndex extends DataTable\n{\n    use WithPagination;\n    \n    // As a property.\n    public $perPage = 20;\n    \n    // Or as a method.\n    public function getPerPage(): ?int\n    {\n        return 42;\n    }\n}\n```\n\nFor everything else about pagination check out the [Livewire's official documentation](https://laravel-livewire.com/docs/2.x/pagination).\n\n### Searching\n\nIf you want to use rows searching you have to use `WithSearching` trait, bind an input to a component property and define searchable columns. Consider the rest handled. This is how easy it is:\n\n```php\nnamespace App\\Http\\Livewire;\n\nuse Amirami\\LivewireDataTables\\DataTable;\nuse Amirami\\LivewireDataTables\\Traits\\WithSearching;\n\nclass PostsIndex extends DataTable\n{\n    use WithSearching;\n    \n    public $searchableColumns = [\n        'title',\n        'content',\n    ];\n    \n    public function render()\n    {\n        $posts = $this-\u003eentries;\n\n        return view('livewire.posts-index', compact('posts'));\n    }\n}\n```\n\n```html\n\u003cinput wire:model=\"search\" type=\"text\"\u003e\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eTitle\u003c/th\u003e\n            \u003cth\u003eExcerpt\u003c/th\u003e\n            \u003cth\u003eAuthor\u003c/th\u003e\n            \u003cth\u003eStatus\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        @foreach($posts as $post)\n            \u003ctr\u003e\n                \u003cth\u003e{{ $post-\u003etitle }}\u003c/th\u003e\n                \u003cth\u003e{{ $post-\u003eexcerpt }}\u003c/th\u003e\n                \u003cth\u003e{{ $post-\u003euser-\u003ename }}\u003c/th\u003e\n                \u003cth\u003e{{ $post-\u003estatus() }}\u003c/th\u003e\n            \u003c/tr\u003e\n        @endforeach\n    \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n### Sorting\n\n### Filtering\n\n### Row Caching\n\n## Planned Features\n\n* Searching, sorting and filtering by relationship fields\n* Bulk Actions\n* Row Grouping\n* Front-end components (will most-likely be a separate package)\n\n## Showcase\n\nCheck out cool datatables built with `livewire-datatables` [here](https://github.com/amiranagram/livewire-datatables/discussions/categories/show-and-tell), and don't forget to share your own 🙌.\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Amir Rami](https://github.com/amiranagram)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiranagram%2Flivewire-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famiranagram%2Flivewire-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiranagram%2Flivewire-datatables/lists"}