Playground
Interactive demos of UI components built with TanStack libraries.
DataTable
Sortable, paginated table with 1000 rows of sample data, column drag-and-drop reordering, search, and row selection.
Schema Form Builder
Visual form schema builder. Add fields, configure properties, and preview the live form — all on the client side.
Query Builder
Schema-driven filter builder with quick chips and advanced AND/OR canvas, filtering 300 seeded records live.
Production patterns, not toy demos
This playground showcases three reusable React component patterns that carry real business applications: a configurable DataTable for dense, sortable data grids, a schema-based form builder that generates forms from typed metadata instead of hand-written JSX, and a QueryBuilder that turns Zod schemas into chip and tree filters with live filtering over seeded records.
All three are built with TanStack Table, Zod, and TypeScript and expose the same production-style APIs you would copy into an ERP module or admin panel — server-style data fetching, typed column configurations, grid-span layout metadata, and generated validation schemas.
What you can try
- Sort, paginate, select, and reorder columns in the DataTable
- Build a multi-field form from a visual palette
- Arrange fields into sections and groups with grid spans
- Export the resulting Zod schema code
- Build quick chip filters and advanced AND/OR trees in QueryBuilder
- Copy live Filter JSON for wiring to DataTable