Search & filter

The loader gets the request: read its URL params and filter the data server-side.

To make the table filterable, read a URL param. The loader receives a request object — parse its URL and filter before returning the data.

src/app/products/page.tsx

export async function loader({ request }) {
  const q = new URL(request.url).searchParams.get("q") ?? "";
  const products = CATALOGUE.filter((p) => p.name.includes(q));
  return { products, q };
}

A plain <form method=\"get\"> updates the URL with ?q=… — no JavaScript, no state. The preview is filtered to “lamp”.

TIP

Pagination works the same way: read ?page in the loader and slice the result. See data & loaders.