@redis-ui/table 2.18.0 → 2.23.2

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,16 +36,19 @@ const Table = Object.assign(({
   sorting,
   manualSorting,
   // row expansion
+  defaultExpanded,
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent,
+  getSubRows,
   // pagination
   pagination,
   defaultPagination,
   onPaginationChange,
   manualPagination,
   totalRowCount,
+  totalPageCount,
   pageSizes,
   paginationEnabled,
   // row selection
@@ -47,7 +56,9 @@ const Table = Object.assign(({
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  // row navigation
+  enableRowNavigation = false
 }) => {
   const clickableRowPluginData = ClickableRowPlugin.useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
@@ -66,14 +77,20 @@ const Table = Object.assign(({
     onPaginationChange,
     manualPagination,
     totalRowCount,
+    totalPageCount,
     pageSizes,
     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 +99,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 +115,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,21 +2,21 @@
 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, totalPageCount, 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;
     Header: (<T_2 extends object>(props: import("./components/TableHeader/TableHeader").RestTableHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: import("styled-components").StyledComponent<"thead", any, {}, never>;
+        Compose: import("react").FC<import("./components/TableHeader/components/Compose/Compose").TableHeaderComposeProps>;
         Row: (<T_3 extends object>(props: import("./components/TableHeaderRow/TableHeaderRow").OwnTableHeaderRowProps<T_3> & import("./components/TableHeaderRow/TableHeaderRow").RestTableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
             Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
         };
         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, totalPageCount, 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,16 +34,19 @@ const Table = Object.assign(({
   sorting,
   manualSorting,
   // row expansion
+  defaultExpanded,
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent,
+  getSubRows,
   // pagination
   pagination,
   defaultPagination,
   onPaginationChange,
   manualPagination,
   totalRowCount,
+  totalPageCount,
   pageSizes,
   paginationEnabled,
   // row selection
@@ -45,7 +54,9 @@ const Table = Object.assign(({
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  // row navigation
+  enableRowNavigation = false
 }) => {
   const clickableRowPluginData = useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
@@ -64,14 +75,20 @@ const Table = Object.assign(({
     onPaginationChange,
     manualPagination,
     totalRowCount,
+    totalPageCount,
     pageSizes,
     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 +97,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 +113,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,28 @@ 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;"]);
-const TableHead = _styled__default.default.thead.withConfig({
+})(["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.attrs((props) => ({
+  "data-role": "table-header",
+  ...props
+})).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 +43,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 +59,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;&[aria-sort]{cursor:pointer;}&: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