@alexgorbatchev/shadcn 0.0.33 → 0.0.35

package/README.md

@@ -304,7 +304,7 @@ 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.
+`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`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. 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.
 

package/dist/{chunk-2dxa9enk.js → chunk-efs4bk5b.js}

@@ -38,7 +38,8 @@ function VirtualTable2({
     getItemKey: itemKey,
     estimateSize: () => estimateRowHeight,
     overscan,
-    rangeExtractor
+    rangeExtractor,
+    useAnimationFrameWithResizeObserver: true
   });
   const rows = virtualizer.getVirtualItems();
   const last = rows.at(-1);

package/dist/{chunk-yfr9syen.js → chunk-h5kjmt32.js}

@@ -118,9 +118,10 @@ function getDataGridColumnLabel(column) {
   return column.columnDef.meta?.label ?? (typeof header === "string" ? header : column.id);
 }
 function getAriaSort(column) {
-  if (!column.getCanSort())
+  const sortable = [column.id, ...column.columnDef.meta?.sortColumnIds ?? []].map((id) => column.table.getColumn(id)).filter((candidate) => candidate?.getCanSort());
+  if (sortable.length === 0)
     return;
-  const sorted = column.getIsSorted();
+  const sorted = sortable.map((candidate) => candidate?.getIsSorted()).find(Boolean);
   return sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
 }
 function DataGridHeaderCell({ header, isResizable }) {
@@ -267,7 +268,7 @@ function DataGridColumnHeader2({
   return column.getCanSort() ? /* @__PURE__ */ jsxs(Button2, {
     type: "button",
     variant: "ghost",
-    size: "sm",
+    size: "inline",
     onClick: column.getToggleSortingHandler(),
     children: [
       children,

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

@@ -12,6 +12,11 @@ interface IDataGridColumnMeta {
     visibleFrom?: TableVisibility;
     /** Takes the width the sized columns leave, so it has no fixed size of its own. */
     fill?: boolean;
+    /**
+     * Other columns this header sorts with its own controls, such as a hidden column behind a second sort button. The
+     * header's `aria-sort` reports whichever of them, or the column itself, is sorted.
+     */
+    sortColumnIds?: readonly string[];
 }
 declare const dataGridFeatures: {
     columnFilteringFeature: import("@tanstack/react-table").TableFeature;

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

@@ -13,7 +13,7 @@ import {
   DataGridColumnHeader2,
   DataGridFilter2,
   DataGridPagination2
-} from "../../chunk-yfr9syen.js";
+} from "../../chunk-h5kjmt32.js";
 import {
   Checkbox2
 } from "../../chunk-tnnf8ydf.js";

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

@@ -10,10 +10,10 @@ import {
   DataGridHeaderRows,
   DataGridCells2,
   DataGridColumns
-} from "../../chunk-yfr9syen.js";
+} from "../../chunk-h5kjmt32.js";
 import {
   VirtualTable2
-} from "../../chunk-2dxa9enk.js";
+} from "../../chunk-efs4bk5b.js";
 
 // src/components/virtual-data-grid/VirtualDataGrid.tsx
 import { useRef } from "react";

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

@@ -2,7 +2,7 @@ import"../../chunk-cp2m7y7v.js";
 import"../../chunk-zte6pw69.js";
 import {
   VirtualTable2
-} from "../../chunk-2dxa9enk.js";
+} from "../../chunk-efs4bk5b.js";
 export {
   VirtualTable2 as VirtualTable
 };

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

@@ -49,3 +49,11 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     render: () => <Example pagination={false}/>
 }
 ```
+
+### CombinedSortHeader
+
+```tsx
+{
+    render: () => <CombinedSortExample />
+}
+```

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

@@ -62,6 +62,12 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### AlignedHeaders
+
+```tsx
+{}
+```
+
 ### NarrowContainer
 
 ```tsx

package/llms/setup.md

@@ -304,7 +304,7 @@ 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.
+`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`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {