Storybook showcase file demonstrating all major features of the `DataTable` component, which is a headless wrapper over TanStack Table (`@tanstack/react-table`) with a card-row UI. ## Key Components - **`DataTable`** — Root compound component accepting a TanStack `table` instance - **`DataTable.Header`** — Renders column headers with optional sort indicators - **`DataTable.Body`** — Renders data rows with configurable empty state - **`useDataTable`** — Hook that creates and manages the TanStack table instance - **`multiSelectFilterFn`** — Filter function for multi-value column filters - **Story exports**: `Basic`, `WithSorting` (and implied additional stories for filtering, selection, column visibility, etc.) ## Usage Example ```typescript // Minimal setup (Basic story pattern) const columns = useMemo[]>(() => [ { accessorKey: 'hostname', header: 'Hostname', meta: { width: 'w-[260px]' } }, { accessorKey: 'status', header: 'Status', cell: ({ row }) => , meta: { width: 'w-[140px]' }, }, ], []) const table = useDataTable({ data, columns }) return ( ) // Client-side sorting (WithSorting story pattern) const table = useDataTable({ data: sortedData, columns, clientSideSorting: true, }) ``` > **Note:** `useDataTable` defaults to `manualSorting: true` / `manualFiltering: true` for server-side use. Pass `clientSideSorting: true` or `clientSideFiltering: true` for in-memory operations. Row actions, chevron links, and selection checkboxes are declared as regular `ColumnDef` entries — not special props. Interactive cells that should not bubble clicks to `onRowClick` must wrap their content in a `data-no-row-click` div. **Source:** [`DataTable.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/DataTable.stories.tsx)