PHPackages lara-pack/livewire-datatable - 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. lara-pack/livewire-datatable ActiveLibrary[Utility & Helpers](/categories/utility) lara-pack/livewire-datatable ============================ Livewire Component : Datatable v1.1.20(2mo ago)064↑33.3%MITBladePHP ^8.1 Since Aug 22Pushed 2mo agoCompare [ Source](https://github.com/bhagaskara/lara-pack-livewire-datatable)[ Packagist](https://packagist.org/packages/lara-pack/livewire-datatable)[ RSS](/packages/lara-pack-livewire-datatable/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (10)Versions (32)Used By (0) Lara-Pack Livewire Datatable ============================ [](#lara-pack-livewire-datatable) A powerful, highly responsive, and feature-rich Datatable component built for Laravel Livewire. This package allows you to quickly build robust data tables with global search, column-specific filters, sorting, Excel/PDF exports, and an adaptive mobile-friendly card layout. Compatible with **Bootstrap 4**, **Bootstrap 5**, and **Tailwind CSS**. Installation ------------ [](#installation) You can install the package via composer: ``` composer require lara-pack/livewire-datatable ``` The package will automatically register its service provider. Dependencies ------------ [](#dependencies) This package relies on several underlying libraries: - `livewire/livewire` (^3.0 || ^4.0) - `lara-pack/livewire-select2` - `lara-pack/livewire-date-range-picker` - `barryvdh/laravel-dompdf` (for PDF export) - `maatwebsite/excel` (for Excel export) Usage ----- [](#usage) To create a datatable, use the `WithDatatable` trait in your Livewire component. You need to implement three required methods: 1. `datatableData()`: Return the Eloquent query or paginated data. 2. `datatableColumns()`: Return the structure and configuration of the columns. 3. `datatableView()`: Return the path to the chosen table layout. ### Basic Example [](#basic-example) ``` namespace App\Livewire; use Livewire\Component; use App\Models\User; use LaraPack\LivewireDatatable\WithDatatable; class UsersTable extends Component { use WithDatatable; public function datatableData() { // Return your Eloquent Query base (the trait handles paginate automatically) return User::query(); } public function datatableColumns() { return [ [ 'name' => 'Name', 'key' => 'name', 'sortable' => true, 'searchable' => true, 'filter' => 'text', // Generates a text filter above column ], [ 'name' => 'Email', 'key' => 'email', 'sortable' => true, 'filter' => 'email', ], [ 'name' => 'Status', 'key' => 'status', 'sortable' => false, 'filter' => [ 'type' => 'select', 'options' => [ ['id' => 'active', 'text' => 'Active'], ['id' => 'inactive', 'text' => 'Inactive'], ] ], 'render' => function ($item) { return $item->status == 'active' ? 'Active' : 'Inactive'; } ], [ 'name' => 'Action', // Will map nicely to the mobile card layout's footer 'sortable' => false, 'searchable' => false, 'render' => function ($item) { return 'Edit'; } ] ]; } public function datatableView() { // Choose based on your CSS framework. // Available preset layouts: // - 'lara-pack.livewire-datatable::table-bootstrap5' // - 'lara-pack.livewire-datatable::table-bootstrap4' // - 'lara-pack.livewire-datatable::table-tailwind' return 'lara-pack.livewire-datatable::table-bootstrap5'; } } ``` Features -------- [](#features) ### Advanced Column Filters [](#advanced-column-filters) You can apply different input filter interfaces per column. The built-in types include: - `text`, `number`, `email`, `date`, `datetime-local`, `time`, `tel` - `select` (Native array options) - `select2` (Leverages `lara-pack/livewire-select2` for AJAX searching) - `date-range-picker` (Leverages `lara-pack/livewire-date-range-picker`) ``` 'filter' => [ 'type' => 'select2', 'url' => route('api.roles.search'), 'multiple' => false, ] ``` ### Mobile Card View Layout [](#mobile-card-view-layout) The table is fully responsive out-of-the-box. On small viewports (like mobile phones), the table visually transforms into a clean stacked "Card" layout. - Top-level pagination handles mobile interaction flawlessly. - Action column buttons (column names containing "Aksi", "Action", or "Tindakan") automatically remap to the card footer with proper styling. - Expanding column filter menus are nicely integrated inside a dedicated toggleable button. ### Component Properties Configuration [](#component-properties-configuration) Override public properties in your component to customize table behavior: ``` public $lengthOptions = [10, 25, 50, 100]; // Pagination dropdown choices public $length = 10; // Default limit public $showKeywordFilter = true; // Show/Hide global search bar public $showSelectPageLength = true; // Show/Hide pagination limit dropdown ``` Authors ------- [](#authors) - **Bhagaskara** - License ------- [](#license) This project is licensed under the MIT License. ### Health Score 42 — FairBetter than 90% of packages Maintenance85 Actively maintained with recent releases Popularity11 Limited adoption so far Community6 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure 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 ~6 days Recently: every ~1 days Total 31 Last Release 80d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/63814bcebe20646b82976951817f1210b6c06138037b49772b844af9a876116c?d=identicon)[bhagaskara](/maintainers/bhagaskara) --- Top Contributors [![bhagaskara](https://avatars.githubusercontent.com/u/24548806?v=4)](https://github.com/bhagaskara "bhagaskara (33 commits)") ### Embed Badge ![Health badge](/badges/lara-pack-livewire-datatable/health.svg) ``` [![Health](https://phpackages.com/badges/lara-pack-livewire-datatable/health.svg)](https://phpackages.com/packages/lara-pack-livewire-datatable) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9475.0M86](/packages/livewire-flux)[mediconesystems/livewire-datatables Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS 1.2k711.3k8](/packages/mediconesystems-livewire-datatables)[livewire/volt An elegantly crafted functional API for Laravel Livewire. 4205.3M84](/packages/livewire-volt)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8041.2M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)