Building a Laravel-First Data Table with Inertia.js and Vue 3

How we approached server-side tables, searching, sorting, pagination, actions, and table state without duplicating logic between Laravel and Vue.

If you've built a Laravel application with Inertia.js and Vue, you've probably built a data table more than once.
At first, it looks simple:

• Get some records
• Display them in Vue
• Add pagination
• Add sorting
• Add search Then the requirements start growing.

You need column visibility, row actions, bulk actions, exports, URL state, different column types, relationship data, and more.

At that point, the table becomes a small application of its own.

We ran into this repeatedly while building SaaS applications, CRM systems, admin panels, and internal tools at Zonvoir Technologies.

So we started working on a different approach with Zonvoir Table.

**

The idea: Laravel stays in control

**

Our main goal was to keep the table definition and query logic close to Laravel while allowing Vue to focus on rendering and user interaction.

The basic flow looks like this:

Laravel Table Class → Query → Table Payload → Inertia → Vue Table

Instead of putting all of the table logic into the Vue component, the Laravel side defines things such as the columns, query and table configuration.
Vue receives the resulting data and takes care of the UI.

For example:
class UsersTable extends ZonTable
{
protected function query()
{
return User::query();
}

protected function columns()
{
    return [
        TextColumn::make('name'),
        TextColumn::make('email'),
        DateColumn::make('created_at'),
    ];
}

}

The exact API is still evolving, but the principle is simple:

Keep the data and query concerns close to Laravel. Keep presentation and interaction in Vue.

**

Why Inertia.js?

**
Inertia gives us a nice middle ground.

We don't need to build a separate API just to power an admin table, but we can still build the interface using Vue.

That means Laravel can continue handling:

• Eloquent queries
• Authorization
• Server-side searching
• Sorting
• Pagination
• Data preparation While Vue handles:
• Rendering
• Interactions
• Column visibility
• Table controls
• UI state

This separation makes the table easier to reuse across different applications.

**

What we're currently working on

**

The current Vue version of Zonvoir Table includes features such as:

• Laravel table classes
• Vue 3
• Inertia.js
• Searching
• Sorting
• Pagination
• Typed columns
• Column visibility
• Row actions
• Bulk actions
• Excel exports
• URL-synced state
• Multiple tables
• Customizable UI

We're focusing on the Laravel + Inertia.js + Vue 3 ecosystem first.
**

We don't want to reinvent every table feature

**
There are already some excellent table solutions available.

Depending on your stack, you might be using:

• TanStack Table
• PrimeVue DataTable
• DataTables
• Filament Tables
• Inertia Table
• A custom table component

Each approach has its own strengths.
Our goal isn't to say that one solution is right for everyone.
We're trying to solve a more specific problem:

What would a good Laravel-first data table look like for applications built with Inertia.js and Vue?

That's the question we're exploring with Zonvoir Table.

**

We'd like your feedback

**
We're still actively developing the package, so we're particularly interested in hearing from Laravel and Vue developers.

What do you expect from a data table package?
What features do you use every day?
And if you've moved from one table library to another, what made you switch?

You can take a look at the project here:
Website: https://zonvoir-table.com/
Documentation: https://zonvoir-table.com/getting-started/introduction/
GitHub: https://github.com/Zonvoir-technologies/laravel-inertia-table