The advanced Laravel, Inertia & Vue data table component
A shadcn-vue component with everything you need to build powerful data tables: search, sorting, filtering, pagination and row selection. It's all server-driven out of the box, so your app stays fast no matter how much data you throw at it.
Everything a great data table needs
Powerful tables, without the boilerplate
Inertia Table gives your Laravel and Vue app a complete, server-driven data table with search, sorting, filtering, pagination and more, so you can stop rebuilding the same thing on every project.
- Server-driven performance
Every sort, search, filter and page change runs on the server, so the browser never has to load your entire table. It stays fast whether you have 100 rows or a million.
- Search, sort & filter
A debounced search box, click-to-sort column headers and multi-select filter menus, all wired up to your backend and ready to use out of the box.
- Smart pagination
A page-size selector, first / previous / next / last controls, jump-to-page, and a clear “showing 1–10 of 240” summary so users always know where they are.
- Toggle columns
Let users show or hide the columns they care about from a built-in menu, so everyone can focus on the data that matters to them.
- Row selection
Select a single row, a whole page, or your filtered results, then build your own bulk actions on top.
- Shareable URL state
Filters, sorting and the current page live in the URL, so links are shareable, the browser back button works, and a refresh never loses your place.
Built on a rock-solid foundation
The best tech, carefully selected and assembled.
TanStack Table
Headless engine for rows, columns, sorting, filtering, grouping, pagination and selection to build advanced data tables.
Spatie Query Builder
Build Laravel Eloquent queries with easy sorting and filtering.
Inertia.js 3
The best bridge between Laravel and Vue.js, for making reactive single-page apps without building an API, the monolithic way.
Vue.js 3
The best reactive framework to pair with Laravel. With modern coding practices, using composition API and setup script.
TypeScript
All components are typed to provide better autocompletion and type safety.
Tailwind CSS 4
Style your app in the most easy and productive way, directly in your markup.
shadcn-vue
Beautiful, accessible, and customizable components.
Built for scale
Server-driven architecture
Many data tables load your entire dataset into the browser and do all the work there, which quietly falls apart the moment your table grows. Inertia Table takes the opposite approach: every action becomes a request to your Laravel backend.
Sorting, searching, filtering and pagination are all turned into simple query parameters, so the browser only ever holds the rows on screen. Your tables stay fast with thousands, or even millions of records.
- Only loads what is visible
- The browser receives just the current page of results, never your whole database.
- Powered by Laravel pagination
- Built to work with the Laravel paginator you already reach for, so it feels native to your app.
- Plays nicely with Spatie Query Builder
- Whitelist which columns can be sorted and filtered with allowedSorts and allowedFilters for clean, safe queries.
- API Resources supported
- Return a plain paginator or a Laravel API Resource collection. The table understands both shapes.
Find anything, fast
Search, sort and filter, handled for you
Give users the controls they expect from a modern data table, without building any of them yourself. Everything is included and connected to your backend from the very first line of code.
- Click-to-sort columns
- Sort any column ascending or descending from a tidy header menu, even by several columns at once.
- Debounced search box
- A ready-made search input waits until users stop typing before querying, with a button to clear it.
- Multi-select faceted filters
- Add dropdown filters with selectable options, icons and result counts (perfect for statuses, categories or tags).
- Spatie Query Builder support out of the box
- Sorting and filtering are sent in the format Spatie Query Builder expects, so there is nothing to translate.
Effortless navigation
Pagination your users will actually enjoy
Moving through pages should feel obvious and quick. Inertia Table ships with a complete, polished paginator that adapts to any screen size.
- Choose how many rows to show
- Let users switch between 10, 25, 50 or 100 rows per page, or define your own set of options.
- A full set of controls
- First, previous, next and last buttons, plus a field to jump straight to any page number.
- Always-clear context
- A running summary such as “showing 1 to 10 of 240 results” tells users exactly where they are.
- Responsive by design
- The controls gracefully adapt on smaller screens, so the paginator stays comfortable to use on mobile.
Put users in control
Column visibility and row selection
Real applications need more than a static grid. Inertia Table lets people tailor the view to their needs and act on the data right in front of them.
- Show or hide columns
- A built-in menu lets users toggle columns on and off to focus on what matters most to them.
- Select rows with ease
- Checkboxes let users pick individual rows or select a whole page at once, with a smart “some selected” state.
- Use the selection anywhere
- Read the selected rows from your own components to build your bulk actions.
- Loading states built in
- A subtle overlay appears while data is refreshing, so the interface always feels responsive.
Flexible data sources
Works with Inertia pages or API endpoints
However your app is structured, Inertia Table fits right in. Feed it data from a standard Inertia page, or point it at an API endpoint and let it fetch on its own.
- Inertia mode
- Pass your paginated data as a page prop and the table navigates with Inertia visits, preserving scroll position and page state.
- API mode
- Give it a URL (and optionally your own fetch function) and it will load and refresh data asynchronously.
- Several tables, one page
- A simple name option keeps each table’s filters and sorting separate when more than one lives on the same page.
- Shareable, bookmarkable views
- Because the table’s state lives in the URL, any filtered or sorted view can be copied, shared or bookmarked.
<template>
<!-- Inertia mode — data arrives as a page prop -->
<InertiaTable :data="orders" :columns="columns" />
<!-- API mode — give it a URL and it fetches on its own -->
<InertiaTable url="/api/orders" :columns="columns" />
<!-- Several tables on one page, kept apart by name -->
<InertiaTable name="orders" :data="orders" :columns="orderColumns" />
<InertiaTable name="users" :data="users" :columns="userColumns" />
</template>Built for developers
TanStack power, fully typed and fully yours
Under the hood, Inertia Table is built on the battle-tested TanStack Table engine and written entirely in TypeScript, then wrapped in a clean, Laravel-friendly API.
You get sensible defaults for everything, plus an escape hatch to the full underlying table whenever you need to go further.
- Built on TanStack Table
- The complete TanStack Table instance is exposed, so its advanced features are always within reach.
- Type-safe by default
- Written in TypeScript and generic over your own row type, for confident autocompletion and fewer bugs.
- Custom cell rendering
- Render badges, buttons, links or any Vue component inside a cell, and react to row clicks.
- Every label is translatable
- All text and labels can be overridden, making localization straightforward.
- A shadcn-vue component, styled to match your app
- Install it with the shadcn CLI and it inherits your Tailwind theme variables and dark mode straight away.
import type { ColumnDef } from '@tanstack/vue-table'
import { h } from 'vue'
import { Badge } from '@/components/ui/badge'
interface Order {
reference: string
customer: string
status: 'paid' | 'pending' | 'refunded'
amount: number
}
// Generic over your own row type: fully typed and autocompleted
const columns: ColumnDef<Order>[] = [
{ accessorKey: 'customer', header: 'Customer' },
{
accessorKey: 'status',
header: 'Status',
// Render any Vue component inside a cell
cell: ({ row }) => h(Badge, () => row.original.status),
},
]Beyond the table
Building a whole app, not just a table?
Inertia Table is one piece of a much bigger toolkit. Meet the starter kit it comes from.
The monetization-ready Laravel, Inertia & Vue starter kit
Buy Inertia Start and Inertia Table comes bundled in, alongside everything else you need to launch a real product: authentication, billing, teams, a user dashboard and more. Ship your SaaS in days, not months!
Also included
- Authentication
- Billing & subscriptions
- Teams, roles & permissions
- User dashboard
- Localization
- Self-hosted analytics
- Notifications
- Light & dark theme
Standalone license
Simple, transparent pricing
Pay once, own it forever. No monthly fees, no hidden costs.
Perpetual License
Full access to the Inertia Table component source, including 12 months of updates and shadcn-vue registry access. Continue using your downloaded version indefinitely.
What is included
- Standalone Inertia Table Vue.js component source code
- 12 months of updates and registry access
- Commercial use for unlimited projects