Laravel Livewire Tables is the best PHP data table project

If you have built a web app using PHP then you have almost certainly constructed a data table. You probably also made compromises in your data table choices sacrificing either usability or maintainability for one feature or another. If you are looking for a better way to handle data tables, within PHP, you should consider looking at the Laravel Livewire Tables project:

https://github.com/rappasoft/laravel-livewire-tables

Tech Stack

This project, built for Laravel projects, leverages these technologies to give you a quick and robust data table:

Livewire

This nifty tool takes the complexity out of building dynamic web pages by allowing you to wire together PHP code with front-end functionality. Laravel Livewire Tables leverages Livewire by delegating functionality such as search, filtering, sorting, pagination and other features directly to PHP methods. No JavaScript coding and no API endpoints required.

Laravel’s Query Builder

The Query Builder provides an object-oriented way of constructing and modifying SQL Queries. Construct your base query using Query Builder, pass it to Laravel Livewire Tables and it takes care of modifying your query for functionality such as pagination, searching and sorting.

AlpineJS

If you haven’t used AlpineJS, you are missing out. This lightweight JavaScript library allows writing dynamic front-ends almost entirely from the DOM and with a fraction of the code using other libraries like JQuery. It’s also an excellent companion tool to Livewire, allowing you to bind PHP and JavaScript together in interesting ways.

Tailwind CSS / Bootstrap 4 / Bootstrap 5

Choose your preferred CSS framework for an out-of-box experience, or roll your own.

Getting Started

If your Laravel project doesn’t already use Livewire, follow the installation instructions for Livewire:

https://laravel-livewire.com/docs/2.x/quickstart

composer require livewire/livewire

Then install the Laravel Livewire Tables project

https://github.com/rappasoft/laravel-livewire-tables/wiki/Installation-&-Configuration

composer require rappasoft/laravel-livewire-tables

Next, add a Livewire DataTableComponent class to your project. Here is a simple example.

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{

    public function columns(): array
    {
        return [
            Column::make('Name')
                ->sortable()
                ->searchable(),
            Column::make('E-mail', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Verified', 'email_verified_at')
                ->sortable(),
        ];
    }

    public function query(): Builder
    {
        return User::query();
    }
}

Finally, you need to embed the table component into your views.

<livewire:users-table />

That’s it, you have a full functioning and dynamic data table with searching, filtering, sorting and pagination.