@alexgorbatchev/shadcn 0.0.30 → 0.0.31

package/dist/components/assistant-ui/index.js

@@ -423,13 +423,14 @@ import {
 import {
   OpenAILogo2
 } from "../../chunk-pa07b92f.js";
-import"../../chunk-eehfrrdz.js";
+import"../../chunk-1xncv9gb.js";
+import"../../chunk-tnnf8ydf.js";
 import {
   OptionText2
 } from "../../chunk-71efbr5n.js";
 import {
   OptionList2
-} from "../../chunk-g238nezp.js";
+} from "../../chunk-pg9rhbgm.js";
 import {
   PermissionGrant2
 } from "../../chunk-726x26pk.js";
@@ -438,7 +439,7 @@ import {
 } from "../../chunk-dvmxyk3q.js";
 import {
   QuestionFlow2
-} from "../../chunk-5da3rzn5.js";
+} from "../../chunk-s0typ7hv.js";
 import {
   QuotaBanner2
 } from "../../chunk-bsff5mmk.js";

package/dist/components/data-grid/DataGrid.d.ts

@@ -1,15 +1,31 @@
-import { type ReactTable, type RowData, type Column, type CellData } from "@tanstack/react-table";
-import type { ReactElement, ReactNode } from "react";
+import { type CellData, type Column, type ReactTable, type Row, type RowData, type Table as CoreTable, type TableState } from "@tanstack/react-table";
+import { type ReactElement, type ReactNode } from "react";
 import type { IDensityProps } from "../../density/types.js";
+import { type TableTextAlign, type TableVisibility } from "../Table.js";
+/** Presentation settings a column definition carries in its `meta`. */
+interface IDataGridColumnMeta {
+    /** Name in the column picker and resize handle; defaults to a string header, then the column ID. */
+    label?: string;
+    textAlign?: TableTextAlign;
+    truncate?: boolean;
+    /** Hides the column below this viewport or container width, together with its header and cells. */
+    visibleFrom?: TableVisibility;
+    /** Takes the width the sized columns leave, so it has no fixed size of its own. */
+    fill?: boolean;
+}
 declare const dataGridFeatures: {
     columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
     columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/react-table").TableFeature;
     rowPaginationFeature: import("@tanstack/react-table").TableFeature;
     rowSelectionFeature: import("@tanstack/react-table").TableFeature;
     rowSortingFeature: import("@tanstack/react-table").TableFeature;
-    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
-    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
-    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filteredRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     filterFns: {
         includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
     };
@@ -17,8 +33,31 @@ declare const dataGridFeatures: {
         alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
         basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
     };
+    columnMeta: IDataGridColumnMeta;
 };
