Live demo

OmniGrid

A data grid over 100 sample shipments. TanStack Table renders it without owning its markup, TanStack Query caches it, and Zod checks every response.

TanStack QueryTanStack TableZod

How it works

  • Headless table.

    TanStack Table owns sorting and filtering; the markup is mine, so the grid looks like the rest of the page.

  • Cached, then fresh.

    TanStack Query serves the rows it has at once and refetches in the background after 30 seconds. The panel beside the grid shows the cache's state.

  • Checked at the boundary.

    Every response is parsed with Zod before the grid sees it, so a wrong shape fails in one place.