Livewire Tables for Models in Laravel

The Livewire Tables package brings dynamic tables for models to Laravel Livewire. These are some of the features which you will get out of the box:

• Selection of the columns you wish to see

• Apply multiple filters at the same time

• Perform actions on the selected records

• Works perfectly with the SoftDeletes trait

• Search columns individually

• Multiple column types supported

• Dark mode support

• 100% code coverage

Requirements

Before proceeding, please make sure you have at least met the following prerequisites:

RequirementVersionPHP^8.1Laravel^9.0, ^10.0Livewire^2.0, ^3.0Alpine.js^3.0Tailwind CSS^3.0

Requirement Table

Installation of LiveWire Tables

You can install the Livewire Table package via composer.

composer require ramonrietdijk/livewire-tables

Tailwind Configuration

This package does not ship with any assets except views. Therefore, you will have to add the views to your tailwind configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        // ...

        "./vendor/ramonrietdijk/livewire-tables/resources/**/*.blade.php"
    ]
}

Publishing Views of Livewire Tables

To make the tables blend into the style of your project, you may wish to make changes to the layout. This can be done by publishing the views and customize them any way you like.

php artisan vendor:publish --provider="RamonRietdijk\LivewireTables\ServiceProvider" --tag=views

It works by creating your table component that extends from the base LivewireTable component like the following example:

namespace App\Livewire;
use RamonRietdijk\LivewireTables\Livewire\LivewireTable;
class BlogTable extends LivewireTable{    
protected string $model = Blog::class;
}

Without repeating the documentation, here's an example of how you can map table columns to a model column:

columnColumn::make(__('Name'), 'name'), // A boolean// 
columnBooleanColumn::make(__('Published'), 'published'),// A date-based 
columnDateColumn::make(__('Created At'), 'created_at')->format('d m Y'),

There are various other types of columns that you can reference in the Columns documentation. Besides columns, you can also define filters, column actions, and more.

To render a table component like we have in our example, you can write the following:

<livewire:blog-table/>

You can start with this package by checking out the Documentation, starting with the Introduction to Livewire Table. There's also a demo available if you want to see it in action before you dive in and test out it for yourself! Lastly, you can see the source code on GitHub at ramonrietdijk/livewire-tables.