{ "name": "DataTable", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/DataTable.tsx", "chapterTag": "07 Data Display", "chapter": "08-data-display.html", "sectionId": "data-table-kit", "elName": "Live data table — sort · resize · reorder · show/hide", "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#data-table-kit", "hasLiveDemo": true, "description": "Sortable, sticky-header, cursor-paginated data table.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "DataTable", "isPrincipal": true, "isType": false }, { "name": "DataTableProps", "isPrincipal": false, "isType": false }, { "name": "DataTableColumn", "isPrincipal": false, "isType": false } ], "importStatement": "import { DataTable } from \"@magicblocksai/ui\";", "props": [], "classesUsed": [ "chip", "data-table", "data-table-cell", "data-table-cell-select", "data-table-chrome", "data-table-foot", "data-table-grid", "data-table-head", "data-table-menu", "data-table-menu-divider", "data-table-menu-header", "data-table-menu-item", "data-table-menu-pin", "data-table-menu-reset", "data-table-menu-trigger", "data-table-resize-grip", "data-table-row", "data-table-row-empty", "data-table-row-focused", "data-table-row-selected", "data-table-sort", "data-table-sort-ic", "data-table-th", "data-table-th-sortable", "empty", "layout", "menu", "page", "row" ], "examples": { "react": " r.id}\n selectable\n selectedIds={selected}\n onSelectChange={setSelected}\n sortBy=\"name\"\n sortDir=\"asc\"\n onSortChange={(f, d) => setSort({ field: f, dir: d })}\n onRowClick={(row) => router.push(`/contacts/${row.id}`)}\n nextCursor={page.next}\n onLoadMore={() => loadPage(page.next)}\n />", "html": null, "css": ".chip {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 4px 10px;\n border-radius: var(--r-pill);\n font: 500 12.5px/1.3 var(--f-body);\n background: var(--bg-paper);\n color: var(--fg);\n border: 1px solid var(--hair);\n white-space: nowrap;\n}\n\n.data-table {\n /* `position: relative` anchors the absolute-positioned `.data-table-chrome`\n overlay (the columns kebab) to the table's top-right corner — see the\n chrome rule below. v1.34.0 (Spark Round R36). */\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--s-3);\n width: 100%;\n font-family: var(--f-body);\n}\n\n.data-table-cell {\n padding: var(--s-3) var(--s-4);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.data-table-cell-select {\n padding: var(--s-3) var(--s-3);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.data-table-chrome {\n /* Absolute-position the chrome (just the columns kebab today) into the\n table's top-right corner instead of taking a full ~32px row above the\n header. Pre-v1.34.0 the chrome rendered as a flex band that hosted the\n kebab on the right and read as ~32px of dead space when nothing else\n populated it — every consumer that set `tableKey` hit this. The kebab\n functions identically; the popover anchors against this element's own\n `position: relative` (preserved here so the menu still positions against\n the trigger).\n Pointer-events scoped — the chrome itself ignores pointer events so the\n header row underneath stays click-through for sort. The kebab + popover\n children re-enable pointer-events via the `> *` rule below.\n v1.34.0 (Spark Round R36, option 3 — auto-collapse). */\n position: absolute;\n top: var(--s-1);\n right: var(--s-1);\n /* Sticky header is `z-index: 2` (.data-table-sticky .data-table-head); the\n chrome must sit above it so the kebab isn't covered when the user scrolls. */\n z-index: 3;\n margin: 0;\n display: flex;\n justify-content: flex-end;\n pointer-events: none;\n}\n\n.data-table-foot {\n display: flex;\n justify-content: center;\n padding: var(--s-2) 0;\n}\n\n.data-table-grid {\n display: grid;\n /* The outer grid is just a vertical stack of rows — each row has\n its own `display: grid` + column tracks. The actual priority-aware\n column-template magic (v1.21.0 R19-1) lives on `.data-table-row`\n where the inline-style CSS variables are set; see below. */\n grid-template-columns: 1fr;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md);\n overflow: hidden;\n}\n\n.data-table-head {\n background: var(--bg-warm, var(--bg-paper));\n border-bottom: 1px solid var(--hair);\n font: 600 12px/1.2 var(--f-body);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--fg-soft);\n}\n\n.data-table-menu {\n position: absolute;\n top: calc(100% + 4px);\n right: 0;\n z-index: var(--z-popover, 30);\n min-width: 220px;\n max-width: 280px;\n padding: var(--s-2);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md);\n box-shadow: var(--sh-2);\n animation: dt-menu-fade var(--dur-1) var(--ease);\n}\n\n.data-table-menu-divider {\n height: 1px;\n background: var(--hair);\n margin: var(--s-1) 0;\n}\n\n.data-table-menu-header {\n margin: 0 0 var(--s-1);\n padding: var(--s-1) var(--s-2);\n font: 500 11px/1 var(--f-mono);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--fg-dim);\n}\n\n.data-table-menu-item {\n display: flex;\n align-items: center;\n gap: var(--s-2);\n padding: 6px var(--s-2);\n border-radius: var(--r-xs, 4px);\n font: 400 13px/1.4 var(--f-body);\n color: var(--fg);\n cursor: pointer;\n}\n\n.data-table-menu-pin {\n margin-left: auto;\n font: 500 10px/1 var(--f-mono);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--fg-faint);\n}\n\n.data-table-menu-reset {\n display: block;\n width: 100%;\n padding: 6px var(--s-2);\n border: 0;\n border-radius: var(--r-xs, 4px);\n" } }