Weave Code
Livewire Datatables Laravel Package
nodus-it/livewire-datatables
Build interactive, reactive data tables in Laravel with Livewire. Add sorting, searching, filtering, and pagination using simple PHP components—no custom JavaScript required. Clean Blade templates make every table easy to customize.
Livewire Datatables is a lightweight Laravel package that brings powerful, reactive data tables to your Livewire components with minimal setup. It handles sorting, searching, and pagination server-side, so large datasets stay fast and responsive without repetitive query code.
Built for real-world applications, it integrates cleanly with Eloquent models and Blade views, letting you define columns and filters declaratively.
- Server-side sorting, search, and pagination
- Declarative column and filter configuration
- Clean Eloquent and Blade integration
- Customizable row actions and views
Frequently asked questions about Livewire Datatables
- How do I install nodus-it/livewire-datatables in a Laravel application?
- Install it with Composer using composer require nodus-it/livewire-datatables, then publish any optional config or Blade views if the package ships them. You need an existing Laravel app with Livewire installed and Bootstrap 4 loaded in your layout, since the table markup and styling target Bootstrap v4. After that, either extend the package's datatable component or compose it inside an existing Livewire view and point it at an Eloquent model or query builder. Pin the exact patch version rather than a caret range because the package is pre-1.0.
- Does this package support Livewire 3 and Laravel 10 or 11?
- Livewire 2 and Livewire 3 are materially different runtimes, and table packages depend heavily on lifecycle hooks that changed between them, so support cannot be assumed. Version 0.10.x should be checked against its composer.json constraints and validated on your exact Laravel and Livewire majors before you commit. Run a throwaway component against your target versions first and read the resolved versions in your lockfile.
- How does search and sorting work in a Livewire datatable?
- Table state such as the search term, sort column, sort direction, page size and current page is owned by the Livewire component and sent back to the server on each interaction. The component rebuilds the query, applies search and order clauses, paginates the results and re-renders only the table markup, so you never ship the full dataset to the browser. Columns are typically flagged as searchable or sortable in the column definition array, which keeps the configuration declarative.
- Can I use a custom Eloquent query builder, joins or scopes with this package?
- Yes. The component resolves its rows from an Eloquent model or query builder, so you can pass a pre-built query with joins, eager loads, where clauses and authorization scopes already applied. The real integration cost is not installation but mapping your existing query logic, policy scoping and row-level authorization onto the package's extension points. Treat those column definitions and filter hooks as part of your application's public API once they are in use.
- How do I customize how a column is rendered, for example with badges or action buttons?
- Columns are defined in the component and can be pointed at Blade views or closures instead of raw model attributes, which is how you render status badges, formatted dates, links and row action buttons. Because everything renders through Blade inside a Livewire component, you can reuse your existing partials and Bootstrap 4 components. Keep heavy formatting logic in accessors or view models so the column definition stays readable.
- Is nodus-it/livewire-datatables stable enough for production at version 0.10?
- It is pre-1.0, which means SemVer allows breaking changes on minor bumps such as 0.10 to 0.11, not just on majors. The 0.10.3 release notes contain only a compare link with no changelog body, so the actual delta from 0.10.2 must be read from the commit diff before upgrading. The pragmatic approach is to pin an exact patch version, pilot on one low-risk read-only screen such as a reporting or audit log view, and promote it to screens with write actions only after that validates.
- How do I add custom filters, such as a date range or status filter, to the table?
- Filters are implemented through the package's filter hooks, where you define the filter inputs and the query constraints they apply when the component re-renders. You can add select boxes, date ranges or free-text filters by binding them to public properties and applying conditional where clauses to the underlying builder. Keep each filter's logic in a small dedicated method so the query stays auditable and testable.
- Does this package work with Bootstrap 5 or only Bootstrap 4?
- The package is built and documented for Bootstrap v4, and its views and markup rely on Bootstrap 4 classes and component structure. Bootstrap 5 renamed and removed several utility and component classes, so running it unchanged against a Bootstrap 5 theme will produce broken layouts. You can publish and override the package views to adapt the markup, but budget time for that and re-check after each upgrade.
- How do I write tests for a Livewire datatable component?
- Use Livewire's built-in testing helpers to mount the component, call set() on the search, sort and filter properties, and assert the rendered output with assertSee and assertSet. Cover authorization scoping explicitly, because a table that leaks rows outside a user's policy scope is a real security issue rather than a cosmetic bug. The package's own CI matrix and coverage are not documented in the release metadata, so treat your application-level tests as the source of truth.
- What are the alternatives to this package for server-side tables in Laravel?
- Common alternatives include Rappasoft's Laravel Livewire Tables and PowerGrid for Livewire-based server-side tables, and Filament's table builder if you are already using Filament for admin panels. For public-facing, high-concurrency grids with virtualized scrolling, column resizing or real-time cell editing, a dedicated JavaScript grid or an API-plus-SPA split is the better pattern than a Livewire component. If your codebase has standardized on Inertia, Vue or React, introducing Livewire purely for tables will fragment the frontend architecture.
Weaver
How can I help you explore Laravel packages today?