@redis-ui/table 2.18.0 → 2.22.0

package/dist/Table/Table.cjs

@@ -14,6 +14,11 @@ const ClickableRowPlugin = require("./plugins/ClickableRowPlugin.cjs");
 const Table_context = require("./Table.context.cjs");
 const PluggableTable = require("./components/PluggableTable/PluggableTable.cjs");
 const compositionComponents = require("./components/PluggableTable/compositionComponents.cjs");
+const RowNavigationPlugin = require("./plugins/RowNavigationPlugin.cjs");
+const ShowOnRowHover_style = require("./components/ShowOnRowHover/ShowOnRowHover.style.cjs");
+const ExpandAllRowsButton = require("./components/ExpandRowButton/ExpandAllRowsButton.cjs");
+const useExpanderColumn = require("./components/ExpandRowButton/useExpanderColumn.cjs");
+const useRowSelectionColumn = require("./components/RowSelection/useRowSelectionColumn.cjs");
 const Table = Object.assign(({
   columns,
   caption,
@@ -22,6 +27,7 @@ const Table = Object.assign(({
   getRowId,
   emptyState,
   maxHeight,
+  minWidth,
   stripedRows = false,
   // sorting
   enableSorting,
@@ -30,10 +36,12 @@ const Table = Object.assign(({
   sorting,
   manualSorting,
   // row expansion
+  defaultExpanded,
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent,
+  getSubRows,
   // pagination
   pagination,
   defaultPagination,
@@ -47,7 +55,9 @@ const Table = Object.assign(({
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  // row navigation
+  enableRowNavigation = false
 }) => {
   const clickableRowPluginData = ClickableRowPlugin.useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
@@ -70,10 +80,15 @@ const Table = Object.assign(({
     paginationEnabled
   });
   const expandableRowPluginData = ExpandableRowPlugin.useExpandableRowPlugin({
+    defaultExpanded,
     expandRowOnClick,
-    getRowCanExpand: getIsRowExpandable && ((row) => getIsRowExpandable(row.original)),
+    getRowCanExpand: getIsRowExpandable && ((row) => {
+      var _a;
+      return getIsRowExpandable(row.original) && (!getSubRows || !!((_a = getSubRows(row.original, row.index)) == null ? void 0 : _a.length));
+    }),
     renderExpandedRow,
-    expandedRowComponent
+    expandedRowComponent,
+    getSubRows
   });
   const rowSelectionPluginData = RowSelectionPlugin.useRowSelectionPlugin({
     rowSelection,
@@ -82,11 +97,15 @@ const Table = Object.assign(({
     rowSelectionMode,
     getRowCanSelect
   });
+  const rowNavigationPluginData = RowNavigationPlugin.useRowNavigationPlugin({
+    enableRowNavigation
+  });
   return jsxRuntime.jsxRuntimeExports.jsx(Table.PluggableTable, {
     ...{
       data,
       columns,
       maxHeight,
+      minWidth,
       stripedRows,
       caption,
       emptyStateRender: emptyState
@@ -94,20 +113,25 @@ const Table = Object.assign(({
     tableOptions: {
       getRowId
     },
-    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData]
+    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });
 }, {
   ExpandRowButton: ExpandRowButton.ExpandRowButton,
+  ExpandAllRowsButton: ExpandAllRowsButton.ExpandAllRowsButton,
+  useExpanderColumn: useExpanderColumn.useExpanderColumn,
   ExpandedRow: TableExpandedRow.TableExpandedRow,
   AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow,
   RowSelectionButton: RowSelectionButton.RowSelectionButton,
   HeaderMultiRowSelectionButton: HeaderMultiRowSelectionButton.HeaderMultiRowSelectionButton,
+  useRowSelectionColumn: useRowSelectionColumn.useRowSelectionColumn,
+  ShowOnActiveRow: ShowOnRowHover_style.ShowOnRowHover,
   // plugins
   useClickableRowPlugin: ClickableRowPlugin.useClickableRowPlugin,
   useSortingPlugin: SortingPlugin.useSortingPlugin,
   usePaginationPlugin: PaginationPlugin.usePaginationPlugin,
   useExpandableRowPlugin: ExpandableRowPlugin.useExpandableRowPlugin,
   useRowSelectionPlugin: RowSelectionPlugin.useRowSelectionPlugin,
+  useRowNavigationPlugin: RowNavigationPlugin.useRowNavigationPlugin,
   // contexts
   useTableContext: Table_context.useTableContext,
   useComposeContext: Table_context.useComposeContext,

package/dist/Table/Table.context.d.ts

@@ -13,6 +13,7 @@ export type CompositionContextProps<T extends object> = {
 export type TableMainContextProps = {
     stripedRows?: boolean;
     maxHeight?: string;
+    minWidth?: string;
 };
 export type TableContextProps<T extends object> = TableMainContextProps & {
     table: Table<T>;

package/dist/Table/Table.d.ts

@@ -2,9 +2,9 @@
 import './tanStackExtendedTypes';
 import type { Row } from '@tanstack/react-table';
 import { TableProps } from './Table.types';
-declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, maxHeight, stripedRows, enableSorting, defaultSorting, onSortingChange, sorting, manualSorting, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: <T_1 extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, stripedRows, ...restProps }: import("./components/Compose/Compose").TableComposeProps<T_1>) => import("react/jsx-runtime").JSX.Element;
-    Root: import("styled-components").StyledComponent<"table", any, {}, never>;
+declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, maxHeight, minWidth, stripedRows, enableSorting, defaultSorting, onSortingChange, sorting, manualSorting, defaultExpanded, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, enableRowNavigation }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <T_1 extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, minWidth, stripedRows, ...restProps }: import("./components/Compose/Compose").TableComposeProps<T_1>) => import("react/jsx-runtime").JSX.Element;
+    Root: (props: import("react").HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;
     SRCaption: ({ caption }: {
         caption?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element | null;
@@ -15,8 +15,8 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
         };
         Cell: (<T_4 extends object>(props: import("./components/TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_4> & import("./components/TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
             Compose: <T_5 extends object>(props: import("./components/TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_5> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
-            SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
-                Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+            SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
+                Compose: ((props: import("@redislabsdev/redis-ui-components").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>>;
@@ -40,7 +40,7 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
         };
         ExpandableRow: <T_9 extends object>(props: import("./components/TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_9> & import("./components/TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
         Cell: (<T_10 extends object>(props: import("./components/TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_10> & import("./components/TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: import("styled-components").StyledComponent<"td", any, {}, never>;
+            Compose: <T_11 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("./components/TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_11> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
         };
     };
     Pagination: (() => import("react/jsx-runtime").JSX.Element | null) & {
@@ -67,21 +67,26 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
     };
     SRSortingNotification: typeof import("./components/TableHeaderCell/SRSortingNotification").SRSortingNotification;
     ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandRowButton").ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;
-    ExpandedRow: <T_11 extends object>({ row, keepInDom, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_11>) => import("react/jsx-runtime").JSX.Element | null;
-    AnimatedExpandedRow: <T_12 extends object>({ rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_12>) => import("react/jsx-runtime").JSX.Element;
-    RowSelectionButton: <T_13 extends object>({ row, ...restProps }: import("./components/RowSelection/RowSelectionButton").RowSelectionButtonProps<T_13>) => import("react/jsx-runtime").JSX.Element;
-    HeaderMultiRowSelectionButton: <T_14 extends object>({ table, managePage, ...restProps }: import("./components/RowSelection/HeaderMultiRowSelectionButton").HeaderMultiRowSelectionButtonProps<T_14>) => import("react/jsx-runtime").JSX.Element;
-    useClickableRowPlugin: <T_15 extends object>({ getCanRowClick, onRowClick, shouldClickOnEnter }: Partial<import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_15>>) => import(".").TablePluginData<T_15>;
-    useSortingPlugin: <T_16 extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }: import("./plugins/SortingPlugin").TableSortingParams) => import(".").TablePluginData<T_16>;
-    usePaginationPlugin: <T_17 extends object>({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled }: import("./plugins/PaginationPlugin").TablePaginationParams) => import(".").TablePluginData<T_17>;
-    useExpandableRowPlugin: <T_18 extends object>({ getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent }: import("./plugins/ExpandableRowPlugin").TableExpandableRowParams<T_18>) => import(".").TablePluginData<T_18>;
-    useRowSelectionPlugin: <T_19 extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: import("./plugins/RowSelectionPlugin").TableRowSelectionParams<T_19>) => import(".").TablePluginData<T_19>;
-    useTableContext: <T_20 extends object = object>() => import("./Table.context").TableContextProps<T_20>;
-    useComposeContext: <T_21 extends object, C extends import("./Table.context").CompositionContextProps<T_21> = import("./Table.context").CompositionContextProps<T_21>>(defaults: Partial<C>) => C;
-    useClickableRowContext: <T_22 extends object>() => import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_22> | undefined;
-    useExpandableRowContext: <T_23 extends object>() => import("./plugins/ExpandableRowPlugin").TableExpandableRowContext<T_23> | undefined;
+    ExpandAllRowsButton: ({ table, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandAllRowsButton").ExpandAllRowsButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    useExpanderColumn: <T_12 extends object>({ allowExpandAll, ...colDef }?: import("./components/ExpandRowButton/useExpanderColumn").UseExpanderColumnParams<T_12>) => import("@tanstack/react-table").ColumnDef<T_12, unknown>;
+    ExpandedRow: <T_13 extends object>({ row, keepInDom, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_13>) => import("react/jsx-runtime").JSX.Element | null;
+    AnimatedExpandedRow: <T_14 extends object>({ rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_14>) => import("react/jsx-runtime").JSX.Element;
+    RowSelectionButton: <T_15 extends object>({ row, ...restProps }: import("./components/RowSelection/RowSelectionButton").RowSelectionButtonProps<T_15>) => import("react/jsx-runtime").JSX.Element;
+    HeaderMultiRowSelectionButton: <T_16 extends object>({ table, managePage, ...restProps }: import("./components/RowSelection/HeaderMultiRowSelectionButton").HeaderMultiRowSelectionButtonProps<T_16>) => import("react/jsx-runtime").JSX.Element | null;
+    useRowSelectionColumn: <T_17 extends object>({ disableSelectAll, managePage, ...colDef }?: import("./components/RowSelection/useRowSelectionColumn").UseRowSelectionColumnParams<T_17>) => import("@tanstack/react-table").ColumnDef<T_17, unknown>;
+    ShowOnActiveRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+    useClickableRowPlugin: <T_18 extends object>({ getCanRowClick, onRowClick, shouldClickOnEnter }: Partial<import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_18>>) => import(".").TablePluginData<T_18>;
+    useSortingPlugin: <T_19 extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }?: import("./plugins/SortingPlugin").TableSortingParams) => import(".").TablePluginData<T_19>;
+    usePaginationPlugin: <T_20 extends object>({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled }: import("./plugins/PaginationPlugin").TablePaginationParams) => import(".").TablePluginData<T_20>;
+    useExpandableRowPlugin: <T_21 extends object>({ defaultExpanded, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: import("./plugins/ExpandableRowPlugin").TableExpandableRowParams<T_21>) => import(".").TablePluginData<T_21>;
+    useRowSelectionPlugin: <T_22 extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: import("./plugins/RowSelectionPlugin").TableRowSelectionParams<T_22>) => import(".").TablePluginData<T_22>;
+    useRowNavigationPlugin: <T_23 extends object>({ enableRowNavigation }: import("./plugins/RowNavigationPlugin").TableRowNavigationParams) => import(".").TablePluginData<T_23>;
+    useTableContext: <T_24 extends object = object>() => import("./Table.context").TableContextProps<T_24>;
+    useComposeContext: <T_25 extends object, C extends import("./Table.context").CompositionContextProps<T_25> = import("./Table.context").CompositionContextProps<T_25>>(defaults: Partial<C>) => C;
+    useClickableRowContext: <T_26 extends object>() => import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_26> | undefined;
+    useExpandableRowContext: <T_27 extends object>() => import("./plugins/ExpandableRowPlugin").TableExpandableRowContext<T_27> | undefined;
     usePaginationContext: () => import("./plugins/PaginationPlugin").TablePaginationContext | undefined;
     useSortingContext: () => import("./plugins/SortingPlugin").TableSortingContext | undefined;
-    PluggableTable: <T_24 extends object>({ caption, emptyStateRender, ...restProps }: import("./components/PluggableTable/PluggableTable").PluggableTableProps<T_24>) => import("react/jsx-runtime").JSX.Element;
+    PluggableTable: <T_28 extends object>({ caption, emptyStateRender, ...restProps }: import("./components/PluggableTable/PluggableTable").PluggableTableProps<T_28>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

package/dist/Table/Table.js

@@ -12,6 +12,11 @@ import { useClickableRowPlugin, useClickableRowContext } from "./plugins/Clickab
 import { useTableContext, useComposeContext } from "./Table.context.js";
 import { PluggableTable } from "./components/PluggableTable/PluggableTable.js";
 import { compositionComponents } from "./components/PluggableTable/compositionComponents.js";
+import { useRowNavigationPlugin } from "./plugins/RowNavigationPlugin.js";
+import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style.js";
+import { ExpandAllRowsButton } from "./components/ExpandRowButton/ExpandAllRowsButton.js";
+import { useExpanderColumn } from "./components/ExpandRowButton/useExpanderColumn.js";
+import { useRowSelectionColumn } from "./components/RowSelection/useRowSelectionColumn.js";
 const Table = Object.assign(({
   columns,
   caption,
@@ -20,6 +25,7 @@ const Table = Object.assign(({
   getRowId,
   emptyState,
   maxHeight,
+  minWidth,
   stripedRows = false,
   // sorting
   enableSorting,
@@ -28,10 +34,12 @@ const Table = Object.assign(({
   sorting,
   manualSorting,
   // row expansion
+  defaultExpanded,
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent,
+  getSubRows,
   // pagination
   pagination,
   defaultPagination,
@@ -45,7 +53,9 @@ const Table = Object.assign(({
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  // row navigation
+  enableRowNavigation = false
 }) => {
   const clickableRowPluginData = useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
@@ -68,10 +78,15 @@ const Table = Object.assign(({
     paginationEnabled
   });
   const expandableRowPluginData = useExpandableRowPlugin({
+    defaultExpanded,
     expandRowOnClick,
-    getRowCanExpand: getIsRowExpandable && ((row) => getIsRowExpandable(row.original)),
+    getRowCanExpand: getIsRowExpandable && ((row) => {
+      var _a;
+      return getIsRowExpandable(row.original) && (!getSubRows || !!((_a = getSubRows(row.original, row.index)) == null ? void 0 : _a.length));
+    }),
     renderExpandedRow,
-    expandedRowComponent
+    expandedRowComponent,
+    getSubRows
   });
   const rowSelectionPluginData = useRowSelectionPlugin({
     rowSelection,
@@ -80,11 +95,15 @@ const Table = Object.assign(({
     rowSelectionMode,
     getRowCanSelect
   });
+  const rowNavigationPluginData = useRowNavigationPlugin({
+    enableRowNavigation
+  });
   return jsxRuntimeExports.jsx(Table.PluggableTable, {
     ...{
       data,
       columns,
       maxHeight,
+      minWidth,
       stripedRows,
       caption,
       emptyStateRender: emptyState
@@ -92,20 +111,25 @@ const Table = Object.assign(({
     tableOptions: {
       getRowId
     },
-    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData]
+    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });
 }, {
   ExpandRowButton,
+  ExpandAllRowsButton,
+  useExpanderColumn,
   ExpandedRow: TableExpandedRow,
   AnimatedExpandedRow: TableAnimatedExpandedRow,
   RowSelectionButton,
   HeaderMultiRowSelectionButton,
+  useRowSelectionColumn,
+  ShowOnActiveRow: ShowOnRowHover,
   // plugins
   useClickableRowPlugin,
   useSortingPlugin,
   usePaginationPlugin,
   useExpandableRowPlugin,
   useRowSelectionPlugin,
+  useRowNavigationPlugin,
   // contexts
   useTableContext,
   useComposeContext,

package/dist/Table/Table.style.cjs

@@ -4,6 +4,7 @@ const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const redisUiComponents = require("@redislabsdev/redis-ui-components");
 const ShowOnRowHover_style = require("./components/ShowOnRowHover/ShowOnRowHover.style.cjs");
+const Table_context = require("./Table.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const TableContainer = _styled__default.default.div.withConfig({
@@ -13,11 +14,25 @@ const TableContainer = _styled__default.default.div.withConfig({
 const Table = _styled__default.default.table.withConfig({
   displayName: "Tablestyle__Table",
   componentId: "RedisUI__sc-o0xfty-1"
-})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;"]);
+})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;", ""], () => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  return _styled.css`
+      overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
+    `;
+});
 const TableHead = _styled__default.default.thead.withConfig({
   displayName: "Tablestyle__TableHead",
   componentId: "RedisUI__sc-o0xfty-2"
-})(["display:table;table-layout:fixed;"]);
+})(["display:table;table-layout:fixed;", ""], () => {
+  const {
+    minWidth
+  } = Table_context.useTableContext();
+  return _styled.css`
+      min-width: ${minWidth || void 0};
+    `;
+});
 const TableHeaderRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
   componentId: "RedisUI__sc-o0xfty-3"
@@ -25,7 +40,9 @@ const TableHeaderRow = _styled__default.default.tr.withConfig({
 const SortableHeadingCompose = _styled__default.default.button.withConfig({
   displayName: "Tablestyle__SortableHeadingCompose",
   componentId: "RedisUI__sc-o0xfty-4"
-})(["all:unset;border-radius:0.03rem;display:flex;align-items:center;justify-content:flex-start;gap:0.8rem;height:100%;width:100%;min-height:35px;max-width:100%;overflow:hidden;", " svg{flex:none;}"], redisUiStyles.getFocusStyle("0.6rem"));
+})(["all:unset;border-radius:0.03rem;display:flex;align-items:center;justify-content:flex-start;gap:0.8rem;height:100%;width:100%;min-height:35px;max-width:100%;overflow:", ";", " svg{flex:none;}"], ({
+  $custom
+}) => $custom ? void 0 : "hidden", redisUiStyles.getFocusStyle("0.6rem"));
 const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography.Body).withConfig({
   displayName: "Tablestyle__HeaderTitleWrapper",
   componentId: "RedisUI__sc-o0xfty-5"
@@ -39,17 +56,25 @@ const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography
 const TableTh = _styled__default.default.th.withConfig({
   displayName: "Tablestyle__TableTh",
   componentId: "RedisUI__sc-o0xfty-6"
-})(["padding:1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;&:not(:last-child)::after{content:'';position:absolute;inset:1.05rem 0 1.05rem auto;border-right:1px solid ", ";}"], () => redisUiStyles.useTheme().components.table.table.tableTh.color, () => redisUiStyles.useTheme().components.table.table.tableTh.borderRight);
+})(["padding:1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;overflow:hidden;&:not(:last-child)::after{content:'';position:absolute;inset:1.05rem 0 1.05rem auto;border-right:1px solid ", ";}"], () => redisUiStyles.useTheme().components.table.table.tableTh.color, () => redisUiStyles.useTheme().components.table.table.tableTh.borderRight);
 const TableBody = _styled__default.default.tbody.withConfig({
   displayName: "Tablestyle__TableBody",
   componentId: "RedisUI__sc-o0xfty-7"
-})(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
-  maxHeight
-}) => maxHeight);
+})(["", " overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], () => {
+  const {
+    maxHeight,
+    minWidth,
+    table
+  } = Table_context.useTableContext();
+  return _styled.css`
+      max-height: ${maxHeight};
+      min-width: ${table.getRowModel().rows.length && minWidth || void 0};
+    `;
+});
 const TableBodyRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
   componentId: "RedisUI__sc-o0xfty-8"
-})(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => redisUiStyles.useTheme().components.table.table.tableBodyRow.borderTop, ({
+})(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus,&:focus-within{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => redisUiStyles.useTheme().components.table.table.tableBodyRow.borderTop, ({
   onClick
 }) => onClick ? "pointer" : "default", () => redisUiStyles.useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover_style.ShowOnRowHover, ({
   $stripedRows

package/dist/Table/Table.style.d.ts

@@ -2,14 +2,14 @@ export declare const TableContainer: import("styled-components").StyledComponent
 export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
 export declare const TableHeaderRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
-export declare const SortableHeadingCompose: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SortableHeadingCompose: import("styled-components").StyledComponent<"button", any, {
+    $custom: boolean;
+}, never>;
 export declare const HeaderTitleWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     $isTextual: boolean;
 }, never>;
 export declare const TableTh: import("styled-components").StyledComponent<"th", any, {}, never>;
-export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {
-    maxHeight?: string | undefined;
-}, never>;
+export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
 export declare const TableBodyRow: import("styled-components").StyledComponent<"tr", any, {
     $stripedRows: boolean;
 }, never>;

package/dist/Table/Table.style.js

@@ -2,6 +2,7 @@ import _styled, { css } from "styled-components";
 import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
 import { Typography } from "@redislabsdev/redis-ui-components";
 import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style.js";
+import { useTableContext } from "./Table.context.js";
 const TableContainer = _styled.div.withConfig({
   displayName: "Tablestyle__TableContainer",
   componentId: "RedisUI__sc-o0xfty-0"
@@ -9,11 +10,25 @@ const TableContainer = _styled.div.withConfig({
 const Table = _styled.table.withConfig({
   displayName: "Tablestyle__Table",
   componentId: "RedisUI__sc-o0xfty-1"
-})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;"]);
+})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;", ""], () => {
+  const {
+    table
+  } = useTableContext();
+  return css`
+      overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
+    `;
+});
 const TableHead = _styled.thead.withConfig({
   displayName: "Tablestyle__TableHead",
   componentId: "RedisUI__sc-o0xfty-2"
-})(["display:table;table-layout:fixed;"]);
+})(["display:table;table-layout:fixed;", ""], () => {
+  const {
+    minWidth
+  } = useTableContext();
+  return css`
+      min-width: ${minWidth || void 0};
+    `;
+});
 const TableHeaderRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
   componentId: "RedisUI__sc-o0xfty-3"
@@ -21,7 +36,9 @@ const TableHeaderRow = _styled.tr.withConfig({
 const SortableHeadingCompose = _styled.button.withConfig({
   displayName: "Tablestyle__SortableHeadingCompose",
   componentId: "RedisUI__sc-o0xfty-4"
-})(["all:unset;border-radius:0.03rem;display:flex;align-items:center;justify-content:flex-start;gap:0.8rem;height:100%;width:100%;min-height:35px;max-width:100%;overflow:hidden;", " svg{flex:none;}"], getFocusStyle("0.6rem"));
+})(["all:unset;border-radius:0.03rem;display:flex;align-items:center;justify-content:flex-start;gap:0.8rem;height:100%;width:100%;min-height:35px;max-width:100%;overflow:", ";", " svg{flex:none;}"], ({
+  $custom
+}) => $custom ? void 0 : "hidden", getFocusStyle("0.6rem"));
 const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
   displayName: "Tablestyle__HeaderTitleWrapper",
   componentId: "RedisUI__sc-o0xfty-5"
@@ -35,17 +52,25 @@ const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
 const TableTh = _styled.th.withConfig({
   displayName: "Tablestyle__TableTh",
   componentId: "RedisUI__sc-o0xfty-6"
-})(["padding:1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;&:not(:last-child)::after{content:'';position:absolute;inset:1.05rem 0 1.05rem auto;border-right:1px solid ", ";}"], () => useTheme().components.table.table.tableTh.color, () => useTheme().components.table.table.tableTh.borderRight);
+})(["padding:1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;overflow:hidden;&:not(:last-child)::after{content:'';position:absolute;inset:1.05rem 0 1.05rem auto;border-right:1px solid ", ";}"], () => useTheme().components.table.table.tableTh.color, () => useTheme().components.table.table.tableTh.borderRight);
 const TableBody = _styled.tbody.withConfig({
   displayName: "Tablestyle__TableBody",
   componentId: "RedisUI__sc-o0xfty-7"
-})(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
-  maxHeight
-}) => maxHeight);
+})(["", " overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], () => {
+  const {
+    maxHeight,
+    minWidth,
+    table
+  } = useTableContext();
+  return css`
+      max-height: ${maxHeight};
+      min-width: ${table.getRowModel().rows.length && minWidth || void 0};
+    `;
+});
 const TableBodyRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
   componentId: "RedisUI__sc-o0xfty-8"
-})(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => useTheme().components.table.table.tableBodyRow.borderTop, ({
+})(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus,&:focus-within{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => useTheme().components.table.table.tableBodyRow.borderTop, ({
   onClick
 }) => onClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
   $stripedRows

package/dist/Table/Table.types.d.ts

@@ -4,6 +4,7 @@ import { TablePaginationParams } from './plugins/PaginationPlugin';
 import { TableRowSelectionParams } from './plugins/RowSelectionPlugin';
 import { TableSortingParams } from './plugins/SortingPlugin';
 import { EmptyStateProps } from './components/EmptyState/EmptyState';
+import { TableRowNavigationParams } from './plugins/RowNavigationPlugin';
 export * from '@tanstack/react-table';
 /** @deprecated use ColumnDef */
 export type ColumnDefinition<T extends object> = ColumnDef<T>;
@@ -18,13 +19,14 @@ export type SortingTypes = SortingState;
 type TableExpandableRowProps<T extends object> = Omit<TableExpandableRowParams<T>, 'getRowCanExpand'> & {
     getIsRowExpandable?: (rowData: T) => boolean;
 };
-export interface TableProps<T extends object> extends TableSortingParams, TableExpandableRowProps<T>, TablePaginationParams, TableRowSelectionParams<T> {
+export interface TableProps<T extends object> extends TableSortingParams, TableExpandableRowProps<T>, TablePaginationParams, TableRowSelectionParams<T>, TableRowNavigationParams {
     data: T[];
     columns: ColumnDef<T>[];
     getRowId?: (rowData: T, index: number) => string;
     onRowClick?: (rowData: T) => void;
     emptyState?: EmptyStateProps['emptyStateRender'];
     maxHeight?: string;
+    minWidth?: string;
     stripedRows?: boolean;
     caption?: string;
 }

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

@@ -13,6 +13,7 @@ const TableCompose = ({
   tableOptions,
   components,
   maxHeight,
+  minWidth,
   stripedRows,
   ...restProps
 }) => {
@@ -22,6 +23,7 @@ const TableCompose = ({
     columns,
     getCoreRowModel: index$1.getCoreRowModel(),
     enableSorting: false,
+    enableColumnResizing: false,
     ...tableOptions,
     ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
   });
@@ -30,7 +32,8 @@ const TableCompose = ({
     plugins: mergedPluginsData.context,
     components,
     stripedRows,
-    maxHeight
+    maxHeight,
+    minWidth
   };
   return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContextProvider, {
     value: tableContext,

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

@@ -10,4 +10,4 @@ export type OwnTableComposeProps<T extends object> = TableMainContextProps & Pic
 };
 export type RestTableComposeProps = ComposeElementProps;
 export type TableComposeProps<T extends object> = OwnTableComposeProps<T> & RestTableComposeProps;
-export declare const TableCompose: <T extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCompose: <T extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, minWidth, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,7 @@ const TableCompose = ({
   tableOptions,
   components,
   maxHeight,
+  minWidth,
   stripedRows,
   ...restProps
 }) => {
@@ -20,6 +21,7 @@ const TableCompose = ({
     columns,
     getCoreRowModel: getCoreRowModel(),
     enableSorting: false,
+    enableColumnResizing: false,
     ...tableOptions,
     ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
   });
@@ -28,7 +30,8 @@ const TableCompose = ({
     plugins: mergedPluginsData.context,
     components,
     stripedRows,
-    maxHeight
+    maxHeight,
+    minWidth
   };
   return jsxRuntimeExports.jsx(TableContextProvider, {
     value: tableContext,

package/dist/Table/components/ExpandRowButton/ExpandAllRowsButton.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const ExpandAllRowsButton = ({
+  table,
+  expandedIcon,
+  collapsedIcon,
+  ...restProps
+}) => table.getCanSomeRowsExpand() ? jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.IconButton, {
+  ...restProps,
+  icon: table.getIsAllRowsExpanded() ? expandedIcon ?? redisUiIcons.DoubleChevronUpIcon : collapsedIcon ?? redisUiIcons.DoubleChevronDownIcon,
+  "aria-label": table.getIsAllRowsExpanded() ? "Collapse All" : "Expand All",
+  onClick: (e) => {
+    e.stopPropagation();
+    table.toggleAllRowsExpanded();
+  }
+}) : null;
+exports.ExpandAllRowsButton = ExpandAllRowsButton;

package/dist/Table/components/ExpandRowButton/ExpandAllRowsButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@redislabsdev/redis-ui-components';
+import { Table } from '@tanstack/react-table';
+export interface ExpandAllRowsButtonProps extends Omit<IconButtonProps, 'icon' | 'onClick'> {
+    table: Table<any>;
+    expandedIcon?: IconButtonProps['icon'];
+    collapsedIcon?: IconButtonProps['icon'];
+}
+export declare const ExpandAllRowsButton: ({ table, expandedIcon, collapsedIcon, ...restProps }: ExpandAllRowsButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/ExpandRowButton/ExpandAllRowsButton.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { IconButton } from "@redislabsdev/redis-ui-components";
+import { DoubleChevronUpIcon, DoubleChevronDownIcon } from "@redislabsdev/redis-ui-icons";
+const ExpandAllRowsButton = ({
+  table,
+  expandedIcon,
+  collapsedIcon,
+  ...restProps
+}) => table.getCanSomeRowsExpand() ? jsxRuntimeExports.jsx(IconButton, {
+  ...restProps,
+  icon: table.getIsAllRowsExpanded() ? expandedIcon ?? DoubleChevronUpIcon : collapsedIcon ?? DoubleChevronDownIcon,
+  "aria-label": table.getIsAllRowsExpanded() ? "Collapse All" : "Expand All",
+  onClick: (e) => {
+    e.stopPropagation();
+    table.toggleAllRowsExpanded();
+  }
+}) : null;
+export {
+  ExpandAllRowsButton
+};

package/dist/Table/components/ExpandRowButton/ExpandAllRowsButton.test.d.ts

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