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

Zonvoir Technologies Pvt Ltd — Thu, 08 Oct 2026 12:40:11 +0000

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