A VueJS/Inertia TableBuilder package for Laravel

A powerful and flexible table builder package for Laravel with Vue 3, Inertia.js, and shadcn-vue components. Similar to Laravel Splade tables but built for modern Vue 3 applications with beautiful UI components.

Installation

You can install the package via composer:

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

Alter you 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 TranquilTools\TableBuilder\AbstractTable;
use TranquilTools\TableBuilder\TableBuilder;
use App\Models\User;

class UsersTable extends AbstractTable
{
    public function for()
    {
        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.