-type DataGridTable<T extends RowData> = ReactTable<typeof dataGridFeatures, T>;
+type DataGridFeatures = typeof dataGridFeatures;
+/** A table built with `dataGridFeatures`; `TSelected` is the state its `useTable` selector returns. */
+type DataGridTable<T extends RowData, TSelected = TableState<DataGridFeatures>> = ReactTable<DataGridFeatures, T, TSelected>;
+type DataGridRow<T extends RowData> = Row<DataGridFeatures, T>;
+type DataGridColumn<T extends RowData> = Column<DataGridFeatures, T, CellData>;
+declare function getDataGridColumnLabel<T extends RowData>(column: DataGridColumn<T>): string;
+interface IDataGridHeaderRowsProps<T extends RowData> {
+    table: CoreTable<DataGridFeatures, T>;
+    /** Adds a resize handle to each resizable column; only fixed-layout grids honor column sizes. */
+    isResizable?: boolean;
+}
+/** Header rows with sort state, column layout, and optional resize handles. */
+declare function DataGridHeaderRows<T extends RowData>({ table, isResizable, }: IDataGridHeaderRowsProps<T>): ReactElement;
+interface IDataGridCellsProps<T extends RowData> {
+    row: DataGridRow<T>;
+}
+/** A row's visible cells, laid out by their column `meta`; render them inside a custom `TableRow`. */
+declare function DataGridCells<T extends RowData>({ row }: IDataGridCellsProps<T>): ReactElement;
+interface IDataGridColumnsProps<T extends RowData> {
+    table: CoreTable<DataGridFeatures, T>;
+}
+/** Column widths for a fixed-layout grid; sizes resolve through the variables `useDataGridColumnSizes` writes. */
+declare function DataGridColumns<T extends RowData>({ table }: IDataGridColumnsProps<T>): ReactElement;
 type DataGridProps<T extends RowData> = IDensityProps & {
     table: DataGridTable<T>;
     label: string;
@@ -29,7 +68,7 @@ type DataGridProps<T extends RowData> = IDensityProps & {
 };
 declare function DataGrid<T extends RowData>({ table, label, toolbar, empty, loading, pagination, density, }: DataGridProps<T>): ReactElement;
 declare function DataGridColumnHeader<T extends RowData, V extends CellData>({ column, children, }: {
-    column: Column<typeof dataGridFeatures, T, V>;
+    column: Column<DataGridFeatures, T, V>;
     children: ReactNode;
 }): ReactElement;
 declare function DataGridFilter<T extends RowData>({ table, columnId, label, }: {
@@ -40,5 +79,5 @@ declare function DataGridFilter<T extends RowData>({ table, columnId, label, }:
 declare function DataGridPagination<T extends RowData>({ table }: {
     table: DataGridTable<T>;
 }): ReactElement;
-export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures };
-export type { DataGridProps, DataGridTable };
+export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridColumns, DataGridFilter, DataGridHeaderRows, DataGridPagination, dataGridFeatures, getDataGridColumnLabel, };
+export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta };

package/dist/components/data-grid/DataGridColumnOptions.d.ts

@@ -0,0 +1,14 @@
+import { type RowData, type Table } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import { type DataGridFeatures } from "./DataGrid.js";
+interface IDataGridColumnOptionsProps<T extends RowData> {
+    table: Table<DataGridFeatures, T>;
+    /** Trigger and popover title. */
+    label?: string;
+}
+/**
+ * Shows, hides, and reorders the columns that allow hiding. Columns with `enableHiding: false` keep their positions.
+ * Reset restores the table's initial visibility, order, and sizes.
+ */
+export declare function DataGridColumnOptions<T extends RowData>({ table, label, }: IDataGridColumnOptionsProps<T>): ReactElement;
+export {};

package/dist/components/data-grid/DataGridColumnResizer.d.ts

@@ -0,0 +1,13 @@
+import { type CellData, type Header, type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { DataGridFeatures } from "./DataGrid.js";
+interface IDataGridColumnResizerProps<T extends RowData> {
+    header: Header<DataGridFeatures, T, CellData>;
+    label: string;
+}
+/**
+ * A window-splitter handle at a header's trailing edge: drag it, use the arrow keys, Home, or End, or double-click it
+ * to restore the default width.
+ */
+export declare function DataGridColumnResizer<T extends RowData>({ header, label, }: IDataGridColumnResizerProps<T>): ReactElement;
+export {};

package/dist/components/data-grid/getDataGridColumnSizeVariables.d.ts

@@ -0,0 +1,6 @@
+import type { RowData, Table, TableFeatures } from "@tanstack/react-table";
+/**
+ * Maps each leaf column ID to the CSS variable holding its width. Variables follow definition order, so reordering or
+ * hiding columns never moves a width to another column.
+ */
+export declare function getDataGridColumnSizeVariables<TFeatures extends TableFeatures, T extends RowData>(table: Table<TFeatures, T>): Map<string, string>;

package/dist/components/data-grid/hooks/useDataGridColumnSizes.d.ts

@@ -0,0 +1,8 @@
+import type { RowData, Table } from "@tanstack/react-table";
+import { type RefObject } from "react";
+import type { DataGridFeatures } from "../DataGrid.js";
+/**
+ * Writes every column's size to its CSS variable on `scope` whenever column sizing changes, so resizing updates widths
+ * without rendering the grid again.
+ */
+export declare function useDataGridColumnSizes<T extends RowData>(table: Table<DataGridFeatures, T>, scope: RefObject<HTMLElement | null>): void;

package/dist/components/data-grid/index.d.ts

@@ -1,2 +1,3 @@
-export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures } from "./DataGrid.js";
-export type { DataGridProps, DataGridTable } from "./DataGrid.js";
+export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
+export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, } from "./DataGrid.js";
+export { DataGridColumnOptions } from "./DataGridColumnOptions.js";

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

