# Introduction

> Overview of the data-table system architecture and layers

Source: https://data-table.openstatus.dev/docs/introduction · Docs index: https://data-table.openstatus.dev/llms.txt · Full docs: https://data-table.openstatus.dev/llms-full.txt

_**It’s not a library. It’s a playbook.**_

Stop hand-rolling data tables. Copy proven patterns, install the [agent skill](/docs/quick-start#agent-skill) and start shipping.

Built on the stack that actually scales:

- **[shadcn registry](https://ui.shadcn.com)** — drop components directly into your codebase
- **[TanStack Table](https://tanstack.com/table) + [Query](https://tanstack.com/query)** — sorting, filtering, infinite scroll, done
- **[Drizzle ORM](/docs/drizzle-orm)** — server-side `WHERE`, cursors, and faceted counts out of the box
- **[nuqs](https://nuqs.47ng.com) / [Zustand](https://zustand.docs.pmnd.rs/getting-started/introduction)** — URL or memory state, your call
- **[Agent SKILL.md](/docs/quick-start#agent-skill)** — describe your schema, let the agent wire it up

Define a schema. Generate columns, filters, and sheet details. Done.

![data-table with some filters and activated live mode](/assets/docs/data-table.png)

This guide covers the system end to end — from defining a table schema to rendering filters, columns, and row details. Get started with the [Quick Start](/docs/quick-start) and jump to a [Full Example](/docs/full-example).

## Examples

- [Auto](/auto) — zero-config table from raw data (no schema needed)
- [Drizzle](/drizzle) — server-side filtering with Drizzle ORM
- [Default](/default) — client-side pagination without infinite scroll
- [Infinite](/infinite) — infinite scroll with cursor pagination (mock)
- [Light](/light) — lightweight frontend for [light.openstatus.dev](https://light.openstatus.dev)
- [Builder](/builder) — interactive schema builder

> Questions, ideas, or feedback? [Open an issue on GitHub](https://github.com/openstatusHQ/data-table-filters/issues).

---

## Quick Overview

### Zero Config

Pass data, get a fully filtered table — columns, filters, and display types are auto-inferred:

```tsx
import { DataTableAuto } from "@/components/data-table/data-table-auto";

<DataTableAuto data={bookmarks} />;
```

See the [/auto](/auto) example for a live demo.

### With Schema

When you need full control, define a schema and wire up state management:

```tsx
import { col, createTableSchema } from "@/lib/table-schema";
import { generateColumns, generateFilterFields } from "@/lib/table-schema";
import { createSchema, field } from "@/lib/store/schema";

// 1. Define your table
const tableSchema = createTableSchema({
  level: col.presets.logLevel(["error", "warn", "info", "debug"]),
  latency: col.presets.duration("ms").label("Latency").sortable(),
  host: col.string().label("Host"),
});

// 2. Generate everything the components need
const columns = generateColumns(tableSchema.definition);
const filterFields = generateFilterFields(tableSchema.definition);

// 3. Wire up state + components
<DataTableStoreProvider adapter={adapter}>
  <DataTableInfinite columns={columns} filterFields={filterFields} ... />
</DataTableStoreProvider>
```

---

## Architecture

The data-table is built on three layers:

1. **Table Schema** — a declarative builder that defines columns, filters, display, sorting, and row details in one place
2. **State Management** — a pluggable adapter system for filter state (URL, Zustand, or custom)
3. **UI Components** — pre-built filter controls, command palette, infinite scroll table, and row detail drawer

For server-side data, the [Drizzle ORM](/docs/drizzle-orm) helpers handle `WHERE` conditions, sorting, cursor pagination, and faceted counts. The [Data Fetching](/docs/data-fetching) layer covers the API response shape and React Query integration.

```
Table Schema → Generators → Components
     ↓              ↓            ↓
  col.*        columns[]    DataTableInfinite
  presets      filterFields  DataTableFilterControls
  .sheet()     sheetFields   DataTableSheetDetails
               filterSchema  DataTableFilterCommand
```