PHPackages luizfabianonogueira/data-table-laravel-ssp - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. luizfabianonogueira/data-table-laravel-ssp ActiveLibrary[Utility & Helpers](/categories/utility) luizfabianonogueira/data-table-laravel-ssp ========================================== Data Table using laravel and Server side process V0.1.6(1y ago)07LGPL-3.0-or-laterJavaScriptPHP >=8.1 Since Oct 18Pushed 1y ago2 watchersCompare [ Source](https://github.com/LuizFabianoNogueira/data-table-laravel-ssp)[ Packagist](https://packagist.org/packages/luizfabianonogueira/data-table-laravel-ssp)[ RSS](/packages/luizfabianonogueira-data-table-laravel-ssp/feed)WikiDiscussions main Synced today READMEChangelog (6)Dependencies (1)Versions (7)Used By (0) [![Laravel Logo](src/Assets/img/laravel.png)](src/Assets/img/laravel.png) Data Table Laravel - SSP (Server side process) ============================================== [](#data-table-laravel---ssp-server-side-process) [![Latest Stable Version](https://camo.githubusercontent.com/b425ea215679d714b3beaefcfbf59872cf7c5329a34c8639a3686593f75323db/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f646174612d7461626c652d6c61726176656c2d7373702f76)](//packagist.org/packages/luizfabianonogueira/data-table-laravel-ssp)[![Total Downloads](https://camo.githubusercontent.com/2091f62eff33336f2a69974469aab79f83ea3d0e6af2ca951c45db94f23f39ba/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f646174612d7461626c652d6c61726176656c2d7373702f646f776e6c6f616473)](//packagist.org/packages/luizfabianonogueira/data-table-laravel-ssp)[![Latest Unstable Version](https://camo.githubusercontent.com/c6800ffb879e517af1b1ea63c8ee2f2c0baf1873112506e71a932032c31eb64d/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f646174612d7461626c652d6c61726176656c2d7373702f762f756e737461626c65)](//packagist.org/packages/luizfabianonogueira/data-table-laravel-ssp)[![License](https://camo.githubusercontent.com/84d7f4aaf3341b6867b13e015dffc0eb13565efcf30854bb9914a90cc60f79ee/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f646174612d7461626c652d6c61726176656c2d7373702f6c6963656e7365)](//packagist.org/packages/luizfabianonogueira/data-table-laravel-ssp) [![Badge em Desenvolvimento](https://camo.githubusercontent.com/a226a1261dea445b7d6471781f9297775c38bc42f6a8b58b7367d80bf561fc7c/687474703a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d535441545553266d6573736167653d494e253230444556454c4f504d454e5426636f6c6f723d475245454e267374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/a226a1261dea445b7d6471781f9297775c38bc42f6a8b58b7367d80bf561fc7c/687474703a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d535441545553266d6573736167653d494e253230444556454c4f504d454e5426636f6c6f723d475245454e267374796c653d666f722d7468652d6261646765) Installation ------------ [](#installation) You can install the package via composer: ``` composer require luizfabianonogueira/data-table-laravel-ssp ``` Configuration ------------- [](#configuration) In the main layout include the js file ``` ``` You can include the css file or use your css ``` ``` Note that when adding the css and js file, a route was defined to fetch the file. This route is created by the DataTableLaravel In bootstrp/app.php add the following line: ``` use LuizFabianoNogueira\DataTableLaravelSSP\DataTableLaravelSSPServiceProvider; return [ ... DataTableLaravelSSPServiceProvider::class, ... ]; ``` In your model add the following trait: ``` use LuizFabianoNogueira\DataTableLaravelSSP\Traits\DataTableLaravelSSP; class User extends Model { use DataTableLaravelSSP; ... } ``` Usage ----- [](#usage) for the dataTable to be loaded you need the following structure ``` ``` Existem duas formas de carregar seus dadosna tabela: - 1 Dynamic: nesse caso vamos apenas indicar qual é a model a ser utilizada. Nesse formato o sistema vai fazer uma abstração de sua model e utilizar uma controller propria para gerar o resultado. ``` $(document).ready(function() { let columns = [{... ...}]; $('#this-is-my-table').loadDataTableLaravel({ request: { dynamicModel: 'App\\Models\\User' }, columns:columns }); }); ``` - 2 Static: Nesse formato vamos indicar a rota que será utilizada para carregar os dados. \\ ``` $(document).ready(function() { let columns = [{... ...}]; $('#this-is-my-table').loadDataTableLaravel({ request: { url: ' {{ route('users.index') }} ' }, columns:columns }); }); ``` Mas para que isso seja possivel é necessário que a rota esteja configurada para retornar os dados no formato correto. Veja um exemplo abaixo: Em sua controller adicione o seguinte código: ``` public function listaDadosParaDataTable(Request $request): JsonResponse { $list = Model::dtlFilters() ->dtlSearch() ->dtlOrder() ->paginate(($request->paginate ?? 10)); return response()->json($list); } ``` Observe que utilizamos dtlFilters(), dtlSearch(), dtlOrder() e que são scopes criado pela trait caso queira personalizar crie em sua model Veja exemplos de scopes: Em sua model adicione o seguinte código: ``` public function scopeDtlFilters($eloquent) { $request = Request::toArray(); if (!empty($request['id'])) { if (is_array($request['id'])) { $eloquent->whereIn('id', $request['id']); } else { $eloquent->where('id', $request['id']); } } ... return $eloquent; } public function scopeDtlSearch($eloquent) { $request = Request::toArray(); if (isset($request['search']) && !empty($request['search'])){ $eloquent->where(function ($query) use ($request) { $query->where('yourTable.collumn1', 'ILIKE', '%' . $request['search'] . '%') ->orWhere('yourTable.collumn2', 'ILIKE', '%' . $request['search'] . '%') ->orWhere('yourTable.collumn3', 'ILIKE', '%' . $request['search'] . '%') ->orWhere('yourTable.collumn4', 'ILIKE', '%' . $request['search'] . '%'); }); } return $eloquent; } public function scopeDtlOrder($eloquent) { $request = Request::toArray(); if (isset($request['sort']) && !empty($request['sort'])) { $eloquent->orderBy($request['sort'], $request['direction']??'ASC'); } return $eloquent; } ``` Em yourTable.collumn1 você deve substituir pelo nome da tabela e coluna que deseja fazer a busca. Fique a vontade para adicionar quantos campos desejar e alterar conforme sua necessidade. Esses metodos são apenas exemplos de como você pode fazer a busca e filtragem dos dados e podem ser utilizados por qualquer consulta em seu sistema Agora vamos conhecer as configurações possiveis para a tabela: A configuração é feita através de um json que deve ser passado para o plugin. ``` let config = {... ...}; $('#this-is-my-table').loadDataTableLaravel(config); ``` ### Campos de configuração [](#campos-de-configuração) - **request: {... ...}**: Objeto que contem as informações necessárias para a requisição dos dados. - - **request - url**: string - Url da rota que será utilizada para carregar os dados. - - **request - method**: string - Método que será utilizado para carregar os dados. (default: GET) \\ ``` let config = {... request:{ url: ' {{ route('users.index') }} ', method: 'GET', ... }, ... ...}; ``` - - **request - dynamicModel**: string - Nome da model que será utilizada para carregar os dados. Caso utilize o dynamicModel não é necessário passar a url e method. ``` let config = {... request:{ dynamicModel: 'App\\Models\\User', ... }, ... ...}; ``` - - **request - headers**: object - Cabeçalhos que serão enviados na requisição. (default: {}) ``` let config = {... request:{ headers: { "Authorization": "Bearer token", "Content-Type": "application/json", ... }, ... }, ... ...}; ``` - - **request - params**: object - Parametros que serão enviados na requisição. (default: {}) ``` let config = {... request:{ params: { "param1": "value1", "param2": "value2", ... }, ... }, ... ...}; ``` - **columns**: array - Array de objetos que contem as informações das colunas da tabela. ``` let config = {... columns: [{... ...}] ...}; ``` - **columns**: campos possíveis - - **columnTitle**: string - Título da coluna. - - **data**: informação que será exibido na coluna. Deve corresponder ao nome da coluna no seu resultado. Caso seja objeto deve ser utilizado o ponto para acessar o valor. Ex: 'user.name' em *render*': - - **render**: function - Função que será utilizada para renderizar o conteúdo da coluna. - - **hidden**: boolean - Indica se a coluna é visível. (default: true) - - **columnSort**: string - Defini por qual coluna será ordenado. - - **headerClass**: string - Classe que será aplicada no cabeçalho da coluna. - - **class**: string - Classe que será aplicada na coluna. - - **style**: string - Estilo que será aplicado na coluna. - - **name**: string - Nome da coluna.(alias) ``` let config = { columns: [ { data: 'id', hidden: true, }, { columnTitle: 'Nome', data: 'name', columnSort: 'name', headerClass: 'text-center', class: 'text-center', style: 'width: 100px', name: 'nameAlias', render: function (data) { return ''+data+''; } } ], ... }; ``` - **table**: configurações da tabela - - **table - txtNoResult**: string - Mensagem que será exibida quando não houver registros. (default: 'Sem resultados') ``` let config = {... table:{ txtNoResult: 'Nenhum registro encontrado', ... }, ... ...}; ``` [![Noregisters.png](src%2FAssets%2Fimg%2FNoregisters.png)](src%2FAssets%2Fimg%2FNoregisters.png) - **searchBox**: configurações da caixa de pesquisa - - **show**: boolean - Indica se a caixa de pesquisa será exibida. \[obrigatório\]. - - **boxId**: string - Id da caixa de pesquisa. caso null o sistema irá criar um id automaticamente. - - **placeholder**: string - Texto que será exibido na caixa de pesquisa. (default: 'Pesquisar') - - **class**: string - Classe que será aplicada na caixa de pesquisa. - - **style**: string - Estilo que será aplicado na caixa de pesquisa. - - **autoSearch**: boolean - Indica se a pesquisa será feita automaticamente. (default: true) - - **autoSearchOnEnter**: boolean - Indica se a pesquisa será feita ao pressionar a tecla enter. (default: true) - - **autoSearchDelay**: number - Tempo de espera para realizar a pesquisa. (default: 500) - - **autoSearchMinLength**: number - Quantidade mínima de caracteres para realizar a pesquisa. (default: 3) - - **searchInput**: object - Configurações da caixa de pesquisa. - - **searchInput - id**: boolean - Indica se a caixa de pesquisa terá um id. (default: false) - - **searchInput - class**: string - Classe que será aplicada na caixa de pesquisa. - - **searchInput - style**: string - Estilo que será aplicado na caixa de pesquisa. ``` let config = {... searchBox: { show: true, boxId:null, placeholder: 'Pesquisa rapida', class: 'form-control', style: 'width: 200px', autoSearch: true, autoSearchOnEnter:true, autoSearchDelay: 500, autoSearchMinLength: 3, searchInput:{ id: false, class: 'form-control', style: 'max-width: 200px;' } } }; ``` [![searchBox.png](src%2FAssets%2Fimg%2FsearchBox.png)](src%2FAssets%2Fimg%2FsearchBox.png) - **buttons**: - - **buttonShowColumns**: oculatar colunas ``` let config = {... buttons: { buttonShowColumns: { show: true, }, }, ... }; ``` [![buttonShowColumns.png](src/Assets/img/buttonShowColumns.png)](src/Assets/img/buttonShowColumns.png) - - **buttonCSV**: em desenvolvimento - - **buttonPDF**: em desenvolvimento - - **buttonXLS**: em desenvolvimento - **translate**: ``` let config = {... texts:{ searchBox:{ placeholder: 'Pesquisa rápida', buttonText: 'Pesquisar' }, buttonShowColumns:{ hoverText: 'Exibir/Ocultar Colunas', title: 'Ocultar Colunas' }, pagination:{ first: 'Primeiro', last: 'Último', next: 'Próximo', prev: 'Anterior', showing: 'Exibindo', records: 'registros', to: 'ao', outOf: 'de' }, } ... }; ``` ### License: LGPL-3.0-or-later [](#license-lgpl-30-or-later) --- --- Contact & Support --------------------- [](#contact--support) [![LinkedIn](https://camo.githubusercontent.com/14bfd77712bb1778d3e44233232d09f4fc35598827336fb8f6530d211695e396/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c696e6b6564496e2d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c696e6b6564696e266c6f676f436f6c6f723d7768697465)](https://www.linkedin.com/in/luiz-fabiano-nogueira-b20875170/)[![WhatsApp](https://camo.githubusercontent.com/e68369b430afdfd9fdc000b0dee866f550911e62ec35a17a8b0efa15ca84a2d1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f57686174734170702d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d7768617473617070266c6f676f436f6c6f723d7768697465)](https://api.whatsapp.com/send?phone=5548991779088)[![GitHub](https://camo.githubusercontent.com/c23b9de6309febd679c6c06bdb31cd13be6bdb5845d749d459fc71b01b3cf57e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.com/LuizFabianoNogueira)[![Packagist](https://camo.githubusercontent.com/ca5c937f8f8db574d438018218bcc069369d251b24cdb5110777230c70ba2ee6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5061636b61676973742d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/luizfabianonogueira/) 📞 **Phone:** +5548991779088 ✉️ **Email:** --- ### Support My Work [](#support-my-work) If you enjoyed this project and would like to support my work, any donation via Pix is greatly appreciated! Feel free to donate using one of the following Pix keys: 💳 **Email Pix Key:** `luizfabianonogueira@gmail.com` 📱 **Phone Pix Key:** `48991779088` Thank you for your support! ### Health Score 26 — LowBetter than 41% of packages Maintenance34 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community4 Small or concentrated contributor base Maturity52 Maturing project, gaining track record How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 6 Last Release 617d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/18753506?v=4)[Luiz Fabiano Nogueira](/maintainers/LuizFabianoNogueira)[@LuizFabianoNogueira](https://github.com/LuizFabianoNogueira) --- Tags laraveldatatabledata tablesspdata-table-server-sideserver side processdata-table-laravel-sspdata-table-laraveldata-table-sspdata-table-server-side-processdata-table-process ### Embed Badge ![Health badge](/badges/luizfabianonogueira-data-table-laravel-ssp/health.svg) ``` [![Health](https://phpackages.com/badges/luizfabianonogueira-data-table-laravel-ssp/health.svg)](https://phpackages.com/packages/luizfabianonogueira-data-table-laravel-ssp) ``` ### Alternatives [firefly-iii/data-importer Firefly III Data Import Tool. 8035.8k](/packages/firefly-iii-data-importer)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 17878.9k](/packages/markwalet-nova-modal-response)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.4k](/packages/tomshaw-electricgrid)[ronasit/laravel-helpers Provided helpers function and some helper class. 2085.6k31](/packages/ronasit-laravel-helpers)[team-nifty-gmbh/tall-datatables Server-side rendered datatables for Laravel and Livewire 1320.9k4](/packages/team-nifty-gmbh-tall-datatables) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)