README

A powerful and flexible table builder package for Laravel with Vue 3, Inertia.js, and shadcn-vue components.

CrudBuilder

Want a complete CRUD solution? Our CrudBuilder builds on top of this TableBuilder and the FormBuilder to give you full create, read, update, and delete flows without repetitive boilerplate.

Docs: docs.comfycoders.nl/laravel-vue-crud-builder
GitHub: github.com/ComfyCodersBV/laravel-vue-crud-builder

Installing the CrudBuilder pulls in this package automatically as a Composer dependency.

Installation

You can install the package via composer:

composer require tranquil-tools/laravel-vue-table-builder

Install the required npm packages:

npm install reka-ui @lucide/vue

Alter your vite.config.ts to add an @table-builder alias:

import {defineConfig} from 'vite';
import path from 'path';

export default defineConfig({
    plugins: [
        // ...
    ],
    resolve: {
        alias: {

            // Add this:

            '@table-builder': path.resolve(__dirname, 'vendor/tranquil-tools/laravel-vue-table-builder/resources/js'),
        },
    },
});

You can publish the config file with:

php artisan vendor:publish --tag="table-builder-config"

The config ships with tranquil-tools/laravel-table-builder. An application that published config/vue-table-builder.php before 1.9 keeps working; rename the file when convenient.

Usage

Backend (Laravel)

Create a table class:

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use TranquilTools\TableBuilder\AbstractTable;
use TranquilTools\TableBuilder\TableBuilder;

class UsersTable extends AbstractTable
{
    public function for(): Builder
    {
        return User::query();
    }

    public function configure(TableBuilder $table)
    {
        $table
            ->defaultSort('name')
            ->withGlobalSearch(columns: ['name', 'email'])
            ->column('id', 'ID')
            ->column('name', 'Name', sortable: true)
            ->column('email', 'Email', sortable: true)
            ->column('created_at', 'Created', sortable: true)
            ->paginate(25);
    }
}

In your controller:

use Inertia\Inertia;

public function index()
{
    return Inertia::render('Users/Index', [
        'table' => \App\Tables\UsersTable::build(),
    ]);
}

Frontend (Vue)

Import the TableBuilder component:

<script setup lang="ts">
    import {TableBuilder} from '@/components'
    import type {TableData} from '@/types/table-builder'

    defineProps<{
        table: TableData
    }>()
</script>

<template>
    <div>
        <h1>Users</h1>
        <TableBuilder :table="table"/>
    </div>
</template>

Features

🎨 Beautiful UI with shadcn-vue table components
🔍 Sortable columns with visual indicators
📄 Pagination with Inertia.js optimization
🎯 Nested relationship support (e.g., user.company.name)
🚀 Built with TypeScript for type safety
⚡ Optimized navigation with preserve-state and preserve-scroll
🔌 Optional HTTP transport to drive a table from an API instead of the Inertia page
🧩 Scoped slots for cells, row actions and extra toolbar controls
↕️ Drag-reorderable rows, per-row classes, a row-click event and a row-after slot for nested rows
🔘 Row actions defined in the Table class, hidden or disabled per row
💾 Server-side reorder persistence on an order column
📅 Date and date range filters, configurable query keys and empty states
📱 Fully responsive design

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

ComfyCoders B.V.

License

The MIT License (MIT). Please see License File for more information.

tranquil-tools / laravel-vue-table-builder

Package info

Security

Statistics