@alexgorbatchev/shadcn 0.0.28 → 0.0.29

package/README.md

@@ -300,7 +300,7 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display an error and allow retry.
 
-`VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `columnCount`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a colgroup. `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.
+`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.
 
 `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/components/virtual-table/VirtualTable.d.ts

@@ -11,7 +11,6 @@ interface IVirtualTableProps<T> {
     renderRow: (item: T, props: IVirtualTableRowProps) => ReactNode;
     header: ReactNode;
     columns?: ReactNode;
-    columnCount: number;
     label: string;
     maxHeight?: number | string;
     estimateRowHeight?: number;
@@ -19,5 +18,5 @@ interface IVirtualTableProps<T> {
     retainedKeys?: readonly Key[];
     layout?: ComponentProps<typeof Table>["layout"];
 }
-export declare function VirtualTable<T>({ items, getItemKey, renderRow, header, columns, columnCount, label, maxHeight, estimateRowHeight, overscan, retainedKeys, layout, }: IVirtualTableProps<T>): ReactElement;
+export declare function VirtualTable<T>({ items, getItemKey, renderRow, header, columns, label, maxHeight, estimateRowHeight, overscan, retainedKeys, layout, }: IVirtualTableProps<T>): ReactElement;
 export {};

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

@@ -21,7 +21,6 @@ function VirtualTable({
   renderRow,
   header,
   columns,
-  columnCount,
   label,
   maxHeight = "65vh",
   estimateRowHeight = 80,
@@ -74,7 +73,6 @@ function VirtualTable({
                 row.start > (rows[index - 1]?.end ?? 0) && /* @__PURE__ */ jsx("tr", {
                   "aria-hidden": "true",
                   children: /* @__PURE__ */ jsx("td", {
-                    colSpan: columnCount,
                     style: { height: row.start - (rows[index - 1]?.end ?? 0), padding: 0, border: 0 }
                   })
                 }),
@@ -88,7 +86,6 @@ function VirtualTable({
             last && virtualizer.getTotalSize() > last.end && /* @__PURE__ */ jsx("tr", {
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsx("td", {
-                colSpan: columnCount,
                 style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
               })
             })

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

@@ -9,7 +9,7 @@ Source: src/components/stories/data-display/VirtualTable.stories.tsx
 
 ```tsx
 import { VirtualTable } from "@alexgorbatchev/shadcn/virtual-table";
-import { TableCell, TableHead, TableRow, Button } from "@alexgorbatchev/shadcn";
+import { TableCell, TableColumn, TableColumnGroup, TableHead, TableRow, Button } from "@alexgorbatchev/shadcn";
 ```
 
 ## Default component
@@ -26,7 +26,6 @@ VirtualTable
     getItemKey: (item) => item,
     label: "Items",
     maxHeight: 300,
-    columnCount: 1,
     header: (<TableRow>
         <TableHead scope="col">Name</TableHead>
       </TableRow>),
@@ -55,3 +54,32 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     args: { retainedKeys: ["Item 500"] }
 }
 ```
+
+### ResponsiveColumns
+
+```tsx
+{
+    args: {
+        columns: (<TableColumnGroup>
+        <TableColumn />
+        <TableColumn visibleFrom="container-sm" style={{ width: 80 }}/>
+        <TableColumn style={{ width: 60 }}/>
+      </TableColumnGroup>),
+        header: (<TableRow>
+        <TableHead scope="col">Name</TableHead>
+        <TableHead scope="col" visibleFrom="container-sm">
+          Kind
+        </TableHead>
+        <TableHead scope="col">Size</TableHead>
+      </TableRow>),
+        renderRow: (item, props) => (<TableRow {...props}>
+        <TableCell>{item}</TableCell>
+        <TableCell visibleFrom="container-sm">File</TableCell>
+        <TableCell>1 KB</TableCell>
+      </TableRow>),
+    },
+    render: (args) => (<div style={{ width: 350 }}>
+      <VirtualTable {...args}/>
+    </div>)
+}
+```

package/llms/setup.md

@@ -300,7 +300,7 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display an error and allow retry.
 
-`VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `columnCount`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a colgroup. `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.
+`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.
 
 `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.28",
+  "version": "0.0.29",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {