@alexgorbatchev/shadcn 0.0.30 → 0.0.31

package/dist/components/virtual-table/index.js

@@ -1,100 +1,8 @@
 import"../../chunk-cp2m7y7v.js";
+import"../../chunk-zte6pw69.js";
 import {
-  Table2,
-  TableHeader2,
-  TableBody2
-} from "../../chunk-zte6pw69.js";
-
-// src/components/virtual-table/VirtualTable.tsx
-import {
-  Fragment,
-  useCallback,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
-import { jsx, jsxs } from "react/jsx-runtime";
-function VirtualTable({
-  items,
-  getItemKey,
-  renderRow,
-  header,
-  columns,
-  label,
-  maxHeight = "65vh",
-  estimateRowHeight = 80,
-  overscan = 5,
-  retainedKeys,
-  layout = "fixed"
-}) {
-  const viewport = useRef(null);
-  const [focusedKey, setFocusedKey] = useState();
-  const retained = useMemo(() => items.flatMap((item, index) => retainedKeys?.includes(getItemKey(item)) || getItemKey(item) === focusedKey ? [index] : []), [items, retainedKeys, getItemKey, focusedKey]);
-  const rangeExtractor = useCallback((range) => [...new Set([...defaultRangeExtractor(range), ...retained])].sort((a, b) => a - b), [retained]);
-  const itemKey = useCallback((index) => getItemKey(items[index]), [items, getItemKey]);
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => viewport.current,
-    getItemKey: itemKey,
-    estimateSize: () => estimateRowHeight,
-    overscan,
-    rangeExtractor
-  });
-  const rows = virtualizer.getVirtualItems();
-  const last = rows.at(-1);
-  return /* @__PURE__ */ jsx("div", {
-    ref: viewport,
-    "data-testid": "VirtualTable",
-    role: "region",
-    "aria-label": label,
-    tabIndex: 0,
-    className: "min-w-0 overflow-auto overscroll-contain",
-    style: { maxHeight },
-    onFocusCapture: (event) => {
-      const row = event.target.closest("tr[data-index]");
-      const item = items[Number(row?.dataset.index)];
-      if (row && item)
-        setFocusedKey(getItemKey(item));
-    },
-    children: /* @__PURE__ */ jsxs(Table2, {
-      layout,
-      "aria-label": label,
-      "aria-rowcount": items.length + 1,
-      children: [
-        columns,
-        /* @__PURE__ */ jsx(TableHeader2, {
-          children: header
-        }),
-        /* @__PURE__ */ jsxs(TableBody2, {
-          children: [
-            rows.map((row, index) => /* @__PURE__ */ jsxs(Fragment, {
-              children: [
-                row.start > (rows[index - 1]?.end ?? 0) && /* @__PURE__ */ jsx("tr", {
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx("td", {
-                    style: { height: row.start - (rows[index - 1]?.end ?? 0), padding: 0, border: 0 }
-                  })
-                }),
-                renderRow(items[row.index], {
-                  ref: virtualizer.measureElement,
-                  "data-index": row.index,
-                  "aria-rowindex": row.index + 2
-                })
-              ]
-            }, row.key)),
-            last && virtualizer.getTotalSize() > last.end && /* @__PURE__ */ jsx("tr", {
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx("td", {
-                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
-              })
-            })
-          ]
-        })
-      ]
-    })
-  });
-}
+  VirtualTable2
+} from "../../chunk-2dxa9enk.js";
 export {
-  VirtualTable
+  VirtualTable2 as VirtualTable
 };

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValu
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./components/Collapsible.js";
 export { Spinner } from "./components/Spinner.js";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, } from "./components/Table.js";
+export type { TableTextAlign, TableVisibility } from "./components/Table.js";
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/NativeSelect.js";
 export { Kbd, KbdGroup } from "./components/Kbd.js";
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, } from "./components/Item.js";

package/dist/index.js

@@ -145,9 +145,8 @@ import {
   EmptyContent2
 } from "./chunk-9de1htr5.js";
 import {
-  Checkbox2,
-  Spinner2
-} from "./chunk-eehfrrdz.js";
+  Checkbox2
+} from "./chunk-tnnf8ydf.js";
 import {
   ThemeContext,
   useTheme2
@@ -187,6 +186,9 @@ import {
   CollapsibleTrigger2,
   CollapsibleContent2
 } from "./chunk-24d68cjp.js";
+import {
+  Spinner2
+} from "./chunk-1xncv9gb.js";
 import {
   Table2,
   TableHeader2,

package/llms/components/data-display/DataGridColumnOptions.md

@@ -0,0 +1,22 @@
+# DataGridColumnOptions
+
+Story: @alexgorbatchev/shadcn/components/data-display/DataGridColumnOptions
+Source: src/components/stories/data-display/DataGridColumnOptions.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/DataGridColumnOptions.stories.tsx)
+
+## Default render
+
+```tsx
+() => <VirtualDataGridExample files={fixture_gridFiles}/>
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```

package/llms/components/data-display/VirtualDataGrid.md

@@ -0,0 +1,71 @@
+# VirtualDataGrid
+
+Story: @alexgorbatchev/shadcn/components/data-display/VirtualDataGrid
+Source: src/components/stories/data-display/VirtualDataGrid.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/VirtualDataGrid.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataGridCells } from "@alexgorbatchev/shadcn/data-grid";
+import { TableRow } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default render
+
+```tsx
+() => <VirtualDataGridExample files={fixture_gridFiles}/>
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### LargeCollection
+
+```tsx
+{}
+```
+
+### SelectedRow
+
+```tsx
+{}
+```
+
+### KeyboardResizing
+
+```tsx
+{}
+```
+
+### CustomRows
+
+```tsx
+{
+    render: () => <CustomRowsExample />
+}
+```
+
+### RetainedRow
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} retainedRowIds={["file-500"]}/>
+}
+```
+
+### NarrowContainer
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} width={360}/>
+}
+```

package/llms/setup.md

@@ -50,28 +50,29 @@ Package preparation and contributor commands are documented in [AGENTS.md](https
 
 Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the following features from their dedicated entry points and install only the peers you use. These features, their hooks, and their types are not exported from the package root.
 
-| Import path suffix  | Components                                               | Install alongside the package                                                                       |
-| ------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `/chart`            | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
-| `/calendar`         | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
-| `/persian-calendar` | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
-| `/carousel`         | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
-| `/command`          | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
-| `/resizable`        | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
-| `/fonts.css`        | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
-| `/sonner`           | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
-| `/input-otp`        | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
-| `/virtual-table`    | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
-| `/message-scroller` | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
-| `/questionnaire`    | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
-| `/data-grid`        | DataGrid and native table helpers                        | `bun add @tanstack/react-table@9.2.8`                                                               |
-| `/file-upload`      | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
-| `/color-picker`     | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
-| `/image-crop`       | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
-| `/tree`             | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
-| `/editor`           | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
-| `/event-calendar`   | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
-| `/gantt`            | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
+| Import path suffix   | Components                                               | Install alongside the package                                                                       |
+| -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
+| `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
+| `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
+| `/carousel`          | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
+| `/command`           | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
+| `/resizable`         | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
+| `/fonts.css`         | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
+| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
+| `/input-otp`         | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
+| `/virtual-table`     | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
+| `/message-scroller`  | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
+| `/questionnaire`     | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
+| `/data-grid`         | DataGrid, column picker, and native table helpers        | `bun add @tanstack/react-table@9.2.8`                                                               |
+| `/virtual-data-grid` | VirtualDataGrid and row measurement props                | `bun add @tanstack/react-table@9.2.8 @tanstack/react-virtual@3.14.13`                               |
+| `/file-upload`       | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
+| `/color-picker`      | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
+| `/image-crop`        | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
+| `/tree`              | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
+| `/editor`            | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
+| `/event-calendar`    | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
+| `/gantt`             | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
 
 Import `@alexgorbatchev/shadcn/event-calendar.css` for EventCalendar, and `react-image-crop/dist/ReactCrop.css` for ImageCrop. The root also provides application shells, dashboard and billing layouts, authentication/settings forms, account/workspace controls, Kanban, facets, tags, number fields, toolbars, meters, stat cards and status displays. See the [component catalog reference](https://github.com/alexgorbatchev/shadcn/blob/main/docs/internal/component-catalog.md) for source groups, native APIs, dependency costs and consumer responsibilities.
 
@@ -302,6 +303,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
+`VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, and `fill`; a `fill` column takes the width the sized columns leave. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/llms.txt

@@ -333,6 +333,7 @@ Generated from the public package exports and Storybook sources.
 - [Carousel](./llms/components/data-display/Carousel.md)
 - [Chart](./llms/components/data-display/Chart.md)
 - [DataGrid](./llms/components/data-display/DataGrid.md)
+- [DataGridColumnOptions](./llms/components/data-display/DataGridColumnOptions.md)
 - [Item](./llms/components/data-display/Item.md)
 - [JsonViewer](./llms/components/data-display/JsonViewer.md)
 - [Kbd](./llms/components/data-display/Kbd.md)
@@ -341,6 +342,7 @@ Generated from the public package exports and Storybook sources.
 - [StatCard](./llms/components/data-display/StatCard.md)
 - [StatusTracker](./llms/components/data-display/StatusTracker.md)
 - [Table](./llms/components/data-display/Table.md)
+- [VirtualDataGrid](./llms/components/data-display/VirtualDataGrid.md)
 - [VirtualTable](./llms/components/data-display/VirtualTable.md)
 
 ## dates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1020,6 +1020,10 @@
       "types": "./dist/components/data-grid/index.d.ts",
       "import": "./dist/components/data-grid/index.js"
     },
+    "./virtual-data-grid": {
+      "types": "./dist/components/virtual-data-grid/index.d.ts",
+      "import": "./dist/components/virtual-data-grid/index.js"
+    },
     "./event-calendar": {
       "types": "./dist/components/event-calendar/index.d.ts",
       "import": "./dist/components/event-calendar/index.js"
@@ -1141,7 +1145,7 @@
     "strip-ansi": "7.2.0",
     "tailwindcss": "^4.3.3",
     "ts-unused": "3.7.1",
-    "typescript": "^6.0.3",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.4",
     "vitest": "^4.1.6",
     "vitest-browser-react": "^2.3.0",