Introduction & Overview

Zonvoir Table helps you build data tables for Laravel and Inertia applications without scattering table behavior across controllers, query strings, and frontend components.

You define the table once in PHP: its query, columns, search behavior, sorting, pagination, actions, exports, and UI metadata. The frontend adapter receives a predictable payload and renders the interactive table experience.

What You Get

Zonvoir Table is designed for application tables that need to do more than display rows.

• Backend table classes keep query behavior, columns, state, actions, and exports in one place.
• Typed columns describe text, numeric, boolean, badge, image, date, date-time, and action cells.
• Search and sorting are applied through the backend query layer, with URL state for predictable navigation.
• Pagination controls support standard, simple, and cursor pagination flows.
• Column visibility and sticky columns let users scan wide datasets without losing important context.
• Row actions and bulk actions provide interactive workflows from the table surface.
• Excel exports can be limited to filtered rows or selected rows.
• Vue 3 adapter support renders the normalized table payload in Inertia-powered pages.

Why It Exists

Most tables start simple, then slowly collect behavior: filters, sorting, row links, actions, bulk operations, exports, hidden columns, sticky columns, and URL state.

Zonvoir Table gives those concerns a home. Instead of rebuilding the same table plumbing on every page, you create a table class that explains how the resource should behave.

Example

Create a table class for your resource:

use App\Models\User;
use Zonvoir\ZonvoirTable\Columns\BadgeColumn;
use Zonvoir\ZonvoirTable\Columns\TextColumn;
use Zonvoir\ZonvoirTable\Table;

class UsersTable extends Table
{
    protected ?string $resource = User::class;

    protected array|string|null $search = ['name', 'email'];

    protected ?string $defaultSort = 'name';

    public function columns(): array
    {
        return [
            TextColumn::make('name', 'Full Name')
                ->searchable()
                ->sortable()
                ->sticky(),

            TextColumn::make('email')
                ->searchable(),

            BadgeColumn::make('status')
                ->colors(['active' => 'success'])
                ->solid(),
        ];
    }
}

Render the table payload with the frontend adapter:

<script setup lang="ts">
import { ZonvoirTable } from '@zonvoir/zonvoir-table-vue';

const props = defineProps<{
  users: unknown;
}>();
</script>

<template>
  <ZonvoirTable :table="props.users" />
</template>

Core Idea

Define table behavior once on the backend, then send a stable payload to the frontend. Laravel owns the data and query rules. The adapter owns rendering and browser interaction.

Next Steps

• Check Requirements for supported PHP, Laravel, and Vue versions.
• Follow Installation to install the Composer and npm packages.
• Read Basic Usage to configure your first table controller and Vue page.
• Explore Table Generation to scaffold table classes with Artisan.