Skip to content
Zonvoir Table LogoZonvoir Table
Zonvoir TableMenu
Appearance

Basic Usage & Table Rendering

A Zonvoir Table starts with a PHP table class that defines your resource, columns, and table behavior. You can either write this class manually or scaffold it using the Artisan table generator.

Define a table

Section titled “Define a table”

Create a table by extending Zonvoir\ZonvoirTable\Table and specify the Eloquent model using the $resource property.

<?php


namespace App\Tables;


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


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


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


            TextColumn::make('email')
                ->label('Email')
                ->searchable(),
        ];
    }
}

The $resource property tells Zonvoir Table which Eloquent model should be used as the table’s data source:

protected ?string $resource = User::class;

The columns() method defines the columns that will be available to the table. See the Columns guide for all supported column types.

Pass the table to Inertia

Section titled “Pass the table to Inertia”

Create the table using UsersTable::make() and pass it directly to your Inertia page from your controller:

<?php


namespace App\Http\Controllers;


use App\Tables\UsersTable;
use Inertia\Inertia;
use Inertia\Response;


class UserController
{
    public function index(): Response
    {
        return Inertia::render('Users', [
            'users' => UsersTable::make(),
        ]);
    }
}

Zonvoir Table automatically builds the normalized table payload from your PHP definition, ready to be consumed by the frontend adapter.

Render the table

Section titled “Render the table”

On your Vue page, import the ZonvoirTable component and pass the table payload using the table prop:

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


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


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

That is enough to render a fully interactive data table with query synchronization.

Adding more columns

Section titled “Adding more columns”

Add additional columns to the columns() method as your table grows:

public function columns(): array
{
    return [
        TextColumn::make('id')
            ->label('ID'),


        TextColumn::make('name')
            ->label('Name')
            ->sortable(),


        TextColumn::make('email')
            ->label('Email')
            ->searchable(),
    ];
}

Each column can be configured with features such as sorting, searching, visibility, formatting, and other column-specific options.

Next Steps

Section titled “Next Steps”

With your basic table running, explore these focused guides to add more capability: