@redis-ui/table 2.18.0 → 2.22.0

package/dist/Table/components/TableHeaderCell/components/Compose/Compose.js

@@ -4,30 +4,38 @@ import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visu
 import { useMemo } from "react";
 import { normalizeCellSpan, getCurrentAriaSort } from "../../TableHeaderCell.utils.js";
 import { TableHeaderCellContextProvider } from "../../TableHeaderCell.context.js";
+import { getWidth } from "../../../../utils/table.utils.js";
 import { TableTh } from "../../../../Table.style.js";
 const TableHeaderCellCompose = forwardRefWithGenerics(({
   header,
   children,
   ...restProps
 }, ref) => {
+  var _a, _b;
   const colSpan = normalizeCellSpan(header.colSpan);
   const rowSpan = normalizeCellSpan(header.rowSpan);
+  const {
+    column
+  } = header;
+  const columnCellProps = (_b = (_a = column.columnDef).getHeaderCellProps) == null ? void 0 : _b.call(_a, header);
   return jsxRuntimeExports.jsx(TableHeaderCellContextProvider, {
     value: useMemo(() => ({
       header
     }), [header]),
     children: jsxRuntimeExports.jsx(TableTh, {
       ...restProps,
+      ...columnCellProps,
       ref,
       colSpan,
       rowSpan,
       style: {
-        width: header.column.getSize(),
-        ...restProps.style
+        width: getWidth(column),
+        ...restProps.style,
+        ...columnCellProps == null ? void 0 : columnCellProps.style
       },
       "aria-hidden": header.isPlaceholder,
-      onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
-      "aria-sort": header.column.getCanSort() ? getCurrentAriaSort(header) : void 0,
+      onClick: column.getCanSort() ? column.getToggleSortingHandler() : void 0,
+      "aria-sort": column.getCanSort() ? getCurrentAriaSort(header) : void 0,
       scope: "col",
       children: header.isPlaceholder ? jsxRuntimeExports.jsx(VisuallyHidden, {
         children: "Placeholder"

package/dist/Table/components/TableHeaderCell/components/Compose/Compose.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.cjs

@@ -8,15 +8,16 @@ const TableHeaderCell_context = require("../../TableHeaderCell.context.cjs");
 const Table_style = require("../../../../Table.style.cjs");
 const DEFAULT_HIDDEN_HEADER = "Actions";
 const TableHeaderCellHeading = (props) => {
-  var _a;
   const {
     header
   } = TableHeaderCell_context.useTableHeaderCellContext();
   const content = index.flexRender(header.column.columnDef.header, header.getContext());
-  if (header.column.columnDef.isHeaderCustom) return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
-    children: content
-  });
-  const text = (_a = redisUiComponents.childrenToString(content)) == null ? void 0 : _a.trim();
+  if (header.column.columnDef.isHeaderCustom) {
+    return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+      children: content
+    });
+  }
+  const text = typeof content === "string" ? content.trim() : content;
   if (!text || header.column.columnDef.isHeaderHidden) {
     return jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
       children: text || DEFAULT_HIDDEN_HEADER

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.js

@@ -1,20 +1,21 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { flexRender } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { childrenToString, isTextualNode } from "@redislabsdev/redis-ui-components";
+import { isTextualNode } from "@redislabsdev/redis-ui-components";
 import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
 import { useTableHeaderCellContext } from "../../TableHeaderCell.context.js";
 import { HeaderTitleWrapper } from "../../../../Table.style.js";
 const DEFAULT_HIDDEN_HEADER = "Actions";
 const TableHeaderCellHeading = (props) => {
-  var _a;
   const {
     header
   } = useTableHeaderCellContext();
   const content = flexRender(header.column.columnDef.header, header.getContext());
-  if (header.column.columnDef.isHeaderCustom) return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-    children: content
-  });
-  const text = (_a = childrenToString(content)) == null ? void 0 : _a.trim();
+  if (header.column.columnDef.isHeaderCustom) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+      children: content
+    });
+  }
+  const text = typeof content === "string" ? content.trim() : content;
   if (!text || header.column.columnDef.isHeaderHidden) {
     return jsxRuntimeExports.jsx(VisuallyHidden, {
       children: text || DEFAULT_HIDDEN_HEADER

package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
 export declare const SortableHeading: (({ children, ...restProps }: ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ((props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ((props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
         SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     };
     SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.cjs

@@ -14,6 +14,7 @@ const SortableHeadingCompose = Object.assign((props) => {
     {
       "aria-description": TableHeaderCell_utils.getColumnSortLabel(header, TableHeaderCell_utils.formatColumnSortNotification),
       ...props,
+      "$custom": header.column.columnDef.isHeaderCustom || false,
       as: header.column.getCanSort() ? void 0 : "div"
     }
   );

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.js

@@ -12,6 +12,7 @@ const SortableHeadingCompose = Object.assign((props) => {
     {
       "aria-description": getColumnSortLabel(header, formatColumnSortNotification),
       ...props,
+      "$custom": header.column.columnDef.isHeaderCustom || false,
       as: header.column.getCanSort() ? void 0 : "div"
     }
   );

package/dist/Table/components/TableRoot/TableRoot.cjs

@@ -1,5 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Table_style = require("../../Table.style.cjs");
-const TableRoot = Table_style.Table;
+const RowNavigationPlugin = require("../../plugins/RowNavigationPlugin.cjs");
+const TableRoot = (props) => {
+  const navigationProps = RowNavigationPlugin.useHandleRowNavigationOnTable(props);
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.Table, {
+    ...props,
+    ...navigationProps
+  });
+};
 exports.TableRoot = TableRoot;

package/dist/Table/components/TableRoot/TableRoot.d.ts

@@ -1 +1,2 @@
-export declare const TableRoot: import("styled-components").StyledComponent<"table", any, {}, never>;
+import { HTMLAttributes } from 'react';
+export declare const TableRoot: (props: HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableRoot/TableRoot.js

@@ -1,5 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { Table } from "../../Table.style.js";
-const TableRoot = Table;
+import { useHandleRowNavigationOnTable } from "../../plugins/RowNavigationPlugin.js";
+const TableRoot = (props) => {
+  const navigationProps = useHandleRowNavigationOnTable(props);
+  return jsxRuntimeExports.jsx(Table, {
+    ...props,
+    ...navigationProps
+  });
+};
 export {
   TableRoot
 };

package/dist/Table/plugins/ExpandableRowPlugin.cjs

@@ -7,21 +7,27 @@ const index = require("../../node_modules/@tanstack/table-core/build/lib/index.c
 const getTrue = () => true;
 const TableExpandableRowContextKey = "expandableRow";
 const useExpandableRowPlugin = ({
+  defaultExpanded,
   getRowCanExpand,
   renderExpandedRow,
   expandRowOnClick,
-  expandedRowComponent
+  expandedRowComponent,
+  getSubRows
 }) => {
   const clickablePluginData = ClickableRowPlugin.useClickableRowPlugin({
     getCanRowClick: (row) => !!(expandRowOnClick && row.getCanExpand()),
     onRowClick: (row) => row.toggleExpanded(),
     shouldClickOnEnter: true
   });
-  const isExpandable = !!renderExpandedRow;
-  return isExpandable ? {
+  if (!renderExpandedRow && !getSubRows) return void 0;
+  return {
     tableOptions: {
       getExpandedRowModel: index.getExpandedRowModel(),
-      getRowCanExpand: getRowCanExpand || getTrue
+      getRowCanExpand: getRowCanExpand || (getSubRows ? void 0 : getTrue),
+      getSubRows,
+      initialState: defaultExpanded ? {
+        expanded: defaultExpanded
+      } : void 0
     },
     context: {
       ...plugin_utils.buildPluginContext(TableExpandableRowContextKey, {
@@ -30,7 +36,7 @@ const useExpandableRowPlugin = ({
       }),
       ...expandRowOnClick ? clickablePluginData == null ? void 0 : clickablePluginData.context : null
     }
-  } : void 0;
+  };
 };
 const useExpandableRowContext = () => Table_context.usePluginContext(TableExpandableRowContextKey);
 exports.TableExpandableRowContextKey = TableExpandableRowContextKey;

package/dist/Table/plugins/ExpandableRowPlugin.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, ReactNode } from 'react';
 import { type Row } from '@tanstack/react-table';
+import { ExpandedState } from '@tanstack/table-core/src/features/RowExpanding';
 import { TablePluginData } from '../utils/plugin.utils';
 import type { TableExpandedRowProps } from '../components/TableExpandedRow';
 export declare const TableExpandableRowContextKey = "expandableRow";
@@ -17,6 +18,11 @@ export interface TableExpandableRowParams<T extends object> extends TableExpanda
     expandRowOnClick?: boolean;
     /** Allows individual rows to be expandable */
     getRowCanExpand?: (row: Row<T>) => boolean;
+    /**
+     * Enables tree-list (hierarchical) data.<br/>
+     * When this prop is set, the `renderExpandedRow` and `expandedRowComponent` parameters are not used. */
+    getSubRows?: (rowData: T, index: number) => T[] | undefined;
+    defaultExpanded?: ExpandedState;
 }
-export declare const useExpandableRowPlugin: <T extends object>({ getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent }: TableExpandableRowParams<T>) => TablePluginData<T>;
+export declare const useExpandableRowPlugin: <T extends object>({ defaultExpanded, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: TableExpandableRowParams<T>) => TablePluginData<T>;
 export declare const useExpandableRowContext: <T extends object>() => TableExpandableRowContext<T> | undefined;

package/dist/Table/plugins/ExpandableRowPlugin.js

@@ -5,21 +5,27 @@ import { getExpandedRowModel } from "../../node_modules/@tanstack/table-core/bui
 const getTrue = () => true;
 const TableExpandableRowContextKey = "expandableRow";
 const useExpandableRowPlugin = ({
+  defaultExpanded,
   getRowCanExpand,
   renderExpandedRow,
   expandRowOnClick,
-  expandedRowComponent
+  expandedRowComponent,
+  getSubRows
 }) => {
   const clickablePluginData = useClickableRowPlugin({
     getCanRowClick: (row) => !!(expandRowOnClick && row.getCanExpand()),
     onRowClick: (row) => row.toggleExpanded(),
     shouldClickOnEnter: true
   });
-  const isExpandable = !!renderExpandedRow;
-  return isExpandable ? {
+  if (!renderExpandedRow && !getSubRows) return void 0;
+  return {
     tableOptions: {
       getExpandedRowModel: getExpandedRowModel(),
-      getRowCanExpand: getRowCanExpand || getTrue
+      getRowCanExpand: getRowCanExpand || (getSubRows ? void 0 : getTrue),
+      getSubRows,
+      initialState: defaultExpanded ? {
+        expanded: defaultExpanded
+      } : void 0
     },
     context: {
       ...buildPluginContext(TableExpandableRowContextKey, {
@@ -28,7 +34,7 @@ const useExpandableRowPlugin = ({
       }),
       ...expandRowOnClick ? clickablePluginData == null ? void 0 : clickablePluginData.context : null
     }
-  } : void 0;
+  };
 };
 const useExpandableRowContext = () => usePluginContext(TableExpandableRowContextKey);
 export {

package/dist/Table/plugins/RowNavigationPlugin.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const index = require("../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const plugin_utils = require("../utils/plugin.utils.cjs");
+const Table_context = require("../Table.context.cjs");
+const TableRowNavigationContextKey = "RowNavigation";
+const useRowNavigationPlugin = ({
+  enableRowNavigation = true
+}) => {
+  const [activeRowId, setActiveRowId] = React.useState();
+  const rowRefs = React.useRef(/* @__PURE__ */ new Map());
+  const unregisterRow = React.useCallback((rowId) => {
+    rowRefs.current.delete(rowId);
+  }, []);
+  const registerRow = React.useCallback((rowId, rowEl) => {
+    if (rowEl) rowRefs.current.set(rowId, rowEl);
+    else unregisterRow(rowId);
+  }, [unregisterRow]);
+  const goToRowId = (rowId, noScroll) => {
+    var _a;
+    return rowId && ((_a = rowRefs.current.get(rowId)) == null ? void 0 : _a.focus({
+      preventScroll: noScroll
+    }));
+  };
+  const getGoToRow = (getTargetRow) => (table) => {
+    const {
+      rows
+    } = table.getRowModel();
+    if (!rows.length) return false;
+    const targetRow = getTargetRow(rows);
+    if (!targetRow) return false;
+    setActiveRowId(targetRow.id);
+    goToRowId(targetRow.id);
+    return true;
+  };
+  const findActiveIndex = (rows) => rows.findIndex((row) => row.id === activeRowId);
+  const goToNextRow = getGoToRow((rows) => activeRowId && rows[findActiveIndex(rows) + 1] || rows.at(0));
+  const goToPrevRow = getGoToRow((rows) => activeRowId && rows[findActiveIndex(rows) - 1] || rows.at(-1));
+  const goToFirstRow = getGoToRow((rows) => rows.at(0));
+  const goToLastRow = getGoToRow((rows) => rows.at(-1));
+  return enableRowNavigation ? {
+    tableOptions: {},
+    context: plugin_utils.buildPluginContext(TableRowNavigationContextKey, {
+      registerRow,
+      unregisterRow,
+      activeRowId,
+      setActiveRowId,
+      goToNextRow,
+      goToPrevRow,
+      goToFirstRow,
+      goToLastRow,
+      goToRowId
+    })
+  } : void 0;
+};
+const useRowNavigationContext = () => Table_context.usePluginContext(TableRowNavigationContextKey);
+const useHandleRowNavigationOnRow = ({
+  row,
+  onFocus,
+  ref
+}) => {
+  const {
+    registerRow,
+    setActiveRowId,
+    activeRowId
+  } = useRowNavigationContext() || {};
+  const innerRowRef = registerRow && ((rowEl) => registerRow(row.id, rowEl));
+  const composedRowRef = index.useComposedRefs(ref, innerRowRef);
+  const handleFocus = redisUiComponents.combineHandlers(setActiveRowId && (() => setActiveRowId(row.id)), onFocus);
+  return {
+    ref: composedRowRef,
+    onFocus: handleFocus,
+    ...setActiveRowId && {
+      tabIndex: activeRowId === row.id ? 0 : -1
+    }
+  };
+};
+const useHandleRowNavigationOnTable = ({
+  onKeyDown,
+  onFocus
+}) => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  const nav = useRowNavigationContext();
+  if (!nav) {
+    return {
+      ...onKeyDown && {
+        onKeyDown
+      },
+      ...onFocus && {
+        onFocus
+      }
+    };
+  }
+  const {
+    goToNextRow,
+    goToPrevRow,
+    goToFirstRow,
+    goToLastRow,
+    goToRowId,
+    activeRowId
+  } = nav;
+  const handleKeyDown = redisUiComponents.combineHandlers((e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      goToNextRow(table);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      goToPrevRow(table);
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      goToFirstRow(table);
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      goToLastRow(table);
+    }
+  }, onKeyDown);
+  const handleFocus = redisUiComponents.combineHandlers((e) => {
+    if (e.target === e.currentTarget) {
+      goToRowId(activeRowId, !e.target.matches(":focus-visible"));
+    }
+  }, onFocus);
+  return {
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    tabIndex: 0
+  };
+};
+exports.TableRowNavigationContextKey = TableRowNavigationContextKey;
+exports.useHandleRowNavigationOnRow = useHandleRowNavigationOnRow;
+exports.useHandleRowNavigationOnTable = useHandleRowNavigationOnTable;
+exports.useRowNavigationContext = useRowNavigationContext;
+exports.useRowNavigationPlugin = useRowNavigationPlugin;

package/dist/Table/plugins/RowNavigationPlugin.d.ts

@@ -0,0 +1,44 @@
+import { FocusEventHandler, KeyboardEventHandler, Ref } from 'react';
+import { Row, Table } from '@tanstack/react-table';
+import { TablePluginData } from '../utils/plugin.utils';
+export declare const TableRowNavigationContextKey = "RowNavigation";
+export type TableRowNavigationContext = {
+    registerRow: (rowId: string, rowEl: HTMLTableRowElement | null) => void;
+    unregisterRow: (rowId: string) => void;
+    activeRowId: string | undefined;
+    setActiveRowId: (rowId: string) => void;
+    goToNextRow: (table: Table<object>) => void;
+    goToPrevRow: (table: Table<object>) => void;
+    goToFirstRow: (table: Table<object>) => void;
+    goToLastRow: (table: Table<object>) => void;
+    goToRowId: (rowId: string | undefined, noScroll?: boolean) => void;
+};
+export type TableRowNavigationParams = {
+    enableRowNavigation?: boolean;
+};
+export declare const useRowNavigationPlugin: <T extends object>({ enableRowNavigation }: TableRowNavigationParams) => TablePluginData<T>;
+export declare const useRowNavigationContext: () => TableRowNavigationContext | undefined;
+type UseHandleRowNavigationOnRowParams<T extends object> = {
+    row: Row<T>;
+    onFocus?: FocusEventHandler<HTMLTableRowElement>;
+    ref?: Ref<HTMLTableRowElement>;
+};
+export declare const useHandleRowNavigationOnRow: <T extends object>({ row, onFocus, ref }: UseHandleRowNavigationOnRowParams<T>) => {
+    tabIndex?: number | undefined;
+    ref: (node: HTMLTableRowElement) => void;
+    onFocus: FocusEventHandler<HTMLTableRowElement> | undefined;
+};
+type UseHandleRowNavigationOnTableParams = {
+    onKeyDown?: KeyboardEventHandler<HTMLTableElement>;
+    onFocus?: FocusEventHandler<HTMLTableElement>;
+};
+export declare const useHandleRowNavigationOnTable: ({ onKeyDown, onFocus }: UseHandleRowNavigationOnTableParams) => {
+    onFocus?: FocusEventHandler<HTMLTableElement> | undefined;
+    onKeyDown?: KeyboardEventHandler<HTMLTableElement> | undefined;
+    tabIndex?: undefined;
+} | {
+    onKeyDown: KeyboardEventHandler<HTMLTableElement> | undefined;
+    onFocus: FocusEventHandler<HTMLTableElement> | undefined;
+    tabIndex: number;
+};
+export {};

package/dist/Table/plugins/RowNavigationPlugin.js

@@ -0,0 +1,139 @@
+import { useState, useRef, useCallback } from "react";
+import { combineHandlers } from "@redislabsdev/redis-ui-components";
+import { useComposedRefs } from "../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { buildPluginContext } from "../utils/plugin.utils.js";
+import { usePluginContext, useTableContext } from "../Table.context.js";
+const TableRowNavigationContextKey = "RowNavigation";
+const useRowNavigationPlugin = ({
+  enableRowNavigation = true
+}) => {
+  const [activeRowId, setActiveRowId] = useState();
+  const rowRefs = useRef(/* @__PURE__ */ new Map());
+  const unregisterRow = useCallback((rowId) => {
+    rowRefs.current.delete(rowId);
+  }, []);
+  const registerRow = useCallback((rowId, rowEl) => {
+    if (rowEl) rowRefs.current.set(rowId, rowEl);
+    else unregisterRow(rowId);
+  }, [unregisterRow]);
+  const goToRowId = (rowId, noScroll) => {
+    var _a;
+    return rowId && ((_a = rowRefs.current.get(rowId)) == null ? void 0 : _a.focus({
+      preventScroll: noScroll
+    }));
+  };
+  const getGoToRow = (getTargetRow) => (table) => {
+    const {
+      rows
+    } = table.getRowModel();
+    if (!rows.length) return false;
+    const targetRow = getTargetRow(rows);
+    if (!targetRow) return false;
+    setActiveRowId(targetRow.id);
+    goToRowId(targetRow.id);
+    return true;
+  };
+  const findActiveIndex = (rows) => rows.findIndex((row) => row.id === activeRowId);
+  const goToNextRow = getGoToRow((rows) => activeRowId && rows[findActiveIndex(rows) + 1] || rows.at(0));
+  const goToPrevRow = getGoToRow((rows) => activeRowId && rows[findActiveIndex(rows) - 1] || rows.at(-1));
+  const goToFirstRow = getGoToRow((rows) => rows.at(0));
+  const goToLastRow = getGoToRow((rows) => rows.at(-1));
+  return enableRowNavigation ? {
+    tableOptions: {},
+    context: buildPluginContext(TableRowNavigationContextKey, {
+      registerRow,
+      unregisterRow,
+      activeRowId,
+      setActiveRowId,
+      goToNextRow,
+      goToPrevRow,
+      goToFirstRow,
+      goToLastRow,
+      goToRowId
+    })
+  } : void 0;
+};
+const useRowNavigationContext = () => usePluginContext(TableRowNavigationContextKey);
+const useHandleRowNavigationOnRow = ({
+  row,
+  onFocus,
+  ref
+}) => {
+  const {
+    registerRow,
+    setActiveRowId,
+    activeRowId
+  } = useRowNavigationContext() || {};
+  const innerRowRef = registerRow && ((rowEl) => registerRow(row.id, rowEl));
+  const composedRowRef = useComposedRefs(ref, innerRowRef);
+  const handleFocus = combineHandlers(setActiveRowId && (() => setActiveRowId(row.id)), onFocus);
+  return {
+    ref: composedRowRef,
+    onFocus: handleFocus,
+    ...setActiveRowId && {
+      tabIndex: activeRowId === row.id ? 0 : -1
+    }
+  };
+};
+const useHandleRowNavigationOnTable = ({
+  onKeyDown,
+  onFocus
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const nav = useRowNavigationContext();
+  if (!nav) {
+    return {
+      ...onKeyDown && {
+        onKeyDown
+      },
+      ...onFocus && {
+        onFocus
+      }
+    };
+  }
+  const {
+    goToNextRow,
+    goToPrevRow,
+    goToFirstRow,
+    goToLastRow,
+    goToRowId,
+    activeRowId
+  } = nav;
+  const handleKeyDown = combineHandlers((e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      goToNextRow(table);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      goToPrevRow(table);
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      goToFirstRow(table);
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      goToLastRow(table);
+    }
+  }, onKeyDown);
+  const handleFocus = combineHandlers((e) => {
+    if (e.target === e.currentTarget) {
+      goToRowId(activeRowId, !e.target.matches(":focus-visible"));
+    }
+  }, onFocus);
+  return {
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    tabIndex: 0
+  };
+};
+export {
+  TableRowNavigationContextKey,
+  useHandleRowNavigationOnRow,
+  useHandleRowNavigationOnTable,
+  useRowNavigationContext,
+  useRowNavigationPlugin
+};

package/dist/Table/plugins/SortingPlugin.cjs

@@ -13,7 +13,7 @@ const useSortingPlugin = ({
   manualSorting = false,
   enableSorting = true
   // added plugin is enabled by default
-}) => {
+} = {}) => {
   const [sortedByUser, setSortedByUser] = React.useState(false);
   const [sortingState, setSortingState] = index.useControllableState({
     prop: sorting,

package/dist/Table/plugins/SortingPlugin.d.ts

@@ -14,5 +14,5 @@ export interface TableSortingParams {
     /** Set false to disable sorting */
     enableSorting?: boolean;
 }
-export declare const useSortingPlugin: <T extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }: TableSortingParams) => TablePluginData<T>;
+export declare const useSortingPlugin: <T extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }?: TableSortingParams) => TablePluginData<T>;
 export declare const useSortingContext: () => TableSortingContext | undefined;

package/dist/Table/plugins/SortingPlugin.js

@@ -11,7 +11,7 @@ const useSortingPlugin = ({
   manualSorting = false,
   enableSorting = true
   // added plugin is enabled by default
-}) => {
+} = {}) => {
   const [sortedByUser, setSortedByUser] = useState(false);
   const [sortingState, setSortingState] = useControllableState({
     prop: sorting,

package/dist/Table/tanStackExtendedTypes.d.ts

@@ -1,11 +1,20 @@
 import '@tanstack/table-core';
+import { Cell, Header } from '@tanstack/react-table';
+import { HTMLAttributes } from 'react';
 declare module '@tanstack/table-core' {
+    type CellSizingUnits = 'fraction' | 'px' | 'rem';
     interface StringHeaderIdentifier {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
+        sizeUnit?: CellSizingUnits;
+        getHeaderCellProps?: VoidFunction;
+        getCellProps?: VoidFunction;
     }
     interface IdIdentifier<TData, TValue> {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
+        sizeUnit?: CellSizingUnits;
+        getHeaderCellProps?: (header: Header<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
+        getCellProps?: (data: TData, cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
     }
 }

package/dist/Table/utils/plugin.utils.d.ts

@@ -1,6 +1,6 @@
 import { TableOptions } from '@tanstack/table-core';
 import { RowData } from '@tanstack/react-table';
-export type PartialTableOptions<T extends RowData> = Partial<Omit<TableOptions<T>, 'columns' | 'data' | 'getRowId' | 'getSubRows' | 'onStateChange' | 'getCoreRowModel' | 'defaultColumn' | 'debugTable' | 'debugRows' | 'debugHeaders' | 'debugColumns' | 'debugCells' | 'debugAll' | 'autoResetAll' | 'meta'>>;
+export type PartialTableOptions<T extends RowData> = Partial<Omit<TableOptions<T>, 'columns' | 'data' | 'getRowId' | 'onStateChange' | 'getCoreRowModel' | 'defaultColumn' | 'debugTable' | 'debugRows' | 'debugHeaders' | 'debugColumns' | 'debugCells' | 'debugAll' | 'autoResetAll' | 'meta'>>;
 export type TablePluginData<T extends RowData> = {
     /** Partial table options that will be smartly merged with other table options */
     tableOptions: PartialTableOptions<T>;

package/dist/Table/utils/table.utils.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getWidth = (column) => {
+  const size = column.getSize();
+  if (!size) return 0;
+  if (column.getCanResize()) return size;
+  const {
+    sizeUnit
+  } = column.columnDef;
+  const unit = !sizeUnit || sizeUnit === "fraction" ? "%" : sizeUnit;
+  return `${size}${unit}`;
+};
+exports.getWidth = getWidth;