@rozie-ui/data-table-solid 0.7.0 → 0.7.2

package/dist/index.mjs

@@ -239,7 +239,7 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
 //#endregion
 //#region src/DataTable.tsx
 var _tmpl$$11 = /* @__PURE__ */ template(`<div class=rozie-data-table-wrap data-rozie-s-d5dcab4c=""><div class=rdt-column-defs aria-hidden=true data-rozie-s-d5dcab4c=""></div><div class=rdt-toolbar data-rozie-s-d5dcab4c=""><input type=text role=searchbox aria-label="Search table"class=rdt-global-filter data-rozie-s-d5dcab4c="">`), _tmpl$2$4 = /* @__PURE__ */ template(`<div class=rdt-sr-live role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-paste"data-testid=paste-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-range"data-testid=range-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$5$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-sortfilter"data-testid=sortfilter-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$6 = /* @__PURE__ */ template(`<details class=rdt-colvis data-rozie-s-d5dcab4c=""><summary class=rdt-colvis-summary data-rozie-s-d5dcab4c="">Columns</summary><div class=rdt-colvis-menu role=group aria-label="Toggle columns"data-rozie-s-d5dcab4c="">`), _tmpl$7 = /* @__PURE__ */ template(`<label class=rdt-colvis-item data-rozie-s-d5dcab4c=""><input type=checkbox class=rdt-colvis-checkbox data-rozie-s-d5dcab4c=""><span class=rdt-colvis-label data-rozie-s-d5dcab4c="">`), _tmpl$8 = /* @__PURE__ */ template(`<div class=rdt-group-bar-host data-rozie-s-d5dcab4c="">`), _tmpl$9 = /* @__PURE__ */ template(`<span class=rdt-group-token data-group-token=""data-rozie-s-d5dcab4c="">`), _tmpl$0 = /* @__PURE__ */ template(`<div class=rdt-scroll data-rozie-s-d5dcab4c=""><table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c=""><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c=""></td></tr><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c="">`), _tmpl$1 = /* @__PURE__ */ template(`<table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c="">`), _tmpl$10 = /* @__PURE__ */ template(`<tr class=rdt-tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$11 = /* @__PURE__ */ template(`<th role=columnheader data-grid-cell=""data-row=__header data-rozie-s-d5dcab4c="">`), _tmpl$12 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c="">`), _tmpl$13 = /* @__PURE__ */ template(`<div class=rdt-col-menu role=menu data-rozie-s-d5dcab4c=""><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin left</button><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin right</button><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Unpin</button><hr class=rdt-col-menu-sep data-rozie-s-d5dcab4c=""><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Hide column`), _tmpl$14 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button class=rdt-resize-handle data-rozie-s-d5dcab4c=""><span class=rdt-resize-grip aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$15 = /* @__PURE__ */ template(`<button type=button class=rdt-sort-btn data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c=""></span><span class=rdt-sort-ind aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$16 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c="">`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class=rdt-col-menu-trigger data-rozie-s-d5dcab4c="">⋯`), _tmpl$18 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select all rows"class=rdt-select-all data-rozie-s-d5dcab4c="">`), _tmpl$19 = /* @__PURE__ */ template(`<tr class=rdt-filter-row data-rozie-s-d5dcab4c="">`), _tmpl$20 = /* @__PURE__ */ template(`<th role=presentation data-rozie-s-d5dcab4c="">`), _tmpl$21 = /* @__PURE__ */ template(`<input type=text class=rdt-col-filter data-rozie-s-d5dcab4c="">`), _tmpl$22 = /* @__PURE__ */ template(`<tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$23 = /* @__PURE__ */ template(`<td data-grid-cell=""data-rozie-s-d5dcab4c="">`), _tmpl$24 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button data-expander=""class="rdt-expander rdt-group-toggle"data-rozie-s-d5dcab4c=""></button><span class=rdt-group-value data-rozie-s-d5dcab4c=""></span><span class=rdt-group-count data-rozie-s-d5dcab4c="">`), _tmpl$25 = /* @__PURE__ */ template(`<span class=rdt-cell-value data-rozie-s-d5dcab4c="">`), _tmpl$26 = /* @__PURE__ */ template(`<input type=number data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$27 = /* @__PURE__ */ template(`<select data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$28 = /* @__PURE__ */ template(`<input type=checkbox data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$29 = /* @__PURE__ */ template(`<input type=text data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$30 = /* @__PURE__ */ template(`<option data-rozie-s-d5dcab4c="">`), _tmpl$31 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select row"class=rdt-select-row data-rozie-s-d5dcab4c="">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button data-expander=""class=rdt-expander data-rozie-s-d5dcab4c="">`), _tmpl$33 = /* @__PURE__ */ template(`<span data-fill-handle=""data-testid=fill-handle aria-hidden=true class=rdt-fill-handle data-rozie-s-d5dcab4c="">`), _tmpl$34 = /* @__PURE__ */ template(`<tr class=rdt-detail-row role=row data-rozie-s-d5dcab4c=""><td class=rdt-detail-cell data-rozie-s-d5dcab4c="">`), _tmpl$35 = /* @__PURE__ */ template(`<th class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$36 = /* @__PURE__ */ template(`<td class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$37 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><input class=rdt-select-placeholder type=checkbox tabindex=-1 aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$38 = /* @__PURE__ */ template(`<span class=rdt-skeleton aria-hidden=true data-rozie-s-d5dcab4c="">&#8203;`), _tmpl$39 = /* @__PURE__ */ template(`<div class=rdt-pagination role=group aria-label=Pagination data-rozie-s-d5dcab4c=""><button type=button class="rdt-page-btn rdt-page-prev"data-rozie-s-d5dcab4c="">Prev</button><span class=rdt-page-status aria-live=polite data-rozie-s-d5dcab4c=""></span><button type=button class="rdt-page-btn rdt-page-next"data-rozie-s-d5dcab4c="">Next</button><select aria-label="Rows per page"class=rdt-page-size data-rozie-s-d5dcab4c=""><option value=10 data-rozie-s-d5dcab4c="">10</option><option value=25 data-rozie-s-d5dcab4c="">25</option><option value=50 data-rozie-s-d5dcab4c="">50</option><option value=100 data-rozie-s-d5dcab4c="">100`);
-__rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
+/** A cell position as integers over the visible (display-order) model. */ /** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */ /** The rectangular cell-range selection. Both corners are `null` when there is no range. */ /** One data column offered to the `#groupBar` slot. */ /** One changed cell inside a row edit commit. */ /** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */ /** The `cell-edit-commit` payload: one committed cell. */ /** The `row-edit-commit` payload: the row and every cell the save changed. */ /** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */ /** The `history-change` payload: undo/redo availability. */ /** The `range-change` payload: the new range corners (both `null` when the range cleared). */ /** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */ /** The `visible-range-change` payload: the rendered row window, `end` exclusive. */ __rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
   --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
   --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--rdt-ds-select-accent)));
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
@@ -692,23 +692,23 @@ function DataTable(_props) {
 		"maxHeight",
 		"children",
 		"ref",
-		"onSortChange",
+		"onActivecellChange",
+		"onCellEditCommit",
 		"onExpandChange",
-		"onGroupChange",
 		"onFilterChange",
+		"onGroupChange",
+		"onHistoryChange",
 		"onPageChange",
-		"onSelectionChange",
-		"onVisibilityChange",
-		"onResizeChange",
-		"onReorderChange",
 		"onPinChange",
-		"onHistoryChange",
-		"onVisibleRangeChange",
-		"onActivecellChange",
-		"onRowActivate",
 		"onRangeChange",
-		"onCellEditCommit",
-		"onRowEditCommit"
+		"onReorderChange",
+		"onResizeChange",
+		"onRowActivate",
+		"onRowEditCommit",
+		"onSelectionChange",
+		"onSortChange",
+		"onVisibilityChange",
+		"onVisibleRangeChange"
 	]);
 	const resolved = () => local.children;
 	onMount(() => {

package/dist/source/index.jsx

@@ -690,23 +690,23 @@ function DataTable(_props) {
 		"maxHeight",
 		"children",
 		"ref",
-		"onSortChange",
+		"onActivecellChange",
+		"onCellEditCommit",
 		"onExpandChange",
-		"onGroupChange",
 		"onFilterChange",
+		"onGroupChange",
+		"onHistoryChange",
 		"onPageChange",
-		"onSelectionChange",
-		"onVisibilityChange",
-		"onResizeChange",
-		"onReorderChange",
 		"onPinChange",
-		"onHistoryChange",
-		"onVisibleRangeChange",
-		"onActivecellChange",
-		"onRowActivate",
 		"onRangeChange",
-		"onCellEditCommit",
-		"onRowEditCommit"
+		"onReorderChange",
+		"onResizeChange",
+		"onRowActivate",
+		"onRowEditCommit",
+		"onSelectionChange",
+		"onSortChange",
+		"onVisibilityChange",
+		"onVisibleRangeChange"
 	]);
 	const resolved = () => local.children;
 	onMount(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -43,17 +43,18 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "CHANGELOG.md"
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "^0.7.5"
+    "@rozie/runtime-solid": "^0.9.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

@@ -44,6 +44,78 @@ import { columnSpecsEquivalent } from './helpers/columnDefUtils';
 
 // The registry API handed to <Column> children (whole-object-replace — T-48-PP guard).
 
+import type { Column as TableColumn, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/table-core';
+
+/** A cell position as integers over the visible (display-order) model. */
+export interface DataTableCellPosition {
+  rowIndex: number;
+  colIndex: number;
+}
+/** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */
+export interface DataTableActiveCell {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader: boolean;
+}
+/** The rectangular cell-range selection. Both corners are `null` when there is no range. */
+export interface DataTableRange {
+  anchor: DataTableCellPosition | null;
+  focus: DataTableCellPosition | null;
+}
+/** One data column offered to the `#groupBar` slot. */
+export interface DataTableGroupableColumn {
+  id: string;
+  label: string;
+}
+/** One changed cell inside a row edit commit. */
+export interface DataTableCellChange {
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+
+/** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */
+export interface DataTableActiveCellChangePayload {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader?: boolean;
+}
+/** The `cell-edit-commit` payload: one committed cell. */
+export interface DataTableCellEditCommitPayload {
+  rowId: string;
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+/** The `row-edit-commit` payload: the row and every cell the save changed. */
+export interface DataTableRowEditCommitPayload {
+  rowId: string;
+  changes: DataTableCellChange[];
+}
+/** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */
+export interface DataTableFilterChangePayload {
+  globalFilter?: string;
+  columnFilters?: ColumnFiltersState;
+}
+/** The `history-change` payload: undo/redo availability. */
+export interface DataTableHistoryChangePayload {
+  canUndo: boolean;
+  canRedo: boolean;
+}
+/** The `range-change` payload: the new range corners (both `null` when the range cleared). */
+export type DataTableRangeChangePayload = DataTableRange;
+/** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */
+export interface DataTableRowActivatePayload {
+  row: any;
+  index: number;
+  trigger: 'keyboard' | 'click';
+}
+/** The `visible-range-change` payload: the rendered row window, `end` exclusive. */
+export interface DataTableVisibleRangeChangePayload {
+  start: number;
+  end: number;
+}
+
 __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
   --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--rdt-ds-select-accent)));
@@ -445,23 +517,23 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   accent-color: var(--rdt-select-accent, currentColor);
 }`);
 
-interface GroupBarSlotCtx { grouping: any; groupableColumns: any; applyGrouping: any; clearGrouping: any; }
+interface GroupBarSlotCtx { grouping: string[]; groupableColumns: DataTableGroupableColumn[]; applyGrouping: (cols: string[]) => void; clearGrouping: () => void; }
 
-interface SelectAllSlotCtx { checked: any; indeterminate: any; toggle: any; }
+interface SelectAllSlotCtx { checked: boolean; indeterminate: boolean; toggle: (event: any) => void; }
 
-interface PlaceholderSlotCtx { index: any; columnId: any; }
+interface PlaceholderSlotCtx { index: number; columnId: string; }
 
-interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
+interface SelectCellSlotCtx { row: any; checked: boolean; toggle: (event: any) => void; }
 
 interface DetailSlotCtx { row: any; }
 
-interface ColHeaderSlotCtx { columnId: any; column: any; label: any; }
+interface ColHeaderSlotCtx { columnId: string; column: TableColumn<any, unknown>; label: string; }
 
-interface FilterSlotCtx { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any; }
+interface FilterSlotCtx { columnId: string; value: any; uniqueValues: any[]; minMax: [number, number] | null; columnLabel: string; setFilter: (columnId: string, value: any) => void; }
 
-interface CellSlotCtx { columnId: any; column: any; row: any; value: any; }
+interface CellSlotCtx { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; }
 
-interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any; }
+interface EditorSlotCtx { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any) => void; cancel: () => void; columnLabel: string; autofocus: boolean; }
 
 interface DataTableProps {
   /**
@@ -610,23 +682,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;
+  onActivecellChange?: (payload: DataTableActiveCellChangePayload) => void;
+  onCellEditCommit?: (payload: DataTableCellEditCommitPayload) => void;
+  onExpandChange?: (payload: ExpandedState) => void;
+  onFilterChange?: (payload: DataTableFilterChangePayload) => void;
+  onGroupChange?: (payload: GroupingState) => void;
+  onHistoryChange?: (payload: DataTableHistoryChangePayload) => void;
+  onPageChange?: (payload: PaginationState) => void;
+  onPinChange?: (payload: ColumnPinningState) => void;
+  onRangeChange?: (payload: DataTableRangeChangePayload) => void;
+  onReorderChange?: (payload: ColumnOrderState) => void;
+  onResizeChange?: (payload: ColumnSizingState) => void;
+  onRowActivate?: (payload: DataTableRowActivatePayload) => void;
+  onRowEditCommit?: (payload: DataTableRowEditCommitPayload) => void;
+  onSelectionChange?: (payload: RowSelectionState) => void;
+  onSortChange?: (payload: SortingState) => void;
+  onVisibilityChange?: (payload: VisibilityState) => void;
+  onVisibleRangeChange?: (payload: DataTableVisibleRangeChangePayload) => void;
   // D-131: default slot resolved via children() at body top
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
@@ -638,52 +710,52 @@ interface DataTableProps {
   filterSlot?: (ctx: FilterSlotCtx) => JSX.Element;
   cellSlot?: (ctx: CellSlotCtx) => JSX.Element;
   editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
-  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: any; column: any; label: any }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
+  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; label: string }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: string; value: any; uniqueValues: any[]; minMax: [number, number] | null; columnLabel: string; setFilter: (columnId: string, value: any) => void }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any) => void; cancel: () => void; columnLabel: string; autofocus: boolean }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
   ref?: (h: DataTableHandle) => void;
 }
 
 export interface DataTableHandle {
-  sortColumn: (...args: any[]) => any;
-  clearSorting: (...args: any[]) => any;
-  toggleRowExpanded: (...args: any[]) => any;
-  expandAll: (...args: any[]) => any;
-  collapseAll: (...args: any[]) => any;
-  getExpandedRows: (...args: any[]) => any;
-  applyGrouping: (...args: any[]) => any;
-  clearGrouping: (...args: any[]) => any;
-  getFacetedUniqueValues: (...args: any[]) => any;
-  getFacetedMinMaxValues: (...args: any[]) => any;
-  getColumnDefs: (...args: any[]) => any;
-  toggleAllRows: (...args: any[]) => any;
-  clearSelection: (...args: any[]) => any;
-  getSelectedRows: (...args: any[]) => any;
-  setPage: (...args: any[]) => any;
-  setRowsPerPage: (...args: any[]) => any;
-  toggleColumnVisibility: (...args: any[]) => any;
-  applyColumnOrder: (...args: any[]) => any;
-  resetColumnSizing: (...args: any[]) => any;
-  pinColumn: (...args: any[]) => any;
-  focusCell: (...args: any[]) => any;
-  getActiveCell: (...args: any[]) => any;
-  clearActiveCell: (...args: any[]) => any;
+  sortColumn: (colId: string, desc?: boolean) => void;
+  clearSorting: () => void;
+  toggleRowExpanded: (rowId: string | number) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  getExpandedRows: () => any[];
+  applyGrouping: (cols: string[]) => void;
+  clearGrouping: () => void;
+  getFacetedUniqueValues: (colId: string) => any[];
+  getFacetedMinMaxValues: (colId: string) => [number, number] | null;
+  getColumnDefs: () => ColumnDef<any, any>[];
+  toggleAllRows: (value?: boolean) => void;
+  clearSelection: () => void;
+  getSelectedRows: () => any[];
+  setPage: (idx: number) => void;
+  setRowsPerPage: (size: number) => void;
+  toggleColumnVisibility: (colId: string) => void;
+  applyColumnOrder: (order: string[]) => void;
+  resetColumnSizing: () => void;
+  pinColumn: (colId: string, side: 'left' | 'right' | false) => void;
+  focusCell: (rowIndex: number, colIndex: number) => void;
+  getActiveCell: () => DataTableActiveCell;
+  clearActiveCell: () => void;
   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;
-  editRow: (...args: any[]) => any;
-  getSelectedRange: (...args: any[]) => any;
-  cut: (...args: any[]) => any;
-  undo: (...args: any[]) => any;
-  redo: (...args: any[]) => any;
-  canUndo: (...args: any[]) => any;
-  canRedo: (...args: any[]) => any;
-  clearHistory: (...args: any[]) => any;
+  getScrollElement: () => HTMLElement | null;
+  getRowIndexRelativeToPage: (absRow?: number) => number;
+  editCell: (rowIndex: number, colIndex: number) => void;
+  commitEditing: () => void;
+  editRow: (rowIndex: number) => void;
+  getSelectedRange: () => DataTableRange;
+  cut: () => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  clearHistory: () => void;
 }
 
 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 [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', 'onActivecellChange', 'onCellEditCommit', 'onExpandChange', 'onFilterChange', 'onGroupChange', 'onHistoryChange', 'onPageChange', 'onPinChange', 'onRangeChange', 'onReorderChange', 'onResizeChange', 'onRowActivate', 'onRowEditCommit', 'onSelectionChange', 'onSortChange', 'onVisibilityChange', 'onVisibleRangeChange']);
   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, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
 

package/src/index.ts

@@ -14,3 +14,4 @@ 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, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }. */
 export type { DataTableHandle } from './DataTable';
+export type * from './DataTable';