Suriyaprakash.

Lab.01 — Interactive systems+

The interface isthe proof.

Three production-shaped React systems for the workflows where generic component libraries stop being enough.

TanStack Table
Zod metadata
TypeScript contracts

§ 03 — Component systems+

Proof, not promises.

The same three live artifacts shown on the portfolio, expanded into complete interactive builds.
TanStack TableSYS.01

DataTable system

A production-style data table with pagination, sorting, row selection, column visibility and drag-and-drop ordering.

1,000 demo rowsSelection summaryColumn DnD
NameRoleStatus
Priya RamanDeveloperActive
Karthik SManagerActive
Ananya DevDesignerActive
Open DataTable demo
Zod metadataSYS.02

SchemaForm builder

A visual builder that configures fields, groups and layout spans, then renders them through the reference FieldRenderer.

Live previewcolSpan / rowSpanSchema output
Employment / details
Suriyaprakash Somu
Role
Email
Open SchemaForm demo
Zod → filtersSYS.03

QueryBuilder

A schema-driven filter builder with quick chips and nested AND/OR groups, evaluated live against seeded records.

Chip + tree modes300 live recordsFilter JSON export
Filters / advanced
dept = EngineeringANDstatus = Activesalary ≥ 45k
Matched rows82 / 300
Open QueryBuilder demo

Lab.02 — Working principles+

Production patterns, not toys.

Each demo exposes the state, contracts, edge cases, and interaction density that real internal software demands.
01

Sort, paginate, select, and reorder DataTable columns

02

Build multi-field forms from a visual palette

03

Arrange fields into sections and responsive grid spans

04

Export generated Zod schema code

05

Compose quick filters and nested AND/OR trees

06

Copy live filter JSON into the DataTable contract

Lab.03 — One continuous system+

Entry, discovery, decision.

SchemaForm shapes the data, QueryBuilder composes the intent, and DataTable makes the result operable. The demos are separate views of one application architecture.
Start with SYS.01