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

package/dist/index.d.cts

@@ -12,6 +12,10 @@ interface SelectAllSlotCtx {
   indeterminate: any;
   toggle: any;
 }
+interface PlaceholderSlotCtx {
+  index: any;
+  columnId: any;
+}
 interface SelectCellSlotCtx {
   row: any;
   checked: any;
@@ -30,6 +34,7 @@ interface FilterSlotCtx {
   value: any;
   uniqueValues: any;
   minMax: any;
+  columnLabel: any;
   setFilter: any;
 }
 interface CellSlotCtx {
@@ -45,6 +50,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  columnLabel: any;
   autofocus: any;
 }
 interface DataTableProps {
@@ -110,6 +116,10 @@ interface DataTableProps {
   expanded?: (Record<string, any> | boolean) | null;
   defaultExpanded?: (Record<string, any> | boolean) | null;
   onExpandedChange?: (expanded: (Record<string, any> | boolean) | null) => void;
+  /**
+   * Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
+   */
+  getRowId?: ((...args: any[]) => any) | null;
   /**
    * Table-level child-row accessor `(originalRow, index) => TData[] | undefined` that drives nested sub-rows. When supplied (with `expandable`), table-core flattens the hierarchy and the expand seam reveals depth-indented child rows. Null → the `#detail` scoped slot is the expand mode.
    */
@@ -201,13 +211,16 @@ interface DataTableProps {
   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;
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
+  placeholderSlot?: (ctx: PlaceholderSlotCtx) => JSX.Element;
   selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
   detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
   colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
@@ -225,6 +238,7 @@ interface DataTableProps {
       value: any;
       uniqueValues: any;
       minMax: any;
+      columnLabel: any;
       setFilter: any;
     }) => JSX.Element) | undefined;
     [key: `cell-${string}`]: ((ctx: {
@@ -240,6 +254,7 @@ interface DataTableProps {
       value: any;
       commit: any;
       cancel: any;
+      columnLabel: any;
       autofocus: any;
     }) => JSX.Element) | undefined;
     [key: string]: ((...args: any[]) => JSX.Element) | undefined;
@@ -313,7 +328,7 @@ interface ColumnProps {
    */
   pinned?: string;
   /**
-   * Optional fixed/initial column width — a CSS length string or a px number.
+   * Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
    */
   width?: string | number;
   /**
@@ -377,6 +392,10 @@ interface EditorTextProps {
    * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
    */
   autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion
@@ -406,6 +425,14 @@ interface EditorNumberProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorNumber(_props: EditorNumberProps): JSX.Element;
 //#endregion
@@ -439,6 +466,14 @@ interface EditorSelectProps {
    * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
    */
   options?: any[];
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorSelect(_props: EditorSelectProps): JSX.Element;
 //#endregion
@@ -468,6 +503,14 @@ interface EditorCheckboxProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element;
 //#endregion
@@ -497,6 +540,14 @@ interface EditorDateProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorDate(_props: EditorDateProps): JSX.Element;
 //#endregion
@@ -518,6 +569,10 @@ interface FilterTextProps {
    * `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
    */
   setFilter?: ((...args: any[]) => any) | null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterText(_props: FilterTextProps): JSX.Element;
 //#endregion
@@ -543,6 +598,10 @@ interface FilterNumberRangeProps {
    * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
    */
   minMax?: (unknown) | null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element;
 //#endregion
@@ -568,6 +627,10 @@ interface FilterSelectProps {
    * The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
    */
   uniqueValues?: any[];
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterSelect(_props: FilterSelectProps): JSX.Element;
 //#endregion

package/dist/index.d.mts

@@ -12,6 +12,10 @@ interface SelectAllSlotCtx {
   indeterminate: any;
   toggle: any;
 }
+interface PlaceholderSlotCtx {
+  index: any;
+  columnId: any;
+}
 interface SelectCellSlotCtx {
   row: any;
   checked: any;
@@ -30,6 +34,7 @@ interface FilterSlotCtx {
   value: any;
   uniqueValues: any;
   minMax: any;
+  columnLabel: any;
   setFilter: any;
 }
 interface CellSlotCtx {
@@ -45,6 +50,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  columnLabel: any;
   autofocus: any;
 }
 interface DataTableProps {
@@ -110,6 +116,10 @@ interface DataTableProps {
   expanded?: (Record<string, any> | boolean) | null;
   defaultExpanded?: (Record<string, any> | boolean) | null;
   onExpandedChange?: (expanded: (Record<string, any> | boolean) | null) => void;
+  /**
+   * Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
+   */
+  getRowId?: ((...args: any[]) => any) | null;
   /**
    * Table-level child-row accessor `(originalRow, index) => TData[] | undefined` that drives nested sub-rows. When supplied (with `expandable`), table-core flattens the hierarchy and the expand seam reveals depth-indented child rows. Null → the `#detail` scoped slot is the expand mode.
    */
@@ -201,13 +211,16 @@ interface DataTableProps {
   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;
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
+  placeholderSlot?: (ctx: PlaceholderSlotCtx) => JSX.Element;
   selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
   detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
   colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
@@ -225,6 +238,7 @@ interface DataTableProps {
       value: any;
       uniqueValues: any;
       minMax: any;
+      columnLabel: any;
       setFilter: any;
     }) => JSX.Element) | undefined;
     [key: `cell-${string}`]: ((ctx: {
@@ -240,6 +254,7 @@ interface DataTableProps {
       value: any;
       commit: any;
       cancel: any;
+      columnLabel: any;
       autofocus: any;
     }) => JSX.Element) | undefined;
     [key: string]: ((...args: any[]) => JSX.Element) | undefined;
@@ -313,7 +328,7 @@ interface ColumnProps {
    */
   pinned?: string;
   /**
-   * Optional fixed/initial column width — a CSS length string or a px number.
+   * Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
    */
   width?: string | number;
   /**
@@ -377,6 +392,10 @@ interface EditorTextProps {
    * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
    */
   autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion
@@ -406,6 +425,14 @@ interface EditorNumberProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorNumber(_props: EditorNumberProps): JSX.Element;
 //#endregion
@@ -439,6 +466,14 @@ interface EditorSelectProps {
    * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
    */
   options?: any[];
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorSelect(_props: EditorSelectProps): JSX.Element;
 //#endregion
@@ -468,6 +503,14 @@ interface EditorCheckboxProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element;
 //#endregion
@@ -497,6 +540,14 @@ interface EditorDateProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function EditorDate(_props: EditorDateProps): JSX.Element;
 //#endregion
@@ -518,6 +569,10 @@ interface FilterTextProps {
    * `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
    */
   setFilter?: ((...args: any[]) => any) | null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterText(_props: FilterTextProps): JSX.Element;
 //#endregion
@@ -543,6 +598,10 @@ interface FilterNumberRangeProps {
    * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
    */
   minMax?: (unknown) | null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element;
 //#endregion
@@ -568,6 +627,10 @@ interface FilterSelectProps {
    * The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
    */
   uniqueValues?: any[];
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 declare function FilterSelect(_props: FilterSelectProps): JSX.Element;
 //#endregion