Menu

Server-Driven Data Tables with Laravel, Inertia and React: Filters, Sorting and Pagination in the URL
📰

Server-Driven Data Tables with Laravel, Inertia and React: Filters, Sorting and Pagination in the URL

DEV Community: laravel·Tuğrul Yıldırım·about 7 hours ago
#Srlkm23U
#devtolaravel#devto#dev#filters#sort
Reading 0:00
15s threshold

Every business app eventually grows a table that people live in: products, invoices, suppliers, open orders. The first version is easy. Load everything, render a <table> , maybe add a client-side filter. Then the table hits 40,000 rows, someone asks for "sort by stock, only active items, page 3", and a colleague wants to send that exact view to a manager as a link.

This post shows the pattern I use for server-driven data tables with Laravel, Inertia and React : the server does the filtering, sorting and pagination, and the browser URL is the single source of truth for the table's state.

The problem with client-side tables

Client-side tables break down in three predictable ways:

Data size. Shipping every row to the browser works until it doesn't. Memory use, slow first paint and huge JSON payloads all arrive at once.

Unshareable state. If the filters live only in React state, a refresh or a copied link throws them away.

Two sources of truth.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.