@@ -2,217 +2,140 @@ import"../../chunk-cp2m7y7v.js";
 import {
   Button2
 } from "../../chunk-q7p28b89.js";
+import"../../chunk-zte6pw69.js";
+import"../../chunk-r9qrb6b6.js";
+import"../../chunk-59p19t57.js";
 import {
-  Table2,
-  TableHeader2,
-  TableBody2,
-  TableRow2,
-  TableHead2,
-  TableCell2
-} from "../../chunk-zte6pw69.js";
+  dataGridFeatures2,
+  getDataGridColumnLabel,
+  DataGridCells2,
+  DataGrid2,
+  DataGridColumnHeader2,
+  DataGridFilter2,
+  DataGridPagination2
+} from "../../chunk-yfr9syen.js";
 import {
-  NativeSelect2,
-  NativeSelectOption2
-} from "../../chunk-r9qrb6b6.js";
+  Checkbox2
+} from "../../chunk-tnnf8ydf.js";
 import {
-  Input2
-} from "../../chunk-59p19t57.js";
-
-// src/components/data-grid/DataGrid.tsx
+  Label2
+} from "../../chunk-jcxxjkqx.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-j89xg1ak.js";
+import"../../chunk-aa7m22zj.js";
 import {
-  columnFilteringFeature,
-  columnVisibilityFeature,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  filterFn_includesString,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  sortFn_alphanumeric,
-  sortFn_basic,
-  tableFeatures
-} from "@tanstack/react-table";
-import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var dataGridFeatures = tableFeatures({
-  columnFilteringFeature,
-  columnVisibilityFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  filteredRowModel: createFilteredRowModel(),
-  sortedRowModel: createSortedRowModel(),
-  paginatedRowModel: createPaginatedRowModel(),
-  filterFns: { includesString: filterFn_includesString },
-  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic }
-});
-function DataGrid({
-  table,
-  label,
-  toolbar,
-  empty = "No results.",
-  loading = false,
-  pagination = true,
-  density
-}) {
-  const rows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs("div", {
-    "data-density": density,
-    "data-scroll": "none",
-    className: "grid min-w-0 gap-3",
-    "aria-busy": loading,
-    children: [
-      toolbar,
-      /* @__PURE__ */ jsx("div", {
-        className: "min-w-0 rounded-sm border border-border",
-        children: /* @__PURE__ */ jsxs(Table2, {
-          "aria-label": label,
-          children: [
-            /* @__PURE__ */ jsx(TableHeader2, {
-              children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow2, {
-                children: group.headers.map((header) => /* @__PURE__ */ jsx(TableHead2, {
-                  colSpan: header.colSpan,
-                  "aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : undefined,
-                  children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, {
-                    header
-                  })
-                }, header.id))
-              }, group.id))
-            }),
-            /* @__PURE__ */ jsx(TableBody2, {
-              children: loading ? /* @__PURE__ */ jsx(TableRow2, {
-                children: /* @__PURE__ */ jsx(TableCell2, {
-                  colSpan: table.getVisibleLeafColumns().length,
-                  children: /* @__PURE__ */ jsxs("p", {
-                    role: "status",
-                    children: [
-                      "Loading ",
-                      label,
-                      "…"
-                    ]
-                  })
-                })
-              }) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx(TableRow2, {
-                "data-state": row.getIsSelected() ? "selected" : undefined,
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell2, {
-                  children: /* @__PURE__ */ jsx(table.FlexRender, {
-                    cell
-                  })
-                }, cell.id))
-              }, row.id)) : /* @__PURE__ */ jsx(TableRow2, {
-                children: /* @__PURE__ */ jsx(TableCell2, {
-                  colSpan: table.getVisibleLeafColumns().length,
-                  children: /* @__PURE__ */ jsx("p", {
-                    role: "status",
-                    children: empty
-                  })
-                })
-              })
-            })
-          ]
-        })
-      }),
-      pagination && /* @__PURE__ */ jsx(DataGridPagination, {
-        table
-      })
-    ]
-  });
-}
-function DataGridColumnHeader({
-  column,
-  children
-}) {
-  const sorted = column.getIsSorted();
-  return column.getCanSort() ? /* @__PURE__ */ jsxs(Button2, {
-    type: "button",
-    variant: "ghost",
-    size: "sm",
-    onClick: column.getToggleSortingHandler(),
-    children: [
-      children,
-      sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {
-        "aria-hidden": "true"
-      }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {
-        "aria-hidden": "true"
-      }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
-        "aria-hidden": "true"
-      })
-    ]
-  }) : /* @__PURE__ */ jsx("span", {
-    children
-  });
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2,
+  PopoverHeader2,
+  PopoverTitle2
+} from "../../chunk-4djw71cv.js";
+// src/components/data-grid/DataGridColumnOptions.tsx
+import { Subscribe } from "@tanstack/react-table";
+import { ArrowDownIcon, ArrowUpIcon, Columns3Icon } from "lucide-react";
+
+// src/components/data-grid/moveDataGridColumn.ts
+function moveDataGridColumn(order, movableIds, columnId, offset) {
+  const index = movableIds.indexOf(columnId);
+  const neighbour = index < 0 ? undefined : movableIds[index + offset];
+  if (neighbour === undefined)
+    return [...order];
+  return order.map((id) => id === columnId ? neighbour : id === neighbour ? columnId : id);
 }
