4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1694,"use client"; import { TimelineChart, type TimelineChartSeries, } from "@/components/data-table/data-table-chart/timeline-chart"; import { DataTableFilterCommand } from "@/components/data-table/data-table-filter-command"; import { DataTableInfinite } from "@/components/data-table/data-table-infinite"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { MemoizedDataTableSheetContent } from "@/components/data-table/data-table-sheet/data-table-sheet-content"; import { DataTableSheetDetails } from "@/components/data-table/data-table-sheet/data-table-sheet-details"; import type { SheetField } from "@/components/data-table/types"; import { applyFacets, getFacetedMinMaxValues, getFacetedUniqueValues, getMetaPage, } from "@/lib/data-table"; import { isActive } from "@/lib/filters"; import { useNuqsAdapter } from "@/lib/store/adapters/nuqs"; import { useFilterState } from "@/lib/store/hooks/useFilterState"; import { DataTableStoreProvider } from "@/lib/store/provider/DataTableStoreProvider"; import { generateColumns, generateFilterFields, generateSheetFields, getDefaultColumnVisibility, } from "@/lib/table-schema"; import { useInfiniteQuery } from "@tanstack/react-query"; import * as React from "react"; import { dataOptions } from "./query-options"; import { filterSchema, type FilterState, type SearchParams } from "./schema"; import { tableSchema, type ColumnSchema } from "./table-schema"; // Everything the table renders is generated from the schema, once. const columns = generateColumns(tableSchema.definition); const filterFields = generateFilterFields(tableSchema.definition); const sheetFields = generateSheetFields(tableSchema.definition); const defaultColumnVisibility = getDefaultColumnVisibility( tableSchema.definition, ); /** The chart's stacked series, bottom-up. Colours come from the core block's CSS variables. */ const CHART_SERIES: TimelineChartSeries[] = [ { key: "error", label: "Error" }, { key: "warning", label: "Warning" }, { key: "info", label: "Info" }, ]; /** URL state that is not a column filter. */ const STATE_KEYS = new Set(["sort", "uuid", "size", "direction", "cursor"]); export function Client({ initialState }: { initialState: SearchParams }) { const adapter = useNuqsAdapter(filterSchema.definition, { id: "example", initialState, }); return ( ); } function Table() { const search = useFilterState(); const { data, isFetching, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery(dataOptions(search)); const flatData = React.useMemo( () => data?.pages?.flatMap((page) => page.data ?? []) ?? [], [data?.pages], ); // Facets and counts come from the page that carries meta — the first one, // since pagination requests skip it. const meta = getMetaPage(data)?.meta; const facets = meta?.facets; const defaultColumnFilters = Object.entries(search) .filter(([key, value]) => !STATE_KEYS.has(key) && isActive(value)) .map(([id, value]) => ({ id, value })); const dynamicFilterFields = React.useMemo( () => applyFacets(filterFields, facets), [facets], ); return ( row.uuid} getFacetedUniqueValues={getFacetedUniqueValues(facets)} getFacetedMinMaxValues={getFacetedMinMaxValues(facets)} chartSlot={ } commandSlot={ } sheetSlot={ } tableId="example" /> ); } function SheetSlot({ sheetFields: fields, totalRows, filterRows, totalRowsFetched, }: { sheetFields: SheetField[]; totalRows: number; filterRows: number; totalRowsFetched: number; }) { const { table, rowSelection, isLoading, filterFields } = useDataTable< ColumnSchema, unknown >(); const selectedRowKey = Object.keys(rowSelection)?.[0]; const selectedRow = React.useMemo(() => { if (isLoading && !selectedRowKey) return undefined; return table .getCoreRowModel() .flatRows.find((row) => row.id === selectedRowKey); }, [selectedRowKey, isLoading, table]); return ( ); } 50:T405,import { createNuqsSearchParams, type inferParserType, } from "@/lib/store/adapters/nuqs/server"; import { field } from "@/lib/store/schema"; import { generateFilterSchema } from "@/lib/table-schema"; import { tableSchema } from "./table-schema"; const DIRECTIONS = ["prev", "next"] as const; /** * Everything that lives in the URL: one filter field per filterable column, * generated from the table schema, plus the state that is not a filter — * the sort, the selected row, and the cursor pagination. */ export const filterSchema = generateFilterSchema(tableSchema.definition, { sort: field.sort(), uuid: field.string(), size: field.number().default(40), direction: field.stringLiteral(DIRECTIONS).default("next"), cursor: field.timestamp(), }); export type FilterState = typeof filterSchema._type; export const { searchParamsCache, searchParamsSerializer, searchParamsParser } = createNuqsSearchParams(filterSchema.definition); export type SearchParams = inferParserType; 51:T614,import { col, createTableSchema, type InferTableType, } from "@/lib/table-schema"; export const LEVELS = ["error", "warning", "info"] as const; export const METHODS = ["GET", "POST", "PUT", "DELETE"] as const; export const REGIONS = ["ams", "fra", "iad", "syd"] as const; export const STATUS_CODES = [200, 201, 400, 404, 500]; /** * The one definition the whole example reads from. The columns, the filter * sidebar, the command palette, the row sheet and the mock API's filter * semantics are all generated from it, so a column added here shows up on * every surface. */ export const tableSchema = createTableSchema({ level: col.presets .logLevel(LEVELS) .display("level-indicator") .hideHeader() .size(37), date: col.presets .timestamp() .label("Date") .defaultOpen() .commandDisabled() // The one unsized column: it absorbs the table's leftover width. .minSize(200) .sheet(), status: col.presets.httpStatus(STATUS_CODES).size(70).sheet(), method: col.presets.httpMethod(METHODS).size(80).sheet(), pathname: col.presets.pathname().size(220).sheet(), region: col .enum(REGIONS) .label("Region") .display("badge") .filterable("checkbox", { options: REGIONS.map((region) => ({ label: region, value: region })), }) .size(90) .sheet(), latency: col.presets.latency("ms").label("Latency").size(110).sheet(), uuid: col.presets.traceId().label("Request ID").hidden().sheet(), }); export type ColumnSchema = InferTableType; 52:T96f,import { LEVELS, METHODS, REGIONS, type ColumnSchema } from "./table-schema"; const ROWS = 5000; const DAYS = 7; const PATHNAMES = [ "/api/v1/orders", "/api/v1/products", "/api/v1/customers", "/checkout", "/cart", "/search", "/account/settings", "/health", ]; /** A small seeded generator, so every server process serves the same rows. */ function mulberry32(seed: number): () => number { let state = seed >>> 0; return () => { state = (state + 0x6d2b79f5) >>> 0; let t = state; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function pick(random: () => number, values: readonly T[]): T { return values[Math.floor(random() * values.length)]; } function hex(random: () => number, length: number): string { let out = ""; for (let index = 0; index < length; index++) { out += Math.floor(random() * 16).toString(16); } return out; } function statusFor(random: () => number): number { const roll = random(); if (roll < 0.85) return 200; if (roll < 0.9) return 201; if (roll < 0.94) return 400; if (roll < 0.97) return 404; return 500; } function levelFor(status: number): (typeof LEVELS)[number] { if (status >= 500) return "error"; if (status >= 400) return "warning"; return "info"; } /** * Rows spread over the last `DAYS` days, newest first — the order a timestamp * cursor expects. The values are seeded, so a refresh shows the same table; * only the timestamps move with the clock. */ export function createRows(now: number = Date.now()): ColumnSchema[] { const random = mulberry32(42); const span = DAYS * 24 * 60 * 60 * 1000; const step = span / ROWS; const rows: ColumnSchema[] = []; for (let index = 0; index < ROWS; index++) { const status = statusFor(random); const base = 40 + random() * 200; const slow = random() < 0.05 ? random() * 3000 : 0; rows.push({ uuid: hex(random, 32), // Jitter stays under one step, so the order is strictly descending. date: new Date(now - Math.floor(index * step + random() * step * 0.4)), level: levelFor(status), status, method: pick(random, METHODS), pathname: pick(random, PATHNAMES), region: pick(random, REGIONS), latency: Math.round(base + slow), }); } return rows; } export const rows = createRows(); 53:T17a7,import type { FacetMetadataSchema, InfiniteQueryResponse, } from "@/lib/data-table"; import { bucketChartData } from "@/lib/data-table/chart-data"; import { defineFilters } from "@/lib/filters"; import SuperJSON from "superjson"; import { rows } from "../data"; import { searchParamsCache, type SearchParams } from "../schema"; import { LEVELS, tableSchema, type ColumnSchema } from "../table-schema"; export const dynamic = "force-dynamic"; /** * The same filter semantics the sidebar, the command palette and the Drizzle * handler use, applied to an array. When the rows move to Postgres, replace * this file with `createDrizzleHandler` from the drizzle block — the client * does not change. */ const filters = defineFilters(tableSchema.definition); const sliderKeys = filters.specs .filter((spec) => spec.type === "slider") .map((spec) => spec.key); const dateKeys = filters.specs .filter((spec) => spec.type === "timerange") .map((spec) => spec.key); const facetKeys = filters.specs .filter((spec) => spec.type !== "timerange" && spec.type !== "slider") .map((spec) => spec.key); export async function GET(request: Request): Promise { const url = new URL(request.url); const search = searchParamsCache.parse(Object.fromEntries(url.searchParams)); const values = search as Record; // Three passes, matching the Drizzle handler: the date range first, then // every filter except the sliders, then the sliders. A slider's min and max // facet is computed over the second pass, so the range stays visible after // the user narrows it. const ranged = filters.apply(rows, values, { only: dateKeys }); const withoutSliders = filters.apply(ranged, values, { exclude: [...sliderKeys, ...dateKeys], }); const filtered = filters.apply(withoutSliders, values, { only: sliderKeys }); const page = pageRows(sortRows(filtered, search.sort), search); // Pagination requests send `_meta=false`: the client keeps the meta from the // first page, and it cannot change while the filters are fixed. const skipMeta = url.searchParams.get("_meta") === "false"; const facets = skipMeta ? {} : { ...facetsOf(withoutSliders, sliderKeys), ...facetsOf(filtered, facetKeys), }; // One point per time bucket with a count per level, over the date filter // when one is set and the rows' own span otherwise. const chartData = skipMeta ? [] : bucketChartData(filtered, { timestamp: (row) => row.date, series: (row) => row.level, keys: LEVELS, range: search.date, }); const response: InfiniteQueryResponse = { data: page, meta: { totalRowCount: rows.length, filterRowCount: filtered.length, chartData, facets, }, prevCursor: page.length > 0 ? page[0].date.getTime() : null, nextCursor: page.length > 0 ? page[page.length - 1].date.getTime() : null, }; return Response.json(SuperJSON.stringify(response)); } function compare(left: unknown, right: unknown): number { const a = left instanceof Date ? left.getTime() : left; const b = right instanceof Date ? right.getTime() : right; if (typeof a === "number" && typeof b === "number") return a - b; return String(a).localeCompare(String(b)); } /** * Newest first, the order a timestamp cursor addresses. The caller's sort * only decides between rows sharing a timestamp, and `uuid` descending * settles the rest — the same composition and directions as the Drizzle * handler (cursor desc, sort, tiebreak desc), so swapping it in does not * reshuffle tied rows. * Sorting by the requested column alone would make every page after the * first re-read or skip rows, because the cursor is still a timestamp. */ function sortRows( data: ColumnSchema[], sort: SearchParams["sort"], ): ColumnSchema[] { const key = sort?.id as keyof ColumnSchema | undefined; const direction = sort?.desc ? -1 : 1; return [...data].sort( (a, b) => compare(b.date, a.date) || (key ? compare(a[key], b[key]) * direction : 0) || compare(b.uuid, a.uuid), ); } /** * One page, addressed by a timestamp cursor. `next` reads rows older than the * cursor; `prev` reads everything newer, which is what a live refresh asks * for. Rows sharing the last timestamp travel together so none are skipped. */ function pageRows( data: ColumnSchema[], search: Pick, ): ColumnSchema[] { const cursor = search.cursor?.getTime() ?? Date.now(); // A `size` of zero or less would send back an empty first page forever. const size = search.size && search.size > 0 ? search.size : 40; if (search.direction === "prev") { return data.filter((row) => row.date.getTime() > cursor); } const page: ColumnSchema[] = []; for (const row of data) { const time = row.date.getTime(); if (time >= cursor) continue; const last = page[page.length - 1]; if (page.length < size || (last && last.date.getTime() === time)) { page.push(row); } else { break; } } return page; } /** Value counts per key, plus min and max for the numeric ones. */ function facetsOf( data: ColumnSchema[], keys: string[], ): Record { const facets: Record = {}; for (const key of keys) { const counts = new Map(); let min: number | undefined; let max: number | undefined; for (const row of data) { const value = row[key as keyof ColumnSchema]; if (value === null || value === undefined) continue; counts.set(value, (counts.get(value) ?? 0) + 1); if (typeof value === "number") { min = min === undefined ? value : Math.min(min, value); max = max === undefined ? value : Math.max(max, value); } } facets[key] = { rows: [...counts].map(([value, total]) => ({ value, total })), total: data.length, min, max, }; } return facets; } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@data-table-filters","registryDependencies":["https://data-table.openstatus.dev/r/data-table.json","https://data-table.openstatus.dev/r/data-table-schema.json","https://data-table.openstatus.dev/r/data-table-query.json","https://data-table.openstatus.dev/r/data-table-nuqs.json","https://data-table.openstatus.dev/r/data-table-sheet.json","https://data-table.openstatus.dev/r/data-table-cell.json","https://data-table.openstatus.dev/r/data-table-filter-command.json","https://data-table.openstatus.dev/r/data-table-chart.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/examples/infinite/layout.tsx","content":"\"use client\";\n\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\nimport * as React from \"react\";\n\n/**\n * The two providers the table needs, scoped to this route so nothing in the\n * root layout has to change. Move them up to `app/layout.tsx` once more than\n * one route uses them.\n */\nexport default function Layout({ children }: { children: React.ReactNode }) {\n const [queryClient] = React.useState(() => new QueryClient());\n\n return (\n \n {children}\n \n );\n}\n","type":"registry:page","target":"app/example/layout.tsx"},{"path":"src/examples/infinite/page.tsx","content":"import type { SearchParams as RawSearchParams } from \"nuqs\";\nimport { Client } from \"./client\";\nimport { searchParamsCache } from \"./schema\";\n\n/**\n * Parses the URL on the server so the first render already has the filters,\n * the sort and the cursor — no flash of an unfiltered table.\n */\nexport default async function Page({\n searchParams,\n}: {\n searchParams: Promise;\n}) {\n const search = await searchParamsCache.parse(searchParams);\n return ;\n}\n","type":"registry:page","target":"app/example/page.tsx"},{"path":"src/examples/infinite/client.tsx","content":"$4f","type":"registry:file","target":"app/example/client.tsx"},{"path":"src/examples/infinite/schema.ts","content":"$50","type":"registry:file","target":"app/example/schema.ts"},{"path":"src/examples/infinite/table-schema.ts","content":"$51","type":"registry:file","target":"app/example/table-schema.ts"},{"path":"src/examples/infinite/data.ts","content":"$52","type":"registry:file","target":"app/example/data.ts"},{"path":"src/examples/infinite/query-options.ts","content":"import { createDataTableQueryOptions } from \"@/lib/data-table\";\nimport { searchParamsSerializer, type SearchParams } from \"./schema\";\nimport type { ColumnSchema } from \"./table-schema\";\n\nconst options = createDataTableQueryOptions<\n ColumnSchema[],\n Record\n>({\n queryKeyPrefix: \"example\",\n apiEndpoint: \"/example/api\",\n searchParamsSerializer: searchParamsSerializer as (\n search: Record,\n ) => string,\n // The route honours `_meta=false`; the client reads meta via `getMetaPage`.\n skipMetaOnPagination: true,\n});\n\nexport const dataOptions = (search: SearchParams) =>\n options(search as unknown as Record);\n","type":"registry:file","target":"app/example/query-options.ts"},{"path":"src/examples/infinite/api/route.ts","content":"$53","type":"registry:page","target":"app/example/api/route.ts"}],"className":"h-[70svh] min-h-80"}]]}]