ComfyCoders TranquilTools
Docs /Laravel Vue TableBuilder
Repository
v1

Laravel Vue TableBuilder

A Laravel package for building server-driven, interactive data tables with an Inertia.js + Vue 3 frontend. Define your table once in PHP - columns, filters, search, sorting, pagination, and bulk actions are all handled automatically.

Key Features

  • Server-driven - all filtering, sorting, and pagination handled in PHP
  • Inertia.js integration - seamless SPA experience without custom AJAX code
  • Column visibility - users can show/hide columns via a dropdown
  • Filters - select-based and callback-based filters
  • Global & per-column search - with configurable wildcard modes
  • Bulk actions - with optional confirmation dialogs and password prompts
  • Row links & modals - make any row clickable
  • TypeScript support - full type definitions included

Quick Example

Table class (app/Tables/UsersTable.php):

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

    public function configure(TableBuilder $table)
    {
        $table
            ->column('id', 'ID', canBeHidden: false, sortable: true)
            ->column('name', 'Name', sortable: true, searchable: true)
            ->column('email', 'Email', sortable: true)
            ->column('company.name', 'Company')
            ->selectFilter('status', ['active' => 'Active', 'inactive' => 'Inactive'])
            ->withGlobalSearch()
            ->bulkAction('Delete', each: fn($user) => $user->delete(), confirm: 'Delete selected users?')
            ->rowLink(fn($user) => route('users.show', $user))
            ->paginate(15)
            ->defaultSort('name');
    }
}

Controller:

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

Vue page:

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

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

<template>
  <TableBuilder :table="table" />
</template>

How It Works

  1. Define a table class extending AbstractTable
  2. Pass its output to Inertia via TableBuilder::build() or UsersTable::build()
  3. Render <TableBuilder :table="table" /> in your Vue page
  4. All user interactions (sort, filter, search, page) use Inertia visits - no manual AJAX

Next Steps