@rozie-ui/data-table-solid 0.6.0 → 0.7.1

package/README.md

@@ -545,6 +545,8 @@ Beyond props, the component exposes imperative methods (declared once in the Roz
 | `focusCell` | Move + focus the active cell (grid interaction mode) — `focusCell(rowIndex, colIndex)`. `rowIndex` is the ABSOLUTE display-order position in `getPrePaginationRowModel().rows` (filter+sort+expand applied, BEFORE pagination/windowing), in BOTH paginated and virtual modes: a paginated `focusCell(abs)` switches to `Math.floor(abs/pageSize)` then focuses; a virtual `focusCell(abs)` scrolls-then-focuses. Args coerced to integers + clamped to bounds. Fires `activecell-change` with the absolute `rowIndex`. (Named `focusCell`, not `focus`: a bare `focus` verb shadows the inherited `HTMLElement.focus` on Lit — ROZ137.) |
 | `getActiveCell` | Return the current active-cell position — `getActiveCell()` → `{ rowIndex, colIndex, isHeader }`. For a body cell `rowIndex` is the ABSOLUTE display-order index (matching `focusCell` / `activecell-change`) and `isHeader` is `false`; for a header-active cell `rowIndex` is `null` and `isHeader` is `true` (integers only — no row data, no DOM node). |
 | `clearActiveCell` | Reset the roving active-cell position to the entry cell and exit interaction mode — `clearActiveCell()`. The next Tab-in re-enters at the entry cell. (Named `clearActiveCell`, not `clear`: distinct from the listbox `clear` selection verb.) |
+| `scrollToRow` | Scroll a row into view on a `virtual` table — `scrollToRow(index, options?)` where `options` mirrors TanStack virtual-core's own `ScrollToOptions` (`{ align?: 'start'|'center'|'end'|'auto', behavior?: 'auto'|'smooth'|'instant' }`) and is forwarded UNCHANGED to `virtualizer.scrollToIndex`. INDEPENDENT of grid-mode focus: never moves the roving active cell and never fires `activecell-change`, callable in either `interactionMode`. `index` is coerced to an integer (never range-clamped here — virtual-core's own `scrollToIndex` already clamps to `[0, options.count-1]`). A no-op when rows are not windowed (`virtual` off, or `'columns'`-only). |
+| `getScrollElement` | Return the scroll-container DOM node the row and column virtualizer(s) observe — `getScrollElement()` → `HTMLElement | null`. The supported replacement for reaching into the internal `.rdt-scroll` class selector. Returns `null` when nothing is windowed. |
 | `getRowIndexRelativeToPage` | Convert an ABSOLUTE display-order row index (the `focusCell` / `getActiveCell` / `activecell-change` space) to the PAGE-RELATIVE index — `getRowIndexRelativeToPage(absRow?)` → `number`. With no argument it converts the current active cell (`abs - pageIndex*pageSize`). In virtual mode (no pagination) it returns the absolute index unchanged. Mirrors MUI `getRowIndexRelativeToVisibleRows`. (Named `getRowIndexRelativeToPage`: collision-clean against the verb/event/prop and Lit ROZ137 reserved sets.) |
 | `editCell` | Programmatically open the editor on a cell — `editCell(rowIndex, colIndex)`, addressed by index over the visible model (args coerced to integers + clamped). No-op on a non-editable cell. (Named `editCell`, not `edit`: collision-clean against the verb/event/prop and Lit ROZ137 reserved sets.) |
 | `commitEditing` | Programmatically commit the open editor — `commitEditing()`. Runs the column validator; on success writes the two-way `data` model and fires one `cell-edit-commit`; on a validation failure keeps the editor open. No-op when no cell is editing. (Named `commitEditing`, not `commit`.) |

package/dist/index.cjs

@@ -763,6 +763,8 @@ function DataTable(_props) {
 			focusCell,
 			getActiveCell,
 			clearActiveCell,
+			scrollToRow,
+			getScrollElement,
 			getRowIndexRelativeToPage,
 			editCell,
 			commitEditing,
@@ -1699,6 +1701,13 @@ function DataTable(_props) {
 			end
 		});
 	}