-function DataGridFilter({
+
+// src/components/data-grid/DataGridColumnOptions.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataGridColumnOptions({
   table,
-  columnId,
-  label
+  label = "Columns"
 }) {
-  const column = table.getColumn(columnId);
-  if (!column)
-    throw new Error(`Unknown filter column: ${columnId}`);
-  const value = column.getFilterValue();
-  return /* @__PURE__ */ jsx(Input2, {
-    "aria-label": label,
-    placeholder: label,
-    value: typeof value === "string" ? value : "",
-    onChange: (event) => column.setFilterValue(event.target.value)
-  });
-}
-function DataGridPagination({ table }) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-wrap items-center justify-between gap-3 text-sm",
+  return /* @__PURE__ */ jsxs(Popover2, {
     children: [
-      /* @__PURE__ */ jsxs("span", {
-        role: "status",
+      /* @__PURE__ */ jsxs(PopoverTrigger2, {
+        render: /* @__PURE__ */ jsx(Button2, {
+          variant: "outline"
+        }),
         children: [
-          table.getSelectedRowModel().rows.length,
-          " selected · Page ",
-          table.state.pagination.pageIndex + 1,
-          " of",
-          " ",
-          Math.max(1, table.getPageCount())
+          /* @__PURE__ */ jsx(Columns3Icon, {
+            "data-icon": "inline-start",
+            "aria-hidden": "true"
+          }),
+          label
         ]
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-2",
+      /* @__PURE__ */ jsxs(PopoverContent2, {
+        align: "end",
         children: [
-          /* @__PURE__ */ jsxs(NativeSelect2, {
-            "aria-label": "Rows per page",
-            value: table.state.pagination.pageSize,
-            onChange: (event) => table.setPageSize(Number(event.target.value)),
-            children: [
-              [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsxs(NativeSelectOption2, {
-                value: size,
-                children: [
-                  size,
-                  " rows"
-                ]
-              }, size)),
-              ![10, 20, 50, 100].includes(table.state.pagination.pageSize) && /* @__PURE__ */ jsxs(NativeSelectOption2, {
-                value: table.state.pagination.pageSize,
-                children: [
-                  table.state.pagination.pageSize,
-                  " rows"
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx(PopoverHeader2, {
+            children: /* @__PURE__ */ jsx(PopoverTitle2, {
+              children: label
+            })
           }),
-          /* @__PURE__ */ jsx(Button2, {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            disabled: !table.getCanPreviousPage(),
-            onClick: () => table.previousPage(),
-            children: "Previous"
+          /* @__PURE__ */ jsx(Subscribe, {
+            source: table.atoms.columnOrder,
+            children: () => /* @__PURE__ */ jsx(Subscribe, {
+              source: table.atoms.columnVisibility,
+              children: () => {
+                const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+                const movableIds = columns.map((column) => column.id);
+                const move = (columnId, offset) => table.setColumnOrder(moveDataGridColumn(table.getAllLeafColumns().map((column) => column.id), movableIds, columnId, offset));
+                return /* @__PURE__ */ jsx("ul", {
+                  "aria-label": label,
+                  className: "grid gap-1",
+                  children: columns.map((column, index) => {
+                    const name = getDataGridColumnLabel(column);
+                    return /* @__PURE__ */ jsxs("li", {
+                      className: "flex items-center gap-1",
+                      children: [
+                        /* @__PURE__ */ jsxs(Label2, {
+                          className: "min-w-0 flex-1 py-1",
+                          children: [
+                            /* @__PURE__ */ jsx(Checkbox2, {
+                              checked: column.getIsVisible(),
+                              onCheckedChange: (checked) => column.toggleVisibility(checked)
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                              className: "truncate",
+                              children: name
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsx(Button2, {
+                          variant: "ghost",
+                          size: "icon-sm",
+                          "aria-label": `Move ${name} earlier`,
+                          disabled: index === 0,
+                          onClick: () => move(column.id, -1),
+                          children: /* @__PURE__ */ jsx(ArrowUpIcon, {
+                            "aria-hidden": "true"
+                          })
+                        }),
+                        /* @__PURE__ */ jsx(Button2, {
+                          variant: "ghost",
+                          size: "icon-sm",
+                          "aria-label": `Move ${name} later`,
+                          disabled: index === columns.length - 1,
+                          onClick: () => move(column.id, 1),
+                          children: /* @__PURE__ */ jsx(ArrowDownIcon, {
+                            "aria-hidden": "true"
+                          })
+                        })
+                      ]
+                    }, column.id);
+                  })
+                });
+              }
+            })
           }),
           /* @__PURE__ */ jsx(Button2, {
-            type: "button",
             variant: "outline",
             size: "sm",
-            disabled: !table.getCanNextPage(),
-            onClick: () => table.nextPage(),
-            children: "Next"
+            onClick: () => {
+              table.resetColumnVisibility();
+              table.resetColumnOrder();
+              table.resetColumnSizing();
+            },
+            children: "Reset columns"
           })
         ]
       })
@@ -220,9 +143,11 @@ function DataGridPagination({ table }) {
   });
 }
 export {
-  DataGrid,
-  DataGridColumnHeader,
-  DataGridFilter,
-  DataGridPagination,
-  dataGridFeatures
+  DataGrid2 as DataGrid,
+  DataGridCells2 as DataGridCells,
+  DataGridColumnHeader2 as DataGridColumnHeader,
+  DataGridColumnOptions,
+  DataGridFilter2 as DataGridFilter,
+  DataGridPagination2 as DataGridPagination,
+  dataGridFeatures2 as dataGridFeatures
 };

package/dist/components/data-grid/moveDataGridColumn.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Swaps `columnId` with its neighbour among `movableIds` in `order`, leaving every other column where it is.
+ * Returns `order` unchanged when the column is already at that end or is not movable.
+ */
+export declare function moveDataGridColumn(order: readonly string[], movableIds: readonly string[], columnId: string, offset: -1 | 1): string[];

package/dist/components/event-calendar/index.js

@@ -15,9 +15,11 @@ import {
   Input2
 } from "../../chunk-59p19t57.js";
 import {
-  Checkbox2,
+  Checkbox2
+} from "../../chunk-tnnf8ydf.js";
+import {
   Spinner2
-} from "../../chunk-eehfrrdz.js";
+} from "../../chunk-1xncv9gb.js";
 var __create = Object.create;
 var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;

package/dist/components/virtual-data-grid/VirtualDataGrid.d.ts

@@ -0,0 +1,26 @@
+import type { RowData } from "@tanstack/react-table";
+import { type ReactElement, type ReactNode } from "react";
+import { type DataGridRow, type DataGridTable } from "../data-grid/DataGrid.js";
+import { type IVirtualTableRowProps } from "../virtual-table/VirtualTable.js";
+interface IVirtualDataGridProps<T extends RowData, TSelected> {
+    table: DataGridTable<T, TSelected>;
+    label: string;
+    maxHeight?: number | string;
+    estimateRowHeight?: number;
+    overscan?: number;
+    /** Row IDs that stay rendered while scrolled out of view, such as rows with an open editor. */
+    retainedRowIds?: readonly string[];
+    /**
+     * Renders one row. Spread `props` onto the row element and render `DataGridCells` inside it; the default renders a
+     * plain `TableRow` marked selected while the row is selected.
+     */
+    renderRow?: (row: DataGridRow<T>, props: IVirtualTableRowProps) => ReactNode;
+}
+/**
+ * A virtualized, fixed-layout data grid over every filtered and sorted row, without pagination. Columns marked
+ * `fill` take the remaining width; the others keep their sizes and can be resized by dragging or from the keyboard.
+ * Column widths change through CSS variables, so a `useTable` selector can leave out sizing state and resizing never
+ * renders rows again.
+ */
+export declare function VirtualDataGrid<T extends RowData, TSelected>({ table, label, maxHeight, estimateRowHeight, overscan, retainedRowIds, renderRow, }: IVirtualDataGridProps<T, TSelected>): ReactElement;
+export {};

package/dist/components/virtual-data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualDataGrid } from "./VirtualDataGrid.js";
+export type { IVirtualTableRowProps } from "../virtual-table/VirtualTable.js";

package/dist/components/virtual-data-grid/index.js

@@ -0,0 +1,88 @@
+import"../../chunk-cp2m7y7v.js";
+import {
+  TableRow2
+} from "../../chunk-zte6pw69.js";
+import"../../chunk-q7p28b89.js";
+import"../../chunk-r9qrb6b6.js";
+import"../../chunk-59p19t57.js";
+import {
+  getDataGridColumnSizeVariables,
+  DataGridHeaderRows,
+  DataGridCells2,
+  DataGridColumns
+} from "../../chunk-yfr9syen.js";
+import {
+  VirtualTable2
+} from "../../chunk-2dxa9enk.js";
+
+// src/components/virtual-data-grid/VirtualDataGrid.tsx
+import { useRef } from "react";
+
+// src/components/data-grid/hooks/useDataGridColumnSizes.ts
+import { useLayoutEffect } from "react";
+function useDataGridColumnSizes(table, scope) {
+  useLayoutEffect(() => {
+    const write = () => {
+      const element = scope.current;
+      if (!element)
+        return;
+      for (const [id, variable] of getDataGridColumnSizeVariables(table)) {
+        const column = table.getColumn(id);
+        if (column)
+          element.style.setProperty(variable, `${column.getSize()}px`);
+      }
+    };
+    write();
+    const subscription = table.atoms.columnSizing.subscribe(write);
+    return () => subscription.unsubscribe();
+  });
+}
+
+// src/components/virtual-data-grid/VirtualDataGrid.tsx
+import { jsx } from "react/jsx-runtime";
+function renderDefaultRow(row, props) {
+  return /* @__PURE__ */ jsx(TableRow2, {
+    ...props,
+    "data-state": row.getIsSelected() ? "selected" : undefined,
+    children: /* @__PURE__ */ jsx(DataGridCells2, {
+      row
+    })
+  }, row.id);
+}
+function VirtualDataGrid({
+  table,
+  label,
+  maxHeight,
+  estimateRowHeight,
+  overscan,
+  retainedRowIds,
+  renderRow = renderDefaultRow
+}) {
+  const scope = useRef(null);
+  useDataGridColumnSizes(table, scope);
+  return /* @__PURE__ */ jsx("div", {
+    ref: scope,
+    "data-testid": "VirtualDataGrid",
+    className: "min-w-0",
+    children: /* @__PURE__ */ jsx(VirtualTable2, {
+      items: table.getPrePaginatedRowModel().rows,
+      getItemKey: (row) => row.id,
+      label,
+      maxHeight,
+      estimateRowHeight,
+      overscan,
+      retainedKeys: retainedRowIds,
+      columns: /* @__PURE__ */ jsx(DataGridColumns, {
+        table
+      }),
+      header: /* @__PURE__ */ jsx(DataGridHeaderRows, {
+        table,
+        isResizable: true
+      }),
+      renderRow
+    })
+  });
+}
+export {
+  VirtualDataGrid
+};