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-next

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="vue-table-builder-config"

The content of the published config can be viewed here.

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
• 📱 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.