@vendure-io/ui 2.0.0-beta.12 → 2.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",

package/src/components/molecules/data-table/data-table-types.tsx

@@ -229,6 +229,27 @@ export interface DataTableProps<TData> {
    */
   setTableOptions?: (options: TableOptions<TData>) => TableOptions<TData>;
 
+  /**
+   * Receives the core's TanStack {@link Table} instance so consumers (saved-view
+   * controls, external toolbars) can drive it without rendering a slot to
+   * capture it — the supported alternative to reading `table` off the `toolbar`
+   * render-prop purely for its side effect.
+   *
+   * Fires from an effect after the first commit — never during render or SSR —
+   * so it is safe to call setState from here. `useReactTable` returns a
+   * referentially stable instance for the component's lifetime, so this fires
+   * once per mount (twice under React StrictMode in development, like any
+   * effect — keep the callback idempotent): never on a plain rerender, and not
+   * again when the callback prop's identity changes. Treat it as a "ready"
+   * capture, not a subscription — the latest callback as of that single fire is
+   * used (an inline function is fine), but a callback swapped in after mount is
+   * never invoked. TanStack mutates the instance in place as state changes, so
+   * the reference you capture here stays current — read live state through it
+   * (e.g. inside an event handler) rather than expecting a fresh object on each
+   * change.
+   */
+  onTableReady?: (table: Table<TData>) => void;
+
   /**
    * The table's frame. `'card'` (default) renders the band anatomy on a real
    * `Card`: a `CardHeader` (border-b) hosting the header/controls/chips zones,

package/src/components/molecules/data-table/data-table.tsx

@@ -142,6 +142,7 @@ function DataTable<TData>({
   emptyState,
   renderRow,
   setTableOptions,
+  onTableReady,
   frame = 'card',
   footerRows,
   labels,
@@ -311,6 +312,16 @@ function DataTable<TData>({
 
   const table = useReactTable(setTableOptions ? setTableOptions(baseOptions) : baseOptions);
 
+  // Hand the table instance to the consumer once it exists. A ref holds the
+  // latest callback so the effect can key on `table` alone — do NOT add
+  // `onTableReady` to the deps: that would re-fire the "ready" notification
+  // whenever an inline callback gets a new identity on rerender.
+  const onTableReadyRef = React.useRef(onTableReady);
+  onTableReadyRef.current = onTableReady;
+  React.useEffect(() => {
+    onTableReadyRef.current?.(table);
+  }, [table]);
+
   const selectionCache = useSelectionCache(table);
 
   const bodyRows = table.getRowModel().rows;