@stackframe/dashboard-ui-components 2.8.89 → 2.8.91

package/dist/esm/components/data-grid/data-grid.js

@@ -3,83 +3,17 @@
 import { ArrowDown, ArrowUp, CaretDown, CaretUp, CheckSquare, MinusSquare, Square } from "@phosphor-icons/react";
 import { cn } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { clearSelection, exportToCsv, formatGridDate, getSortDirection, getSortIndex, isColumnVisible, resolveColumnValue, resolveColumnWidth, selectAll, toggleRowSelection, toggleSort } from "./state.js";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { exportToCsv, formatGridDate, resolveColumnValue } from "./state.js";
 import { resolveDataGridStrings } from "./strings.js";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DesignSkeleton } from "../skeleton.js";
-import { applyDraggedColumnWidth, clampColumnWidth, createGridSizingStyle, getColumnSizingStyle } from "./data-grid-sizing.js";
+import { DEFAULT_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing.js";
 import { DataGridToolbar } from "./data-grid-toolbar.js";
 
 //#region src/components/data-grid/data-grid.tsx
-function ResizeHandle({ onResize, onResizeEnd }) {
-	const startXRef = useRef(0);
-	const rafRef = useRef(0);
-	const latestDeltaRef = useRef(0);
-	const callbacksRef = useRef({
-		onResize,
-		onResizeEnd
-	});
-	callbacksRef.current = {
-		onResize,
-		onResizeEnd
-	};
-	const onPointerDown = useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		startXRef.current = e.clientX;
-		latestDeltaRef.current = 0;
-		const el = e.currentTarget;
-		el.setPointerCapture(e.pointerId);
-		let finished = false;
-		const onMove = (ev) => {
-			latestDeltaRef.current = ev.clientX - startXRef.current;
-			if (rafRef.current !== 0) return;
-			rafRef.current = requestAnimationFrame(() => {
-				rafRef.current = 0;
-				callbacksRef.current.onResize(latestDeltaRef.current);
-			});
-		};
-		const finish = () => {
-			if (finished) return;
-			finished = true;
-			if (rafRef.current !== 0) {
-				cancelAnimationFrame(rafRef.current);
-				rafRef.current = 0;
-				callbacksRef.current.onResize(latestDeltaRef.current);
-			}
-			el.removeEventListener("pointermove", onMove);
-			el.removeEventListener("pointerup", finish);
-			el.removeEventListener("pointercancel", finish);
-			el.removeEventListener("lostpointercapture", finish);
-			if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
-			callbacksRef.current.onResizeEnd();
-		};
-		el.addEventListener("pointermove", onMove);
-		el.addEventListener("pointerup", finish);
-		el.addEventListener("pointercancel", finish);
-		el.addEventListener("lostpointercapture", finish);
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("absolute right-0 top-0 bottom-0 z-10 w-[5px] cursor-col-resize touch-none", "group-hover/header:bg-foreground/[0.06] hover:!bg-blue-500/30", "transition-colors duration-100"),
-		onClick: (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-		},
-		onPointerDown
-	});
-}
-function getNearestVerticalScrollElement(element) {
-	let current = element?.parentElement ?? null;
-	while (current) {
-		const style = window.getComputedStyle(current);
-		const overflowY = style.overflowY === "visible" ? style.overflow : style.overflowY;
-		if ((overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && current.scrollHeight > current.clientHeight + 1) return current;
-		current = current.parentElement;
-	}
-	return window;
-}
 function getEventTargetElement(target) {
 	if (target instanceof Element) return target;
 	if (target instanceof Node) return target.parentElement;
@@ -101,41 +35,122 @@ function isDataGridInteractiveRowClickTarget(target) {
 function shouldIgnoreRowClick(event) {
 	return event.defaultPrevented || isDataGridInteractiveRowClickTarget(event.target);
 }
-function HeaderCell({ col, isSorted, sortIndex, resizable, onSort, onResize, onResizeEnd }) {
+function toTanstackSorting(sorting) {
+	return sorting.map((s) => ({
+		id: s.columnId,
+		desc: s.direction === "desc"
+	}));
+}
+function fromTanstackSorting(sorting) {
+	return sorting.map((s) => ({
+		columnId: s.id,
+		direction: s.desc ? "desc" : "asc"
+	}));
+}
+function toTanstackRowSelection(ids) {
+	const out = {};
+	for (const id of ids) out[id] = true;
+	return out;
+}
+function resolveUpdater(updater, current) {
+	return typeof updater === "function" ? updater(current) : updater;
+}
+function distributeFlexWidths(sizes, visibleColumns, available) {
+	const flexCols = visibleColumns.filter((c) => c.flex != null && c.flex > 0);
+	if (flexCols.length === 0 || available <= 0) return;
+	const totalFlex = flexCols.reduce((acc, c) => acc + (c.flex ?? 0), 0);
+	let remaining = available;
+	flexCols.forEach((col, i) => {
+		const share = i === flexCols.length - 1 ? remaining : Math.floor(available * ((col.flex ?? 0) / totalFlex));
+		const max = col.maxWidth ?? Infinity;
+		const add = Math.max(0, Math.min(share, max - sizes[col.id]));
+		sizes[col.id] += add;
+		remaining -= add;
+	});
+}
+function selectSingle(current, rowId) {
+	const isSelected = current.selectedIds.has(rowId);
+	return {
+		selectedIds: isSelected ? /* @__PURE__ */ new Set() : new Set([rowId]),
+		anchorId: isSelected ? null : rowId
+	};
+}
+function selectRange(current, rowId, allRowIds, additive) {
+	if (current.anchorId == null) return null;
+	const anchorIdx = allRowIds.indexOf(current.anchorId);
+	const currentIdx = allRowIds.indexOf(rowId);
+	if (anchorIdx < 0 || currentIdx < 0) return null;
+	const start = Math.min(anchorIdx, currentIdx);
+	const end = Math.max(anchorIdx, currentIdx);
+	const next = additive ? new Set(current.selectedIds) : /* @__PURE__ */ new Set();
+	for (let i = start; i <= end; i++) next.add(allRowIds[i]);
+	return {
+		selectedIds: next,
+		anchorId: current.anchorId
+	};
+}
+function selectToggle(current, rowId) {
+	const next = new Set(current.selectedIds);
+	if (next.has(rowId)) next.delete(rowId);
+	else next.add(rowId);
+	return {
+		selectedIds: next,
+		anchorId: rowId
+	};
+}
+function nextSelection(input) {
+	const { current, rowId, mode, modifiers, allRowIds } = input;
+	if (mode === "single") return selectSingle(current, rowId);
+	if (modifiers.shift) {
+		const range = selectRange(current, rowId, allRowIds, modifiers.ctrl);
+		if (range != null) return range;
+	}
+	if (modifiers.ctrl) return selectToggle(current, rowId);
+	return {
+		selectedIds: new Set([rowId]),
+		anchorId: rowId
+	};
+}
+function HeaderCell({ header, col, resizable }) {
+	const sorted = header.column.getIsSorted();
+	const sortIndex = header.column.getSortIndex();
+	const totalSorts = header.column.getCanMultiSort() ? header.getContext().table.getState().sorting.length : 0;
 	const ctx = {
 		columnId: col.id,
 		columnDef: col,
-		isSorted,
-		sortIndex
+		isSorted: sorted === false ? false : sorted,
+		sortIndex: totalSorts > 1 && sortIndex >= 0 ? sortIndex + 1 : null
 	};
 	const label = typeof col.header === "function" ? col.header(ctx) : col.header;
-	const sortable = col.sortable !== false;
+	const sortable = header.column.getCanSort();
+	const canResize = resizable && header.column.getCanResize();
+	const isResizing = header.column.getIsResizing();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent overflow-hidden", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", sortable && "cursor-pointer"),
-		style: getColumnSizingStyle(col),
+		style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
 		"data-col-id": col.id,
-		onClick: (e) => sortable && onSort(col.id, e.metaKey || e.ctrlKey),
+		onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
 		role: "columnheader",
-		"aria-sort": isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : "none",
+		"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none",
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: cn("flex-1 min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground", col.align === "center" && "text-center", col.align === "right" && "text-right"),
 				children: label
 			}),
-			isSorted && /* @__PURE__ */ jsxs("span", {
+			sorted && /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-0.5 text-foreground/60",
-				children: [isSorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
+				children: [sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
 					className: "h-3 w-3",
 					weight: "bold"
 				}) : /* @__PURE__ */ jsx(ArrowDown, {
 					className: "h-3 w-3",
 					weight: "bold"
-				}), sortIndex != null && /* @__PURE__ */ jsx("span", {
+				}), ctx.sortIndex != null && /* @__PURE__ */ jsx("span", {
 					className: "text-[10px] font-medium tabular-nums",
-					children: sortIndex
+					children: ctx.sortIndex
 				})]
 			}),
-			!isSorted && sortable && /* @__PURE__ */ jsxs("span", {
+			!sorted && sortable && /* @__PURE__ */ jsxs("span", {
 				className: "hidden group-hover/header:flex items-center text-foreground/20",
 				children: [/* @__PURE__ */ jsx(CaretUp, {
 					className: "h-2.5 w-2.5 -mb-[1px]",
@@ -145,9 +160,14 @@ function HeaderCell({ col, isSorted, sortIndex, resizable, onSort, onResize, onR
 					weight: "bold"
 				})]
 			}),
-			resizable && col.resizable !== false && /* @__PURE__ */ jsx(ResizeHandle, {
-				onResize: (delta) => onResize(col.id, delta),
-				onResizeEnd
+			canResize && /* @__PURE__ */ jsx("div", {
+				onMouseDown: header.getResizeHandler(),
+				onTouchStart: header.getResizeHandler(),
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				className: cn("absolute right-0 top-0 bottom-0 z-10 w-[5px] cursor-col-resize touch-none", "group-hover/header:bg-foreground/[0.06] hover:!bg-blue-500/30", "transition-colors duration-100", isResizing && "bg-blue-500/40")
 			})
 		]
 	});
@@ -172,7 +192,7 @@ function DataCell({ col, row, rowId, rowIndex, isSelected, dateDisplay }) {
 	const isWrap = col.cellOverflow === "wrap";
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex px-3 bg-transparent overflow-hidden", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", "text-sm text-foreground", isWrap ? "items-start py-2" : "items-center", col.align === "center" && "justify-center", col.align === "right" && "justify-end", hasCellClick && "cursor-pointer"),
-		style: getColumnSizingStyle(col),
+		style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
 		"data-col-id": col.id,
 		role: "gridcell",
 		onClick: col.onCellClick ? (e) => {
@@ -207,10 +227,6 @@ function formatCellValue(value) {
 		children: String(value)
 	});
 }
-/** Built-in date cell — mirrors what `formatGridDate` returns but wraps
-* the display in a `<span>` with a `title` tooltip showing the absolute
-* datetime. Only used when the column has `type: "date" | "dateTime"`
-* and no custom `renderCell`. */
 function renderDateCell(value, dateDisplay, col) {
 	const { display, tooltip } = formatGridDate(value, dateDisplay, {
 		parseValue: col.parseValue,
@@ -242,7 +258,7 @@ function SkeletonRow({ columns, height, showCheckbox }) {
 			children: /* @__PURE__ */ jsx(DesignSkeleton, { className: "h-4 w-4 rounded" })
 		}), columns.map((col) => /* @__PURE__ */ jsx("div", {
 			className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
-			style: getColumnSizingStyle(col),
+			style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
 			children: /* @__PURE__ */ jsx(DesignSkeleton, {
 				className: "h-3.5 rounded-md",
 				style: { width: `${40 + hashStringToInt(col.id) % 40}%` }
@@ -250,7 +266,7 @@ function SkeletonRow({ columns, height, showCheckbox }) {
 		}, col.id))]
 	});
 }
-function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel, title }) {
 	const Icon = indeterminate ? MinusSquare : checked ? CheckSquare : Square;
 	return /* @__PURE__ */ jsx("button", {
 		className: cn("flex items-center justify-center w-full h-full", "hover:bg-foreground/[0.04] transition-colors duration-75", checked || indeterminate ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground/40 hover:text-muted-foreground/60"),
@@ -259,6 +275,7 @@ function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
 			onChange(e);
 		},
 		"aria-label": ariaLabel,
+		title: title ?? ariaLabel,
 		role: "checkbox",
 		"aria-checked": indeterminate ? "mixed" : checked,
 		children: /* @__PURE__ */ jsx(Icon, {
@@ -373,396 +390,292 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 	});
 }
 /**
-* Interactive table with sorting, quick search, pagination, selection,
-* and virtualization. Handles 10k+ rows smoothly. Pair with
-* `useDataSource` for client-side data; use an async `dataSource`
-* generator for server or infinite-scroll modes.
+* Interactive table built on TanStack Table v8. Sorting, column sizing,
+* visibility, ordering, and pinning are owned by the table instance; we
+* layer virtualization, sticky toolbar/header/footer, infinite scroll,
+* quick search, CSV export, and date-format toggling on top.
 *
-* ## Mental model (read this first — everything else depends on it)
-*
-* DataGrid is a **display** component. It does NOT sort, search, or
-* paginate your data directly — you own that, but `useDataSource` does
-* it for you. The `rows` prop is always the already-processed slice to
-* show. The grid tracks user intent in `state` (sort model, quick
-* search text, page index). You feed that state into `useDataSource`,
-* and its output goes back in as `rows`.
-*
-* `useDataSource` IS the processor. Given your full dataset and the
-* grid's state, it returns the searched + sorted + paginated rows
-* ready to pass to DataGrid. This is the ONLY correct pattern for
-* client-side data — do NOT pass a raw array to `rows`.
-*
-* ## Search (client vs async)
-*
-* - **Client mode** (`useDataSource` with `data`): a case-insensitive
-*   substring match across every column is applied automatically.
-*   Override the matcher with `matchRow` for fuzzy / weighted search,
-*   or disable by passing `matchRow: () => true`.
-* - **Async mode** (`useDataSource` with `dataSource`): `state.quickSearch`
-*   is forwarded to the generator as `params.quickSearch`. Same
-*   mechanism as `params.sorting` — a change triggers a refetch, and
-*   the generator is the "matching logic" (typically a WHERE / ILIKE
-*   clause in the backend query). The grid does NO client-side
-*   filtering in async mode.
-*
-* ## The canonical pattern
+* The grid is display-only — it does not fetch or page data itself. Pair
+* with `useDataSource` for client- or server-side data and pass the
+* already-processed slice through `rows`.
 *
 * ```tsx
-* // 1. Columns — define OUTSIDE the component or inside a useMemo. Must be stable.
-* const columns = React.useMemo(() => [
-*   { id: "name", header: "Name", accessor: "name", width: 180, type: "string" },
-*   { id: "email", header: "Email", accessor: "email", width: 240, type: "string" },
-*   { id: "role", header: "Role", accessor: "role", width: 120, type: "singleSelect",
-*     valueOptions: [{ value: "admin", label: "Admin" }, { value: "member", label: "Member" }] },
-*   { id: "signUps", header: "Sign-ups", accessor: "signUps", width: 120, type: "number", align: "right",
-*     renderCell: ({ value }) => <span className="tabular-nums">{Number(value).toLocaleString()}</span> },
-* ], []);
-*
-* // 2. Grid state — one hook, initialized from the columns. NEVER build the state object by hand.
-* const [gridState, setGridState] = React.useState(() => createDefaultDataGridState(columns));
-*
-* // 3. Data source — wires your raw array through the grid state. ALWAYS call this
-* //    hook unconditionally at the top level (no if/return before it).
+* const columns = useMemo(() => [...], []);
+* const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
 * const gridData = useDataSource({
-*   data: users,                   // your raw array (can be [] while loading)
-*   columns,
-*   getRowId: (row) => row.id,
+*   data: users, columns, getRowId: (r) => r.id,
 *   sorting: gridState.sorting,
 *   quickSearch: gridState.quickSearch,
 *   pagination: gridState.pagination,
-*   paginationMode: "client",       // "client" | "server" | "infinite"
+*   paginationMode: "client",
 * });
 *
-* // 4. Render — `rows` comes from gridData.rows, NOT from your raw array.
 * <DataGrid
 *   columns={columns}
 *   rows={gridData.rows}
-*   getRowId={(row) => row.id}
+*   getRowId={(r) => r.id}
 *   totalRowCount={gridData.totalRowCount}
 *   isLoading={gridData.isLoading}
 *   state={gridState}
 *   onChange={setGridState}
-*   selectionMode="none"            // "none" | "single" | "multiple"
-*   maxHeight={480}
 * />
 * ```
 *
-* ## Iron rules (violating any of these breaks the grid)
-*
-* 1. The prop is `rows`, NOT `data`. There is no `data` prop on DataGrid.
-*    `data` belongs on `useDataSource`.
-* 2. `rows` is ALWAYS `gridData.rows`. Never pass your raw array to
-*    `rows` — the grid won't search, sort, or paginate it.
-* 3. Columns must be stable across renders. Define them outside the
-*    component or wrap in `React.useMemo`. A fresh columns array every
-*    render will reset sorting state.
-* 4. Initialize grid state with `createDefaultDataGridState(columns)`.
-*    Do NOT spell out the state object manually — you will miss fields
-*    and crash.
-* 5. `onChange` takes a `SetStateAction` (the setter you got from
-*    `useState`). Pass `setGridState` directly. Do NOT wrap it unless
-*    you know exactly what you're doing.
-* 6. Call `useDataSource` ONCE per grid, at the top level, before any
-*    early return. It contains hooks.
-* 7. `renderCell` is a PURE function of its context. NEVER call React
-*    hooks inside it (no `useState`, `useMemo`, `useEffect`, nothing).
-*    If you need derived data per row, compute it BEFORE the render —
-*    e.g. build a `Map<rowId, sparklineData>` in a `useMemo` and look
-*    it up in `renderCell`.
-* 8. `toolbar` accepts `false` (hide it) or a render function
-*    `(ctx) => ReactNode`. Anything else — `true`, `undefined`, a state
-*    variable — will either show the default toolbar or crash. If you
-*    just want the default toolbar, omit the prop entirely.
-* 9. The toolbar's search input writes to `state.quickSearch`. That
-*    value is consumed by `useDataSource` — client mode filters
-*    client-side, async mode forwards to the generator. Do NOT wire
-*    a separate "controlled" search prop, everything flows through
-*    grid state.
-*
-* ## renderCell — what you can and cannot do inside it
-*
-* ```tsx
-* // OK — pure rendering from ctx:
-* renderCell: ({ value }) => <span className="tabular-nums">{Number(value).toLocaleString()}</span>
-* renderCell: ({ row }) => <Badge variant={row.active ? "default" : "outline"}>{row.status}</Badge>
-*
-* // OK — looking up pre-computed data by row id:
-* // BEFORE the return, in the component body:
-* const sparklinesById = React.useMemo(() => {
-*   const m = new Map();
-*   for (const u of users) {
-*     m.set(u.id, u.recentActivity.map((n, i) => ({ ts: i, values: { primary: n } })));
-*   }
-*   return m;
-* }, [users]);
-* // Then inside the column def:
-* renderCell: ({ rowId }) => <MiniSparkline data={sparklinesById.get(rowId) ?? []} />
-*
-* // NOT OK — hooks inside renderCell:
-* renderCell: ({ row }) => {
-*   const [hovered, setHovered] = React.useState(false);  // ← crashes the grid
-*   const data = React.useMemo(() => ..., []);             // ← crashes the grid
-*   return ...;
-* }
-*
-* // NOT OK — embedding AnalyticsChart (or any other controlled, stateful chart) per row:
-* // AnalyticsChart owns its own state, tooltips, zoom, and virtualized data
-* // pipeline. Instantiating one per row is expensive and fights the grid's
-* // virtualizer. Don't do it.
-* ```
-*
-* ## Sparklines and mini-charts in cells — use raw Recharts
-*
-* If you want a tiny chart (sparkline, micro bar chart, trend line) inside
-* a cell, drop down to raw `Recharts.*` components — they are lightweight
-* and stateless, so they render cleanly per row without owning any state.
-* Read pre-computed points off the row (or off a `Map<rowId, points>` you
-* built in a `useMemo` above) and pass them directly to the Recharts
-* primitive. Do NOT wrap them in `DesignChartContainer` or
-* `DesignChartCard` inside a cell — those add chrome meant for full-size
-* charts.
-*
-* ```tsx
-* // OK — raw Recharts sparkline per row:
-* renderCell: ({ rowId }) => {
-*   const points = sparklinesById.get(rowId) ?? [];
-*   return (
-*     <Recharts.ResponsiveContainer width="100%" height={28}>
-*       <Recharts.LineChart data={points} margin={{ top: 2, right: 2, bottom: 2, left: 2 }}>
-*         <Recharts.Line type="monotone" dataKey="v" stroke="currentColor" strokeWidth={1.5} dot={false} isAnimationActive={false} />
-*       </Recharts.LineChart>
-*     </Recharts.ResponsiveContainer>
-*   );
-* }
-* ```
-*
-* Keep in-cell Recharts configs minimal: no axes, no tooltips, no animation
-* (`isAnimationActive={false}`), tight margins, fixed height. The goal is a
-* visual summary, not an interactive chart.
-*
-* ## State shape (from `createDefaultDataGridState`)
-*
-* ```ts
-* {
-*   sorting: [],                                        // { columnId, direction: "asc" | "desc" }[]
-*   quickSearch: "",                                    // search input text
-*   dateDisplay: "relative",                            // "relative" | "absolute"
-*   columnVisibility: {}, columnWidths: {...},
-*   columnPinning: { left: [], right: [] }, columnOrder: [...],
-*   pagination: { pageIndex: 0, pageSize: 50 },
-*   selection: { selectedIds: new Set(), anchorId: null },
-* }
-* ```
-*
-* Everything is updated through `setGridState` — the toolbar, header,
-* and footer all call it for you. You do not need to wire any of this
-* manually.
-*
-* ## Cell overflow and dynamic row heights
-*
-* By default every cell truncates its content with an ellipsis
-* (`cellOverflow: "truncate"`). For columns whose content should wrap
-* — badge lists, multi-line text, permission chips — set
-* `cellOverflow: "wrap"` on the column definition.
-*
-* To let rows grow to fit their tallest cell, set `rowHeight="auto"`
-* on the grid. The virtualizer will measure each row after render and
-* adjust scroll positions accordingly. Pair with `estimatedRowHeight`
-* (default 44) for better scroll-position estimates before measurement.
-*
-* ```tsx
-* // Columns: UUIDs truncate, auth-method badges wrap
-* const columns = [
-*   { id: "userId", header: "User ID", width: 130 },                      // default truncate
-*   { id: "auth", header: "Auth methods", width: 150, cellOverflow: "wrap",
-*     renderCell: ({ row }) => (
-*       <div className="flex flex-wrap gap-1">
-*         {row.authTypes.map((t) => <Badge key={t}>{t}</Badge>)}
-*       </div>
-*     ),
-*   },
-* ];
-*
-* <DataGrid columns={columns} rowHeight="auto" estimatedRowHeight={48} ... />
-* ```
-*
-* With a fixed numeric `rowHeight` (the default), `cellOverflow: "wrap"`
-* still lets content wrap within the row, but anything exceeding the
-* fixed height is clipped. This is useful when you want controlled
-* wrapping without variable row heights.
-*
-* ## Height and scrolling
-*
-* DataGrid is NOT a card. It has no border, rounded corners, or shadow of
-* its own. Wrap it in whatever chrome you want — a `DesignCard`, a section,
-* or just raw layout. The grid itself fills its parent's height via
-* `h-full`.
-*
-* How the grid gets its height (pick ONE):
-* 1. Bounded parent — put the grid inside a flex/grid container with a
-*    definite height (e.g. `flex-1 min-h-0` inside a page-filling flex
-*    column). The grid stretches to that height and scrolls its body.
-* 2. `maxHeight` prop — pass a number (pixels) or CSS string
-*    (`"480px"`, `"60vh"`, `"100%"`). The grid caps at that size and
-*    scrolls its body.
-* 3. Unbounded — omit `maxHeight` and let the parent grow freely. The
-*    grid renders at its full content height and the page scrolls. Fine
-*    for small lists; bad UX for thousands of rows.
-*
-* The toolbar, header, and footer are always `shrink-0`; only the body
-* scrolls. You do NOT need to subtract toolbar/footer heights from
-* `maxHeight` — the grid's internal flex layout handles that.
-*
-* ## When to use what
-*
-* - Simple static list, < 20 rows, no interaction → use a plain table component instead.
-* - Interactive table, sortable + searchable, any size → `DataGrid` +
-*   `useDataSource` with `paginationMode: "client"`.
-* - Infinite scroll over a huge dataset you fetch in pages → `dataSource` async
-*   generator + `paginationMode: "infinite"`. Only reach for this if you actually
-*   need pagination over a remote source. For anything that fits in memory,
-*   `"client"` is simpler and faster.
-*
-* ## Features you get for free
-*
-* Quick search, sortable columns (shift-click for multi-sort), column
-* visibility toggle, column resize, CSV export, virtualized rendering
-* for 10k+ rows, keyboard navigation, and a relative/absolute date
-* toggle for `date` / `dateTime` columns.
+* Iron rules:
+* - `rows` is always `gridData.rows`, never your raw array.
+* - Columns must be stable (define outside the component or wrap in `useMemo`).
+* - Initialize state with `createDefaultDataGridState(columns)`.
+* - `renderCell` must be a pure function — no React hooks inside.
 */
 function DataGrid(props) {
-	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange } = props;
+	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
 	const isDynamicRowHeight = rowHeightProp === "auto";
 	const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
 	const estimatedRowHeight = estimatedRowHeightProp ?? fixedRowHeight ?? 44;
 	const strings = useMemo(() => resolveDataGridStrings(stringsOverride), [stringsOverride]);
-	const visibleColumns = useMemo(() => (state.columnOrder.length > 0 ? state.columnOrder.map((id) => allColumns.find((c) => c.id === id)).filter(Boolean) : allColumns).filter((col) => isColumnVisible(col.id, state.columnVisibility)), [
-		allColumns,
-		state.columnOrder,
-		state.columnVisibility
+	const tableColumns = useMemo(() => allColumns.map((col) => ({
+		id: col.id,
+		accessorFn: (row) => resolveColumnValue(col, row),
+		header: typeof col.header === "string" ? col.header : col.id,
+		size: col.width ?? DEFAULT_COL_WIDTH,
+		minSize: getEffectiveMinWidth(col),
+		maxSize: getEffectiveMaxWidth(col),
+		enableSorting: col.sortable !== false,
+		enableHiding: col.hideable !== false,
+		enableResizing: col.resizable !== false,
+		enableMultiSort: true
+	})), [allColumns]);
+	const tanstackSorting = useMemo(() => toTanstackSorting(state.sorting), [state.sorting]);
+	const tanstackRowSelection = useMemo(() => toTanstackRowSelection(state.selection.selectedIds), [state.selection.selectedIds]);
+	const tanstackColumnPinning = useMemo(() => ({
+		left: [...state.columnPinning.left],
+		right: [...state.columnPinning.right]
+	}), [state.columnPinning]);
+	const tanstackColumnOrder = useMemo(() => [...state.columnOrder], [state.columnOrder]);
+	const allColumnsRef = useRef(allColumns);
+	allColumnsRef.current = allColumns;
+	const handleSortingChange = useCallback((updater) => {
+		const ours = fromTanstackSorting(resolveUpdater(updater, toTanstackSorting(state.sorting))).map((s) => ({ ...s }));
+		onChange((s) => ({
+			...s,
+			sorting: ours,
+			pagination: {
+				...s.pagination,
+				pageIndex: 0
+			}
+		}));
+		onSortChange?.(ours);
+	}, [
+		onChange,
+		onSortChange,
+		state.sorting
 	]);
-	const rowIds = useMemo(() => rows.map(getRowId), [rows, getRowId]);
-	const visibleColumnMetrics = useMemo(() => {
-		const widths = /* @__PURE__ */ new Map();
-		let totalWidth = selectionMode !== "none" ? 44 : 0;
-		for (const col of visibleColumns) {
-			const width = resolveColumnWidth(col, state.columnWidths[col.id]);
-			widths.set(col.id, width);
-			totalWidth += width;
+	const handleColumnSizingChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, state.columnWidths);
+		const clamped = {};
+		for (const [id, w] of Object.entries(next)) {
+			const col = allColumnsRef.current.find((c) => c.id === id);
+			clamped[id] = col ? clampColumnWidth(col, w) : w;
+		}
+		onChange((s) => ({
+			...s,
+			columnWidths: clamped
+		}));
+		if (onColumnResize) {
+			for (const [id, w] of Object.entries(clamped)) if (state.columnWidths[id] !== w) onColumnResize(id, w);
 		}
-		return {
-			widths,
-			totalWidth
-		};
 	}, [
-		selectionMode,
-		state.columnWidths,
-		visibleColumns
+		onChange,
+		onColumnResize,
+		state.columnWidths
 	]);
-	const gridSizingStyle = useMemo(() => createGridSizingStyle(visibleColumnMetrics.widths, visibleColumnMetrics.totalWidth), [visibleColumnMetrics]);
-	const resizeRef = useRef(null);
-	const gridRef = useRef(null);
-	const handleSort = useCallback((columnId, multi) => {
-		const next = toggleSort(state.sorting, columnId, multi);
+	const handleVisibilityChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, state.columnVisibility);
 		onChange((s) => ({
 			...s,
-			sorting: next
+			columnVisibility: next
 		}));
-		onSortChange?.(next);
+		onColumnVisibilityChange?.(next);
 	}, [
 		onChange,
-		onSortChange,
-		state.sorting
+		onColumnVisibilityChange,
+		state.columnVisibility
 	]);
-	const handleResize = useCallback((columnId, delta) => {
-		const col = allColumns.find((c) => c.id === columnId);
-		if (!col) return;
-		if (!resizeRef.current || resizeRef.current.columnId !== columnId) {
-			const baseWidth = visibleColumnMetrics.widths.get(columnId) ?? resolveColumnWidth(col, state.columnWidths[columnId]);
-			resizeRef.current = {
-				columnId,
-				baseWidth,
-				baseTotalWidth: visibleColumnMetrics.totalWidth,
-				latestWidth: baseWidth
-			};
-		}
-		const newWidth = clampColumnWidth(col, resizeRef.current.baseWidth + delta);
-		resizeRef.current.latestWidth = newWidth;
-		if (gridRef.current) applyDraggedColumnWidth(gridRef.current, columnId, newWidth, resizeRef.current.baseTotalWidth + (newWidth - resizeRef.current.baseWidth));
+	const handleColumnOrderChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, [...state.columnOrder]);
+		onChange((s) => ({
+			...s,
+			columnOrder: next
+		}));
+	}, [onChange, state.columnOrder]);
+	const handleColumnPinningChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, {
+			left: [...state.columnPinning.left],
+			right: [...state.columnPinning.right]
+		});
+		onChange((s) => ({
+			...s,
+			columnPinning: {
+				left: next.left ?? [],
+				right: next.right ?? []
+			}
+		}));
+	}, [onChange, state.columnPinning]);
+	const table = useReactTable({
+		data: rows,
+		columns: tableColumns,
+		getRowId: (row) => getRowId(row),
+		getCoreRowModel: getCoreRowModel(),
+		state: {
+			sorting: tanstackSorting,
+			columnVisibility: state.columnVisibility,
+			columnSizing: state.columnWidths,
+			columnOrder: tanstackColumnOrder,
+			columnPinning: tanstackColumnPinning,
+			rowSelection: tanstackRowSelection
+		},
+		onSortingChange: handleSortingChange,
+		onColumnSizingChange: handleColumnSizingChange,
+		onColumnVisibilityChange: handleVisibilityChange,
+		onColumnOrderChange: handleColumnOrderChange,
+		onColumnPinningChange: handleColumnPinningChange,
+		columnResizeMode: "onEnd",
+		enableRowSelection: selectionMode !== "none",
+		enableMultiRowSelection: selectionMode === "multiple",
+		enableColumnResizing: resizable,
+		manualSorting: true,
+		manualPagination: true,
+		manualFiltering: true
+	});
+	const visibleColumns = useMemo(() => {
+		const colMap = new Map(allColumns.map((c) => [c.id, c]));
+		return table.getVisibleLeafColumns().map((c) => colMap.get(c.id)).filter(Boolean);
 	}, [
 		allColumns,
-		state.columnWidths,
-		visibleColumnMetrics
+		table,
+		state.columnOrder,
+		state.columnVisibility
 	]);
+	const rowIds = useMemo(() => rows.map(getRowId), [rows, getRowId]);
+	const [containerWidth, setContainerWidth] = useState(0);
 	useLayoutEffect(() => {
-		const r = resizeRef.current;
-		if (r && gridRef.current) applyDraggedColumnWidth(gridRef.current, r.columnId, r.latestWidth, r.baseTotalWidth + (r.latestWidth - r.baseWidth));
-	}, [gridSizingStyle]);
-	const handleResizeEnd = useCallback(() => {
-		const r = resizeRef.current;
-		resizeRef.current = null;
-		if (!r || r.latestWidth === r.baseWidth) return;
+		const grid = gridRef.current;
+		const scroller = scrollContainerRef.current;
+		if (!grid) return;
+		const update = () => {
+			const w = scroller?.clientWidth ?? grid.clientWidth;
+			if (w > 0) setContainerWidth(w);
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(grid);
+		if (scroller) observer.observe(scroller);
+		return () => observer.disconnect();
+	}, []);
+	const columnSizingInfo = table.getState().columnSizingInfo;
+	const columnSizes = useMemo(() => {
+		const sizes = {};
+		let baseTotal = selectionMode !== "none" ? 44 : 0;
+		const resizingId = columnSizingInfo.isResizingColumn || null;
+		const deltaOffset = columnSizingInfo.deltaOffset ?? 0;
+		for (const col of visibleColumns) {
+			const baseSize = table.getColumn(col.id)?.getSize() ?? col.width ?? DEFAULT_COL_WIDTH;
+			const liveSize = resizingId === col.id ? clampColumnWidth(col, baseSize + deltaOffset) : baseSize;
+			sizes[col.id] = liveSize;
+			baseTotal += liveSize;
+		}
+		distributeFlexWidths(sizes, visibleColumns, containerWidth - baseTotal);
+		return sizes;
+	}, [
+		visibleColumns,
+		table,
+		columnSizingInfo,
+		state.columnWidths,
+		containerWidth,
+		selectionMode
+	]);
+	const totalContentWidth = useMemo(() => {
+		let total = selectionMode !== "none" ? 44 : 0;
+		for (const col of visibleColumns) total += columnSizes[col.id] ?? 0;
+		return total;
+	}, [
+		visibleColumns,
+		columnSizes,
+		selectionMode
+	]);
+	const cssVars = useMemo(() => {
+		const vars = { "--grid-total-w": `${totalContentWidth}px` };
+		for (const col of visibleColumns) vars[`--col-${col.id}-size`] = columnSizes[col.id];
+		return vars;
+	}, [
+		visibleColumns,
+		columnSizes,
+		totalContentWidth
+	]);
+	const fireSelection = useCallback((next) => {
 		onChange((s) => ({
 			...s,
-			columnWidths: {
-				...s.columnWidths,
-				[r.columnId]: r.latestWidth
-			}
+			selection: next
 		}));
-	}, [onChange]);
-	const handleRowClick = useCallback((row, rowId, event) => {
-		if (selectionMode !== "none") {
-			const next = toggleRowSelection(state.selection, rowId, selectionMode, event.shiftKey, event.metaKey || event.ctrlKey, rowIds);
-			onChange((s) => ({
-				...s,
-				selection: next
-			}));
-			if (onSelectionChange) {
-				const selectedRows = rows.filter((r) => next.selectedIds.has(getRowId(r)));
-				onSelectionChange(next.selectedIds, selectedRows);
-			}
+		if (onSelectionChange) {
+			const idSet = next.selectedIds;
+			onSelectionChange(idSet, rows.filter((r) => idSet.has(getRowId(r))));
 		}
-		onRowClick?.(row, rowId, event);
 	}, [
-		selectionMode,
 		onChange,
-		onRowClick,
 		onSelectionChange,
-		rowIds,
 		rows,
-		getRowId,
-		state.selection
+		getRowId
 	]);
-	const handleRowSelectionCheckboxClick = useCallback((row, rowId, event) => {
-		handleRowClick(row, rowId, event);
-	}, [handleRowClick]);
-	const handleSelectAll = useCallback(() => {
-		const allSelectedNow = rowIds.every((id) => state.selection.selectedIds.has(id));
-		const next = allSelectedNow ? clearSelection() : selectAll(rowIds);
-		const selectedRows = allSelectedNow ? [] : rows;
-		onChange((s) => ({
-			...s,
-			selection: next
+	const handleRowClick = useCallback((row, rowId, event) => {
+		if (selectionMode !== "none") fireSelection(nextSelection({
+			current: state.selection,
+			rowId,
+			mode: selectionMode,
+			modifiers: {
+				shift: event.shiftKey,
+				ctrl: event.metaKey || event.ctrlKey
+			},
+			allRowIds: rowIds
 		}));
-		if (onSelectionChange) onSelectionChange(next.selectedIds, [...selectedRows]);
+		onRowClick?.(row, rowId, event);
 	}, [
-		onChange,
+		selectionMode,
+		state.selection,
 		rowIds,
-		rows,
-		onSelectionChange,
-		state.selection
+		fireSelection,
+		onRowClick
+	]);
+	const handleSelectAll = useCallback(() => {
+		fireSelection(rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id)) ? {
+			selectedIds: /* @__PURE__ */ new Set(),
+			anchorId: null
+		} : {
+			selectedIds: new Set(rowIds),
+			anchorId: null
+		});
+	}, [
+		rowIds,
+		state.selection.selectedIds,
+		fireSelection
 	]);
 	const handleExportCsv = useCallback(() => {
+		if (typeof window !== "undefined" && rows.length > 0) {
+			const totalSuffix = totalRowCount != null && totalRowCount > rows.length ? ` of ${totalRowCount} total — load more rows first to include them` : "";
+			if (!window.confirm(`Export ${rows.length.toLocaleString()} loaded row${rows.length === 1 ? "" : "s"}${totalSuffix}?`)) return;
+		}
 		exportToCsv(rows, visibleColumns, exportFilename);
 	}, [
 		rows,
 		visibleColumns,
-		exportFilename
+		exportFilename,
+		totalRowCount
 	]);
 	const scrollContainerRef = useRef(null);
 	const headerScrollRef = useRef(null);
 	const stickyChromeRef = useRef(null);
 	const rowsClipRef = useRef(null);
+	const gridRef = useRef(null);
 	const measureElementFn = useCallback((el) => el.getBoundingClientRect().height, []);
 	const rowVirtualizer = useVirtualizer({
 		count: rows.length,
@@ -775,104 +688,33 @@ function DataGrid(props) {
 		},
 		...isDynamicRowHeight ? { measureElement: measureElementFn } : {}
 	});
-	useLayoutEffect(() => {
-		const grid = gridRef.current;
-		const stickyEl = stickyChromeRef.current;
-		if (!grid || !stickyEl) return;
-		const parseRgba = (raw) => {
-			const rgbaMatch = raw.match(/rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)/);
-			if (!rgbaMatch) return null;
-			const alphaRaw = rgbaMatch[4];
-			return [
-				Number(rgbaMatch[1]),
-				Number(rgbaMatch[2]),
-				Number(rgbaMatch[3]),
-				alphaRaw === void 0 ? 1 : Number(alphaRaw)
-			];
-		};
-		const blendOver = (base, top) => {
-			const [tr, tg, tb, ta] = top;
-			const [br, bg, bb, ba] = base;
-			const outA = ta + ba * (1 - ta);
-			if (outA === 0) return [
-				0,
-				0,
-				0,
-				0
-			];
-			return [
-				(tr * ta + br * ba * (1 - ta)) / outA,
-				(tg * ta + bg * ba * (1 - ta)) / outA,
-				(tb * ta + bb * ba * (1 - ta)) / outA,
-				outA
-			];
-		};
-		const detect = () => {
-			const layers = [];
-			let ancestor = grid.parentElement;
-			while (ancestor) {
-				const parsed = parseRgba(getComputedStyle(ancestor).backgroundColor);
-				if (parsed && parsed[3] > 0) {
-					layers.push(parsed);
-					if (parsed[3] >= 1) break;
-				}
-				ancestor = ancestor.parentElement;
-			}
-			if (layers.length === 0) {
-				stickyEl.style.backgroundColor = "";
-				return;
-			}
-			let result = layers[layers.length - 1];
-			for (let i = layers.length - 2; i >= 0; i--) result = blendOver(result, layers[i]);
-			const [r, g, b] = result;
-			stickyEl.style.backgroundColor = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
-		};
-		detect();
-		const observer = new MutationObserver(detect);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"]
-		});
-		return () => observer.disconnect();
-	}, []);
 	useLayoutEffect(() => {
 		const gridEl = gridRef.current;
 		const stickyEl = stickyChromeRef.current;
 		const bodyEl = scrollContainerRef.current;
 		const clipEl = rowsClipRef.current;
 		if (!gridEl || !stickyEl || !bodyEl || !clipEl) return;
-		const verticalScrollEl = fillHeight ? bodyEl : getNearestVerticalScrollElement(gridEl);
-		let extraObservedScrollEl = null;
-		if (verticalScrollEl instanceof HTMLElement && verticalScrollEl !== bodyEl) extraObservedScrollEl = verticalScrollEl;
 		const updateClip = () => {
 			const stickyRect = stickyEl.getBoundingClientRect();
 			const clipRect = clipEl.getBoundingClientRect();
 			const overlap = Math.max(0, stickyRect.bottom - clipRect.top);
-			const clipValue = overlap > 0 ? `inset(${overlap}px 0 0 0)` : "";
-			const maskValue = overlap > 0 ? `linear-gradient(to bottom, transparent 0px, transparent ${overlap}px, black ${overlap}px, black 100%)` : "";
-			clipEl.style.clipPath = clipValue;
-			clipEl.style.setProperty("-webkit-clip-path", clipValue);
-			clipEl.style.maskImage = maskValue;
-			clipEl.style.setProperty("-webkit-mask-image", maskValue);
+			clipEl.style.setProperty("--data-grid-sticky-overlap", `${overlap}px`);
 		};
 		updateClip();
 		bodyEl.addEventListener("scroll", updateClip);
-		if (verticalScrollEl === window) window.addEventListener("scroll", updateClip, true);
-		else if (extraObservedScrollEl) extraObservedScrollEl.addEventListener("scroll", updateClip);
+		window.addEventListener("scroll", updateClip, true);
 		window.addEventListener("resize", updateClip);
-		const ro = new ResizeObserver(updateClip);
-		ro.observe(gridEl);
-		ro.observe(stickyEl);
-		ro.observe(bodyEl);
-		if (extraObservedScrollEl) ro.observe(extraObservedScrollEl);
+		const observer = new ResizeObserver(updateClip);
+		observer.observe(gridEl);
+		observer.observe(stickyEl);
+		observer.observe(bodyEl);
 		return () => {
 			bodyEl.removeEventListener("scroll", updateClip);
-			if (verticalScrollEl === window) window.removeEventListener("scroll", updateClip, true);
-			else if (extraObservedScrollEl) extraObservedScrollEl.removeEventListener("scroll", updateClip);
+			window.removeEventListener("scroll", updateClip, true);
 			window.removeEventListener("resize", updateClip);
-			ro.disconnect();
+			observer.disconnect();
 		};
-	}, [fillHeight]);
+	}, []);
 	const handleBodyScroll = useCallback(() => {
 		const body = scrollContainerRef.current;
 		const header = headerScrollRef.current;
@@ -913,21 +755,28 @@ function DataGrid(props) {
 	const allSelected = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
 	const someSelected = !allSelected && rowIds.some((id) => state.selection.selectedIds.has(id));
 	const infiniteScrollRootRef = paginationMode === "infinite" && (fillHeight || maxHeight != null) ? scrollContainerRef : void 0;
+	const headers = useMemo(() => table.getHeaderGroups()[0]?.headers.filter((h) => visibleColumns.some((c) => c.id === h.column.id)) ?? [], [table, visibleColumns]);
+	const headerByColId = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const h of headers) m.set(h.column.id, h);
+		return m;
+	}, [headers]);
+	const isBounded = fillHeight || maxHeight != null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: gridRef,
-		className: cn("flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]", fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto", className),
+		className: cn("isolate flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]", fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto", isBounded && "overflow-hidden", className),
 		style: maxHeight != null ? {
-			...gridSizingStyle,
+			...cssVars,
 			maxHeight
-		} : gridSizingStyle,
+		} : cssVars,
 		role: "grid",
 		"aria-rowcount": totalRowCount ?? rows.length,
 		"aria-colcount": visibleColumns.length,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				ref: stickyChromeRef,
-				className: "sticky z-20 w-full min-w-0 shrink-0 rounded-t-[calc(var(--radius)*2)] bg-background",
-				style: { top: stickyTop ?? "var(--data-grid-sticky-top, 0px)" },
+				className: "sticky z-30 w-full min-w-0 shrink-0 overflow-visible rounded-t-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
+				style: { top: stickyTop ?? (maxHeight != null ? 0 : "var(--data-grid-sticky-top, 0px)") },
 				children: [toolbar !== false && /* @__PURE__ */ jsx("div", {
 					className: "relative bg-transparent",
 					children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DataGridToolbar, {
@@ -946,7 +795,7 @@ function DataGrid(props) {
 							className: "flex",
 							style: {
 								height: headerHeight,
-								minWidth: visibleColumnMetrics.totalWidth
+								minWidth: totalContentWidth
 							},
 							role: "row",
 							children: [selectionMode !== "none" && /* @__PURE__ */ jsx("div", {
@@ -956,30 +805,37 @@ function DataGrid(props) {
 									checked: allSelected,
 									indeterminate: someSelected,
 									onChange: handleSelectAll,
-									ariaLabel: "Select all rows"
+									ariaLabel: "Select all rows on this page",
+									title: "Select all rows on this page"
 								})
-							}), visibleColumns.map((col) => /* @__PURE__ */ jsx(HeaderCell, {
-								col,
-								isSorted: getSortDirection(state.sorting, col.id),
-								sortIndex: getSortIndex(state.sorting, col.id),
-								resizable,
-								onSort: handleSort,
-								onResize: handleResize,
-								onResizeEnd: handleResizeEnd
-							}, col.id))]
+							}), visibleColumns.map((col) => {
+								const header = headerByColId.get(col.id);
+								if (!header) return null;
+								return /* @__PURE__ */ jsx(HeaderCell, {
+									header,
+									col,
+									resizable
+								}, col.id);
+							})]
 						})
 					})]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: scrollContainerRef,
