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.

tranquil-tools / laravel-vue-table-builder

Maintainers

Package info

Statistics

Security