{"id":15016868,"url":"https://github.com/coryrose1/livewire-tables","last_synced_at":"2025-04-13T08:18:12.959Z","repository":{"id":56958201,"uuid":"219083923","full_name":"coryrose1/livewire-tables","owner":"coryrose1","description":"An extension for Laravel Livewire that allows you to effortlessly scaffold datatables with optional pagination, search, and sort.","archived":false,"fork":false,"pushed_at":"2019-12-05T11:26:54.000Z","size":67,"stargazers_count":88,"open_issues_count":12,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T08:18:01.964Z","etag":null,"topics":["datatables","laravel","livewire","livewire-tables","tables"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coryrose1.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-02T00:45:13.000Z","updated_at":"2025-01-11T15:06:15.000Z","dependencies_parsed_at":"2022-08-21T05:10:20.887Z","dependency_job_id":null,"html_url":"https://github.com/coryrose1/livewire-tables","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coryrose1%2Flivewire-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coryrose1%2Flivewire-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coryrose1%2Flivewire-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coryrose1%2Flivewire-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coryrose1","download_url":"https://codeload.github.com/coryrose1/livewire-tables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681519,"owners_count":21144703,"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-tables","tables"],"created_at":"2024-09-24T19:49:29.990Z","updated_at":"2025-04-13T08:18:12.937Z","avatar_url":"https://github.com/coryrose1.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Livewire-Tables\n\n[![Latest Version on Packagist][ico-version]][link-packagist]\n[![Total Downloads][ico-downloads]][link-downloads]\n[![Build Status][ico-travis]][link-travis]\n[![StyleCI][ico-styleci]][link-styleci]\n\nAn extension for [Livewire](https://laravel-livewire.com/docs/quickstart/) that allows you to effortlessly scaffold datatables with optional pagination, search, and sort.\n\nLive demo website will be available soon.\n\n## Installation\n\nVia Composer\n\n``` bash\n$ composer require coryrose/livewire-tables\n```\n\nThe package will automatically register its service provider.\n\nTo publish the configuration file to `config/livewire-tables.php` run:\n\n```\nphp artisan vendor:publish --provider=\"Coryrose\\LivewireTables\\LivewireTablesServiceProvider\"\n```\n\n## Usage\n\nLivewire tables are created in three simple steps:\n1. [Create a table component class](#create-a-table-component-class)\n2. [Configure the table class using the available options](#configure-the-component-options)\n3. [Scaffold the table view (as needed when component class changes)](#scaffold-the-table-view)\n\n###  Create a table component class\nRun the make command to generate a table class:\n\n`php artisan livewire-tables:make UsersTable`\n\n*App/Http/Livewire/Tables/UsersTable.php*\n\n```\n...\n\nclass UsersTable extends LivewireModelTable\n{\n    use WithPagination;\n    \n        public $paginate = true;\n        public $pagination = 10;\n        public $hasSearch = true;\n    \n        public $fields = [\n            [\n                'title' =\u003e 'ID',\n                'name' =\u003e 'id',\n                'header_class' =\u003e '',\n                'cell_class' =\u003e '',\n                'sortable' =\u003e true,\n            ],\n            [\n                'title' =\u003e 'Name',\n                'name' =\u003e 'name',\n                'header_class' =\u003e '',\n                'cell_class' =\u003e '',\n                'sortable' =\u003e true,\n                'searchable' =\u003e true,\n            ],\n            [\n                'title' =\u003e 'City',\n                'name' =\u003e 'address.city',\n                'header_class' =\u003e 'bolded',\n                'cell_class' =\u003e 'bolded bg-green',\n                'sortable' =\u003e true,\n                'searchable' =\u003e true,\n            ],\n            [\n                'title' =\u003e 'Post',\n                'name' =\u003e 'post.content',\n                'header_class' =\u003e '',\n                'cell_class' =\u003e '',\n                'sortable' =\u003e true,\n                'searchable' =\u003e true,\n            ],\n        ];\n    \n        public function render()\n        {\n            return view('livewire.tables.users-table', [\n                'rowData' =\u003e $this-\u003equery(),\n            ]);\n        }\n    \n        public function model()\n        {\n            return User::class;\n        }\n    \n        public function with()\n        {\n            return ['address', 'post'];\n        }\n}\n```\n\n### Configure the component options\n\nFirst, set your base model in the `model()` method in the following format:\n```\npublic function model()\n{\n    return User::class;\n}\n```\n\nTo eager load relationships, use the `with()` and return an array of relation(s):\n```\npublic function with()\n{\n    return ['address', 'post'];\n}\n```\n\nThe following are editable public properties for the table class:\n\n| key  | description | value | default \n| ------------- | ------------- | ------------- | ------------- |\n| $paginate  | Controls whether the data query \u0026 results are paginated. If true, the class must `use WithPagination;`  | bool | true\n| $pagination  | The number value to paginate with  | integer | 10\n| $hasSearch  | Controls global appearance of search bar | bool | true\n| [$fields](#$fields)  | The fields configuration for your table | array | null\n| [$css](#$css)  | Per-table CSS settings | array | null\n\n#### $fields\nControls the field configuration for your table\n\n| key  | description | value \n| ------------- | ------------- | ------------- |\n| title  | Set the displayed column title  | string\n| name  | Should represent the database field name. Use '.' notation for related columns, such as `user.address`  | string\n| header_class  | Set a class for the `\u003cth\u003e` tag for this field  | string or null\n| cell_class  | Set a class for the `\u003ctd\u003e` tag for this field  | string or null\n| sortable  | Control whether or not the column is sortable  | bool or null\n| searchable  | Control whether or not the column is searchable  | bool or null\n\n#### $css\nUsed to generate CSS classes when scaffolding the table.\n\nThese can be set globally in the configuration file, or on a per-table basis in the component class.\n\n*Note:* CSS classes set in the component will override those from the configuration file where both exist.\n\n| key  | description | value \n| ------------- | ------------- | ------------- |\n| wrapper  | CSS class for `\u003cdiv\u003e` surrounding table  | string or null\n| table  | CSS class for `\u003ctable\u003e`  | string or null\n| thead  | CSS class for `\u003cthead\u003e`  | string or null\n| th  | CSS class for `\u003cth\u003e`  | string or null\n| tbody  | CSS class for `\u003ctbody\u003e`  | string or null\n| tr  | CSS class for `\u003ctr\u003e`  | string or null\n| td  | CSS class for `\u003ctd\u003e`  | string or null\n| search_wrapper  | CSS class for `\u003cdiv\u003e` surrounding search  | string or null\n| search_input  | CSS class for search `\u003cinput\u003e`  | string or null\n| pagination_wrapper  | CSS class for `\u003cdiv\u003e` surrounding pagination buttons  | string or null\n\n\n### Scaffold the table view\n\nWhen ready, scaffold the table view using the scaffold command:\n\n`php artisan livewire-tables:scaffold UsersTable`\n\n*resources/views/livewire/tables/users-table.blade.php*\n\n```\n\u003cdiv\u003e\n    @if ($hasSearch)\n    \u003cdiv\u003e\n        \u003cdiv style=\"position: relative; display: inline-block;\"\u003e\n        \u003cinput type=\"text\" wire:model=\"search\" /\u003e\n            @if ($search)\n                \u003cbutton wire:click=\"clearSearch\" style=\"position: absolute; right: 5px;\"\u003e\u0026#10005;\u003c/button\u003e\n            @endif\n        \u003c/div\u003e\n    \u003c/div\u003e\n    @endif\n    \u003ctable class=\"table-wrapper\"\u003e\n        \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth class=\"header\" wire:click=\"$emit('sortColumn', 0)\"\u003eID\u003c/th\u003e\n            \u003cth class=\"header\" wire:click=\"$emit('sortColumn', 1)\"\u003eName\u003c/th\u003e\n            \u003cth class=\"header bolded\" wire:click=\"$emit('sortColumn', 2)\"\u003eCity\u003c/th\u003e\n            \u003cth class=\"header\" wire:click=\"$emit('sortColumn', 3)\"\u003ePost\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n        @foreach ($rowData as $row)\n            \u003ctr\u003e\n                \u003ctd class=\"table-cell\"\u003e{{ $row-\u003eid }}\u003c/td\u003e\n                \u003ctd class=\"table-cell\"\u003e{{ $row-\u003ename }}\u003c/td\u003e\n                \u003ctd class=\"table-cell bolded bg-green\"\u003e{{ $row-\u003eaddress-\u003ecity }}\u003c/td\u003e\n                \u003ctd class=\"table-cell\"\u003e{{ $row-\u003epost-\u003econtent }}\u003c/td\u003e\n            \u003c/tr\u003e\n        @endforeach\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n    @if ($paginate)\n    \u003cdiv\u003e\n        {{ $rowData-\u003elinks() }}\n    \u003c/div\u003e\n    @endif\n\u003c/div\u003e\n```\n\nYou can use the scaffold command continuously as you make changes to the parent component class.\n\nSince the rendered template is simple HTML, there’s no need for table “slots” for customization - customize the template as you see fit!\n\n## Todo\n- Further support for more advanced queries than a model\n\n## Change log\n\nPlease see the [changelog](changelog.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [contributing.md](contributing.md) for details and a todolist.\n\n## Credits\n\n- [Cory Rosenwald][link-author]\n- [Laravel Livewire](https://laravel-livewire.com/docs/quickstart/)\n- [All Contributors][link-contributors]\n\n## License\n\nMIT. Please see the [license file](license.md) for more information.\n\n[ico-version]: https://img.shields.io/packagist/v/coryrose/livewire-tables.svg?style=flat-square\n[ico-downloads]: https://img.shields.io/packagist/dt/coryrose/livewire-tables.svg?style=flat-square\n[ico-travis]: https://img.shields.io/travis/coryrose/livewire-tables/master.svg?style=flat-square\n[ico-styleci]: https://styleci.io/repos/12345678/shield\n\n[link-packagist]: https://packagist.org/packages/coryrose/livewire-tables\n[link-downloads]: https://packagist.org/packages/coryrose/livewire-tables\n[link-travis]: https://travis-ci.org/coryrose/livewire-tables\n[link-styleci]: https://styleci.io/repos/12345678\n[link-author]: https://github.com/coryrose\n[link-contributors]: ../../contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoryrose1%2Flivewire-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoryrose1%2Flivewire-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoryrose1%2Flivewire-tables/lists"}