README

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

You can install the package via composer:

composer require lara-pack/livewire-datatable

The package will automatically register its service provider.

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

To create a datatable, use the WithDatatable trait in your Livewire component. You need to implement three required methods:

datatableData(): Return the Eloquent query or paginated data.
datatableColumns(): Return the structure and configuration of the columns.
datatableView(): Return the path to the chosen table layout.

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 '<button class="btn btn-sm btn-primary">Edit</button>';
                }
            ]
        ];
    }

    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

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

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

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

Bhagaskara - bhagaskaraliancer@gmail.com

License

This project is licensed under the MIT License.

lara-pack / livewire-datatable

Maintainers

Package info

Statistics

Security