-				className: cn("w-full min-w-0 overflow-auto bg-transparent", fillHeight ? "min-h-0 flex-1" : "flex-none", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"),
+				className: cn("relative z-0 w-full min-w-0 overflow-auto bg-transparent", isBounded ? "min-h-0 flex-1" : "flex-none", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"),
 				onScroll: handleBodyScroll,
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: rowsClipRef,
+					"data-data-grid-rows-clip": "",
+					className: "relative z-0",
+					style: {
+						minWidth: totalContentWidth,
+						clipPath: "inset(var(--data-grid-sticky-overlap, 0px) 0 0 0)"
+					},
 					children: [
 						isLoading && /* @__PURE__ */ jsx("div", {
-							style: { minWidth: visibleColumnMetrics.totalWidth },
+							style: { minWidth: totalContentWidth },
 							children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {
 								columns: visibleColumns,
 								height: estimatedRowHeight,
@@ -988,14 +844,14 @@ function DataGrid(props) {
 						}),
 						!isLoading && rows.length === 0 && /* @__PURE__ */ jsx("div", {
 							className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
-							style: { minWidth: visibleColumnMetrics.totalWidth },
+							style: { minWidth: totalContentWidth },
 							children: emptyState ?? strings.noData
 						}),
 						!isLoading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
 							style: {
 								height: rowVirtualizer.getTotalSize(),
 								width: "100%",
-								minWidth: visibleColumnMetrics.totalWidth,
+								minWidth: totalContentWidth,
 								position: "relative"
 							},
 							children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
@@ -1012,12 +868,10 @@ function DataGrid(props) {
 										transform: `translateY(${virtualRow.start}px)`
 									},
 									onClick: (e) => {
-										if (shouldIgnoreRowClick(e)) return;
-										handleRowClick(row, rowId, e);
+										if (!shouldIgnoreRowClick(e)) handleRowClick(row, rowId, e);
 									},
 									onDoubleClick: (e) => {
-										if (shouldIgnoreRowClick(e)) return;
-										onRowDoubleClick?.(row, rowId, e);
+										if (!shouldIgnoreRowClick(e)) onRowDoubleClick?.(row, rowId, e);
 									},
 									role: "row",
 									"aria-rowindex": virtualRow.index + 2,
@@ -1029,7 +883,7 @@ function DataGrid(props) {
 										style: { width: 44 },
 										children: /* @__PURE__ */ jsx(SelectionCheckbox, {
 											checked: isSelected,
-											onChange: (event) => handleRowSelectionCheckboxClick(row, rowId, event),
+											onChange: (event) => handleRowClick(row, rowId, event),
 											ariaLabel: `Select row ${rowId}`
 										})
 									}), visibleColumns.map((col) => /* @__PURE__ */ jsx(DataCell, {
@@ -1053,7 +907,7 @@ function DataGrid(props) {
 				})
 			}),
 			footer !== false && /* @__PURE__ */ jsxs("div", {
-				className: "relative z-10 shrink-0 bg-transparent",
+				className: "sticky bottom-0 z-30 shrink-0 overflow-hidden rounded-b-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
 				children: [footer ? footer(footerCtx) : /* @__PURE__ */ jsx(DefaultFooter, {
 					ctx: footerCtx,
 					pagination: paginationMode,