+	function scrollToRow(index, options) {
+		if (!rowsWindowed() || !virtualizer) return;
+		virtualizer.scrollToIndex(Math.trunc(Number(index)) || 0, options || void 0);
+	}
+	function getScrollElement() {
+		return gridScrollEl;
+	}
 	function virtualItemKey(i) {
 		const src = windowSource();
 		return src && src[i] ? src[i].id : void 0;

package/dist/index.d.cts

@@ -200,23 +200,23 @@ interface DataTableProps {
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
   maxHeight?: string;
-  onSortChange?: (...args: unknown[]) => void;
-  onExpandChange?: (...args: unknown[]) => void;
-  onGroupChange?: (...args: unknown[]) => void;
-  onFilterChange?: (...args: unknown[]) => void;
-  onPageChange?: (...args: unknown[]) => void;
-  onSelectionChange?: (...args: unknown[]) => void;
-  onVisibilityChange?: (...args: unknown[]) => void;
-  onResizeChange?: (...args: unknown[]) => void;
-  onReorderChange?: (...args: unknown[]) => void;
-  onPinChange?: (...args: unknown[]) => void;
-  onHistoryChange?: (...args: unknown[]) => void;
-  onVisibleRangeChange?: (...args: unknown[]) => void;
-  onActivecellChange?: (...args: unknown[]) => void;
-  onRowActivate?: (...args: unknown[]) => void;
-  onRangeChange?: (...args: unknown[]) => void;
-  onCellEditCommit?: (...args: unknown[]) => void;
-  onRowEditCommit?: (...args: unknown[]) => void;
+  onSortChange?: (...args: any[]) => void;
+  onExpandChange?: (...args: any[]) => void;
+  onGroupChange?: (...args: any[]) => void;
+  onFilterChange?: (...args: any[]) => void;
+  onPageChange?: (...args: any[]) => void;
+  onSelectionChange?: (...args: any[]) => void;
+  onVisibilityChange?: (...args: any[]) => void;
+  onResizeChange?: (...args: any[]) => void;
+  onReorderChange?: (...args: any[]) => void;
+  onPinChange?: (...args: any[]) => void;
+  onHistoryChange?: (...args: any[]) => void;
+  onVisibleRangeChange?: (...args: any[]) => void;
+  onActivecellChange?: (...args: any[]) => void;
+  onRowActivate?: (...args: any[]) => void;
+  onRangeChange?: (...args: any[]) => void;
+  onCellEditCommit?: (...args: any[]) => void;
+  onRowEditCommit?: (...args: any[]) => void;
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
@@ -285,6 +285,11 @@ interface DataTableHandle {
   focusCell: (...args: any[]) => any;
   getActiveCell: (...args: any[]) => any;
   clearActiveCell: (...args: any[]) => any;
+  scrollToRow(index: any, options?: {
+    align?: 'start' | 'center' | 'end' | 'auto';
+    behavior?: 'auto' | 'smooth' | 'instant';
+  }): void;
+  getScrollElement(): any;
   getRowIndexRelativeToPage: (...args: any[]) => any;
   editCell: (...args: any[]) => any;
   commitEditing: (...args: any[]) => any;

package/dist/index.d.mts

@@ -200,23 +200,23 @@ interface DataTableProps {
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
   maxHeight?: string;
-  onSortChange?: (...args: unknown[]) => void;
-  onExpandChange?: (...args: unknown[]) => void;
-  onGroupChange?: (...args: unknown[]) => void;
-  onFilterChange?: (...args: unknown[]) => void;
-  onPageChange?: (...args: unknown[]) => void;
-  onSelectionChange?: (...args: unknown[]) => void;
-  onVisibilityChange?: (...args: unknown[]) => void;
-  onResizeChange?: (...args: unknown[]) => void;
-  onReorderChange?: (...args: unknown[]) => void;
-  onPinChange?: (...args: unknown[]) => void;
-  onHistoryChange?: (...args: unknown[]) => void;
-  onVisibleRangeChange?: (...args: unknown[]) => void;
-  onActivecellChange?: (...args: unknown[]) => void;
-  onRowActivate?: (...args: unknown[]) => void;
-  onRangeChange?: (...args: unknown[]) => void;
-  onCellEditCommit?: (...args: unknown[]) => void;
-  onRowEditCommit?: (...args: unknown[]) => void;
+  onSortChange?: (...args: any[]) => void;
+  onExpandChange?: (...args: any[]) => void;
+  onGroupChange?: (...args: any[]) => void;
+  onFilterChange?: (...args: any[]) => void;
+  onPageChange?: (...args: any[]) => void;
+  onSelectionChange?: (...args: any[]) => void;
+  onVisibilityChange?: (...args: any[]) => void;
+  onResizeChange?: (...args: any[]) => void;
+  onReorderChange?: (...args: any[]) => void;
+  onPinChange?: (...args: any[]) => void;
+  onHistoryChange?: (...args: any[]) => void;
+  onVisibleRangeChange?: (...args: any[]) => void;
+  onActivecellChange?: (...args: any[]) => void;
+  onRowActivate?: (...args: any[]) => void;
+  onRangeChange?: (...args: any[]) => void;
+  onCellEditCommit?: (...args: any[]) => void;
+  onRowEditCommit?: (...args: any[]) => void;
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
@@ -285,6 +285,11 @@ interface DataTableHandle {
   focusCell: (...args: any[]) => any;
   getActiveCell: (...args: any[]) => any;
   clearActiveCell: (...args: any[]) => any;
+  scrollToRow(index: any, options?: {
+    align?: 'start' | 'center' | 'end' | 'auto';
+    behavior?: 'auto' | 'smooth' | 'instant';
+  }): void;
+  getScrollElement(): any;
   getRowIndexRelativeToPage: (...args: any[]) => any;
   editCell: (...args: any[]) => any;
   commitEditing: (...args: any[]) => any;

package/dist/index.mjs

@@ -736,6 +736,8 @@ function DataTable(_props) {
 			focusCell,
 			getActiveCell,
 			clearActiveCell,
+			scrollToRow,
+			getScrollElement,
 			getRowIndexRelativeToPage,
 			editCell,
 			commitEditing,
@@ -1672,6 +1674,13 @@ function DataTable(_props) {
 			end
 		});
 	}
+	function scrollToRow(index, options) {
+		if (!rowsWindowed() || !virtualizer) return;
+		virtualizer.scrollToIndex(Math.trunc(Number(index)) || 0, options || void 0);
+	}
+	function getScrollElement() {
+		return gridScrollEl;
+	}
 	function virtualItemKey(i) {
 		const src = windowSource();
 		return src && src[i] ? src[i].id : void 0;

package/dist/source/index.jsx

@@ -734,6 +734,8 @@ function DataTable(_props) {
 			focusCell,
 			getActiveCell,
 			clearActiveCell,
+			scrollToRow,
+			getScrollElement,
 			getRowIndexRelativeToPage,
 			editCell,
 			commitEditing,
@@ -1671,6 +1673,13 @@ function DataTable(_props) {
 			end
 		});
 	}
+	function scrollToRow(index, options) {
+		if (!rowsWindowed() || !virtualizer) return;
+		virtualizer.scrollToIndex(Math.trunc(Number(index)) || 0, options || void 0);
+	}
+	function getScrollElement() {
+		return gridScrollEl;
+	}
 	function virtualItemKey(i) {
 		const src = windowSource();
 		return src && src[i] ? src[i].id : void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -47,13 +47,13 @@
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "^0.7.5"
+    "@rozie/runtime-solid": "^0.8.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@rozie-ui/popover-solid": "^0.1.0 || ^0.2.0"
+    "@rozie-ui/popover-solid": "^0.1.0 || ^0.2.0 || ^0.3.0"
   },
   "peerDependenciesMeta": {
     "solid-js": {

package/src/DataTable.tsx

@@ -610,23 +610,23 @@ interface DataTableProps {
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
   maxHeight?: string;
-  onSortChange?: (...args: unknown[]) => void;
-  onExpandChange?: (...args: unknown[]) => void;
-  onGroupChange?: (...args: unknown[]) => void;
-  onFilterChange?: (...args: unknown[]) => void;
-  onPageChange?: (...args: unknown[]) => void;
-  onSelectionChange?: (...args: unknown[]) => void;
-  onVisibilityChange?: (...args: unknown[]) => void;
-  onResizeChange?: (...args: unknown[]) => void;
-  onReorderChange?: (...args: unknown[]) => void;
-  onPinChange?: (...args: unknown[]) => void;
-  onHistoryChange?: (...args: unknown[]) => void;
-  onVisibleRangeChange?: (...args: unknown[]) => void;
-  onActivecellChange?: (...args: unknown[]) => void;
-  onRowActivate?: (...args: unknown[]) => void;
-  onRangeChange?: (...args: unknown[]) => void;
-  onCellEditCommit?: (...args: unknown[]) => void;
-  onRowEditCommit?: (...args: unknown[]) => void;
+  onSortChange?: (...args: any[]) => void;
+  onExpandChange?: (...args: any[]) => void;
+  onGroupChange?: (...args: any[]) => void;
+  onFilterChange?: (...args: any[]) => void;
+  onPageChange?: (...args: any[]) => void;
+  onSelectionChange?: (...args: any[]) => void;
+  onVisibilityChange?: (...args: any[]) => void;
+  onResizeChange?: (...args: any[]) => void;
+  onReorderChange?: (...args: any[]) => void;
+  onPinChange?: (...args: any[]) => void;
+  onHistoryChange?: (...args: any[]) => void;
+  onVisibleRangeChange?: (...args: any[]) => void;
+  onActivecellChange?: (...args: any[]) => void;
+  onRowActivate?: (...args: any[]) => void;
+  onRangeChange?: (...args: any[]) => void;
+  onCellEditCommit?: (...args: any[]) => void;
+  onRowEditCommit?: (...args: any[]) => void;
   // D-131: default slot resolved via children() at body top
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
@@ -666,6 +666,8 @@ export interface DataTableHandle {
   focusCell: (...args: any[]) => any;
   getActiveCell: (...args: any[]) => any;
   clearActiveCell: (...args: any[]) => any;
+  scrollToRow(index: any, options?: { align?: 'start' | 'center' | 'end' | 'auto'; behavior?: 'auto' | 'smooth' | 'instant'; }): void;
+  getScrollElement(): any;
   getRowIndexRelativeToPage: (...args: any[]) => any;
   editCell: (...args: any[]) => any;
   commitEditing: (...args: any[]) => any;
@@ -683,7 +685,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getRowId: null, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
   const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onSortChange', 'onExpandChange', 'onGroupChange', 'onFilterChange', 'onPageChange', 'onSelectionChange', 'onVisibilityChange', 'onResizeChange', 'onReorderChange', 'onPinChange', 'onHistoryChange', 'onVisibleRangeChange', 'onActivecellChange', 'onRowActivate', 'onRangeChange', 'onCellEditCommit', 'onRowEditCommit']);
   const resolved = () => local.children;
-  onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
+  onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
 
   const __ctx_data_table_columns = rozieContext("data-table:columns");
   const [data, setData] = createControllableSignal<any[]>(_props as unknown as Record<string, unknown>, 'data', []);
@@ -2699,6 +2701,37 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     });
   }
 
+  // scrollToRow(index, options?) — quick 260927-a2r (oinbox dogfooding): plain scroll-into-view
+  // for a windowed row, forwarding TanStack virtual-core's own ScrollToOptions ({ align?,
+  // behavior? }) UNCHANGED to virtualizer.scrollToIndex — the SAME call focusActiveCell's D-12
+  // off-window scroll-then-focus path (gridFocusNav.rzts) already drives, exposed here as a
+  // standalone public verb rather than invented plumbing. INDEPENDENT of grid-mode focus
+  // (feedback_no_false_equivalent_options / the todo's own open question): never reads or
+  // writes $data.activeRow/activeColIndex, never emits activecell-change, and is callable in
+  // EITHER interactionMode ('table' or 'grid') — a scroll, not a focus move. No-op when rows
+  // are not windowed or the row virtualizer has not been constructed yet — mirrors the
+  // isGrid()-gated no-op precedent on focusCell/clearActiveCell (gridActiveCellVerbs.rzts) for
+  // the identical reason: the capability this verb drives isn't active. `index` is coerced
+  // (T-260927A2R-01) — never range-clamped here: virtual-core's own scrollToIndex already
+  // clamps to [0, options.count-1] internally (verified in @tanstack/virtual-core source).
+  function scrollToRow(index: any, options?: {
+    align?: 'start' | 'center' | 'end' | 'auto';
+    behavior?: 'auto' | 'smooth' | 'instant';
+  }): void {
+    if (!rowsWindowed() || !virtualizer) return;
+    virtualizer.scrollToIndex(Math.trunc(Number(index)) || 0, options || undefined);
+  }
+
+  // getScrollElement() — quick 260927-a2r: returns the DOM node the row AND column
+  // virtualizer(s) observe/scroll (the `.rdt-scroll` div captured post-mount in
+  // DataTable.rozie's own $onMount, D-03) — the supported replacement for a consumer reaching
+  // into the internal `.rdt-scroll` class selector. Returns null when nothing is windowed:
+  // gridScrollEl is only ever assigned inside the isWindowed() guard, so no extra gate is
+  // needed here beyond that natural null.
+  function getScrollElement(): any {
+    return gridScrollEl;
+  }
+
   // ══ Generic vertical windowing math (Phase 64, D-04) — the target-agnostic virtual-core bridge ══
   // Lifted verbatim from the DataTable virtualization.rzts (the Phase 53/63 B13 baseline). This partial
   // holds ONLY the PURE windowing math; every DOM/refs/virtualizer-instance impurity stays per-consumer

package/src/index.ts

@@ -12,5 +12,5 @@ export { default as FilterSelect } from './FilterSelect';
 export { default as GroupBar } from './GroupBar';
 export { default as DetailPanel } from './DetailPanel';
 
-/** The `$expose` imperative handle received via `ref` — { sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }. */
+/** The `$expose` imperative handle received via `ref` — { sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }. */
 export type { DataTableHandle } from './DataTable';