@redis-ui/table 2.12.0 → 2.22.0

package/dist/Table/Table.js

@@ -1,26 +1,22 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { useState, useEffect, Fragment } from "react";
-import { VisuallyHidden } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
-import { useReactTable, flexRender } from "../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useControllableState } from "../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
-import TablePagination from "./components/TablePagination/TablePagination.js";
 import { ExpandRowButton } from "./components/ExpandRowButton/ExpandRowButton.js";
 import { TableExpandedRow } from "./components/TableExpandedRow/TableExpandedRow.js";
 import { TableAnimatedExpandedRow } from "./components/TableExpandedRow/TableAnimatedExpandedRow.js";
-import { TableContext } from "./Table.context.js";
-import { TableHeaderCell } from "./components/TableHeaderCell/TableHeaderCell.js";
-import { getTableSortLabel, formatTableSortNotification } from "./components/TableHeaderCell/TableHeaderCell.utils.js";
-import { EmptyStateRow } from "./components/EmptyStateRow/EmptyStateRow.js";
 import { RowSelectionButton } from "./components/RowSelection/RowSelectionButton.js";
 import { HeaderMultiRowSelectionButton } from "./components/RowSelection/HeaderMultiRowSelectionButton.js";
-import { TableContainer, Table as Table$1, TableHead, TableHeaderRow, TableBody, TableBodyRow, TableBodyCell } from "./Table.style.js";
-import { getCoreRowModel, getSortedRowModel, getExpandedRowModel, getPaginationRowModel } from "../node_modules/@tanstack/table-core/build/lib/index.js";
-const getTrue = () => true;
-const DEFAULT_PAGINATION = {
-  pageIndex: 0,
-  pageSize: 10
-};
-const DEFAULT_ROW_SELECTION = {};
+import { useRowSelectionPlugin } from "./plugins/RowSelectionPlugin.js";
+import { useExpandableRowPlugin, useExpandableRowContext } from "./plugins/ExpandableRowPlugin.js";
+import { usePaginationPlugin, usePaginationContext } from "./plugins/PaginationPlugin.js";
+import { useSortingPlugin, useSortingContext } from "./plugins/SortingPlugin.js";
+import { useClickableRowPlugin, useClickableRowContext } from "./plugins/ClickableRowPlugin.js";
+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,
@@ -29,17 +25,21 @@ const Table = Object.assign(({
   getRowId,
   emptyState,
   maxHeight,
+  minWidth,
   stripedRows = false,
   // sorting
+  enableSorting,
   defaultSorting,
   onSortingChange,
   sorting,
-  manualSorting = false,
+  manualSorting,
   // row expansion
+  defaultExpanded,
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
-  expandedRowComponent: ExpandedRow = TableExpandedRow,
+  expandedRowComponent,
+  getSubRows,
   // pagination
   pagination,
   defaultPagination,
@@ -47,150 +47,99 @@ const Table = Object.assign(({
   manualPagination,
   totalRowCount,
   pageSizes,
-  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0,
+  paginationEnabled,
   // row selection
   rowSelection,
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  // row navigation
+  enableRowNavigation = false
 }) => {
-  const [userSorted, setUserSorted] = useState(false);
-  const [sortingState, setSortingState] = useControllableState({
-    prop: sorting,
-    defaultProp: defaultSorting,
-    onChange: onSortingChange
-  });
-  const [paginationState, setPaginationState] = useControllableState({
-    prop: pagination,
-    defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
-    onChange: onPaginationChange
+  const clickableRowPluginData = useClickableRowPlugin({
+    onRowClick: onRowClick && ((row) => onRowClick(row.original)),
+    shouldClickOnEnter: true
   });
-  const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = useControllableState({
-    prop: rowSelection,
-    defaultProp: defaultRowSelection,
-    onChange: onRowSelectionChange
+  const sortingPluginData = useSortingPlugin({
+    enableSorting,
+    defaultSorting,
+    onSortingChange,
+    sorting,
+    manualSorting
   });
-  const isExpandable = !!renderExpandedRow;
-  const paginationSettings = {
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPaginationState,
+  const paginationPluginData = usePaginationPlugin({
+    pagination,
+    defaultPagination,
+    onPaginationChange,
     manualPagination,
-    rowCount: totalRowCount,
-    autoResetPageIndex: false
-  };
-  const table = useReactTable({
-    data,
-    columns,
-    getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting: sortingState,
-      ...paginationEnabled && {
-        pagination: paginationState
-      },
-      ...rowSelectionMode && {
-        rowSelection: rowSelectionState
-      }
-    },
-    manualSorting,
-    onSortingChange: (value) => {
-      setSortingState(value);
-      setUserSorted(true);
-    },
-    getExpandedRowModel: isExpandable ? getExpandedRowModel() : void 0,
-    getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
-    ...paginationEnabled && paginationSettings,
-    enableRowSelection: rowSelectionMode && (getRowCanSelect ?? true),
-    enableMultiRowSelection: rowSelectionMode === "multiple",
-    onRowSelectionChange: setRowSelectionState
+    totalRowCount,
+    pageSizes,
+    paginationEnabled
   });
-  const {
-    pageIndex
-  } = table.getState().pagination;
-  const maxPageIndex = Math.max(table.getPageCount(), 1) - 1;
-  useEffect(() => {
-    if (paginationEnabled) table.setPageIndex(Math.min(pageIndex, maxPageIndex));
-  }, [maxPageIndex, pageIndex, table, paginationEnabled]);
-  const {
-    rows
-  } = table.getRowModel();
-  return jsxRuntimeExports.jsxs(TableContext.Provider, {
-    value: {
-      table
+  const expandableRowPluginData = useExpandableRowPlugin({
+    defaultExpanded,
+    expandRowOnClick,
+    getRowCanExpand: getIsRowExpandable && ((row) => {
+      var _a;
+      return getIsRowExpandable(row.original) && (!getSubRows || !!((_a = getSubRows(row.original, row.index)) == null ? void 0 : _a.length));
+    }),
+    renderExpandedRow,
+    expandedRowComponent,
+    getSubRows
+  });
+  const rowSelectionPluginData = useRowSelectionPlugin({
+    rowSelection,
+    defaultRowSelection,
+    onRowSelectionChange,
+    rowSelectionMode,
+    getRowCanSelect
+  });
+  const rowNavigationPluginData = useRowNavigationPlugin({
+    enableRowNavigation
+  });
+  return jsxRuntimeExports.jsx(Table.PluggableTable, {
+    ...{
+      data,
+      columns,
+      maxHeight,
+      minWidth,
+      stripedRows,
+      caption,
+      emptyStateRender: emptyState
+    },
+    tableOptions: {
+      getRowId
     },
-    children: [jsxRuntimeExports.jsxs(TableContainer, {
-      children: [jsxRuntimeExports.jsxs(Table$1, {
-        children: [caption && jsxRuntimeExports.jsx(VisuallyHidden, {
-          asChild: true,
-          children: jsxRuntimeExports.jsx("caption", {
-            children: caption
-          })
-        }), jsxRuntimeExports.jsx(TableHead, {
-          children: table.getHeaderGroups().map((headerGroup) => jsxRuntimeExports.jsx(TableHeaderRow, {
-            children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(TableHeaderCell, {
-              header
-            }, header.id))
-          }, headerGroup.id))
-        }), jsxRuntimeExports.jsxs(TableBody, {
-          maxHeight,
-          children: [!rows.length ? jsxRuntimeExports.jsx(EmptyStateRow, {
-            table,
-            emptyState
-          }) : null, rows.map((row) => {
-            const isRowExpandable = isExpandable && row.getCanExpand();
-            const isRowExpanded = isRowExpandable && row.getIsExpanded();
-            const handleClick = () => {
-              isRowExpandable && expandRowOnClick && row.toggleExpanded();
-              onRowClick == null ? void 0 : onRowClick(row.original);
-            };
-            return jsxRuntimeExports.jsxs(Fragment, {
-              children: [jsxRuntimeExports.jsx(TableBodyRow, {
-                tabIndex: 0,
-                "data-row-type": "regular",
-                ...isRowExpandable ? {
-                  "aria-expanded": isRowExpanded
-                } : null,
-                "$stripedRows": stripedRows,
-                "$hasOnClick": !!onRowClick || isRowExpandable,
-                onClick: handleClick,
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" && event.target === event.currentTarget) {
-                    handleClick();
-                  }
-                },
-                children: row.getVisibleCells().map((cell) => jsxRuntimeExports.jsx(TableBodyCell, {
-                  style: {
-                    width: cell.column.getSize()
-                  },
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                }, cell.id))
-              }), isRowExpandable && // 2nd row is a custom 1 cell row for expanded part
-              jsxRuntimeExports.jsx(ExpandedRow, {
-                "data-row-type": "expanded",
-                "data-expanded": isRowExpanded,
-                expanded: isRowExpanded,
-                row,
-                renderExpandedRow
-              })]
-            }, row.id);
-          })]
-        })]
-      }), jsxRuntimeExports.jsx(TablePagination, {
-        pageSizes
-      })]
-    }), userSorted && jsxRuntimeExports.jsx(VisuallyHidden, {
-      "aria-live": "polite",
-      children: getTableSortLabel(table, formatTableSortNotification)
-    })]
+    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });
 }, {
   ExpandRowButton,
+  ExpandAllRowsButton,
+  useExpanderColumn,
   ExpandedRow: TableExpandedRow,
   AnimatedExpandedRow: TableAnimatedExpandedRow,
   RowSelectionButton,
-  HeaderMultiRowSelectionButton
+  HeaderMultiRowSelectionButton,
+  useRowSelectionColumn,
+  ShowOnActiveRow: ShowOnRowHover,
+  // plugins
+  useClickableRowPlugin,
+  useSortingPlugin,
+  usePaginationPlugin,
+  useExpandableRowPlugin,
+  useRowSelectionPlugin,
+  useRowNavigationPlugin,
+  // contexts
+  useTableContext,
+  useComposeContext,
+  useClickableRowContext,
+  useExpandableRowContext,
+  usePaginationContext,
+  useSortingContext,
+  // composition components
+  PluggableTable,
+  ...compositionComponents
 });
 export {
   Table as default

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,19 +14,35 @@ 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"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled__default.default.button.withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
+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,19 +56,27 @@ 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, ({
-  $hasOnClick
-}) => $hasOnClick ? "pointer" : "default", () => redisUiStyles.useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover_style.ShowOnRowHover, ({
+})(["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
 }) => $stripedRows && _styled.css`
       :nth-child(even of [data-row-type='regular']) {
@@ -62,8 +87,13 @@ const TableBodyCell = _styled__default.default.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
   componentId: "RedisUI__sc-o0xfty-9"
 })(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => redisUiStyles.useTheme().components.table.table.tableBodyCell.color);
-exports.HeaderCellInnerWrapper = HeaderCellInnerWrapper;
+const EmptyStateContainer = _styled__default.default.div.withConfig({
+  displayName: "Tablestyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-o0xfty-10"
+})(["text-align:center;"]);
+exports.EmptyStateContainer = EmptyStateContainer;
 exports.HeaderTitleWrapper = HeaderTitleWrapper;
+exports.SortableHeadingCompose = SortableHeadingCompose;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableBodyCell = TableBodyCell;

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

@@ -2,16 +2,16 @@ 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 HeaderCellInnerWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const HeaderTitleWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+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;
-    $hasOnClick?: boolean | undefined;
 }, never>;
 export declare const TableBodyCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const EmptyStateContainer: import("styled-components").StyledComponent<"div", any, {}, 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,19 +10,35 @@ 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"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled.button.withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
+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,19 +52,27 @@ 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, ({
-  $hasOnClick
-}) => $hasOnClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
+})(["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
 }) => $stripedRows && css`
       :nth-child(even of [data-row-type='regular']) {
@@ -58,9 +83,14 @@ const TableBodyCell = _styled.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
   componentId: "RedisUI__sc-o0xfty-9"
 })(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => useTheme().components.table.table.tableBodyCell.color);
+const EmptyStateContainer = _styled.div.withConfig({
+  displayName: "Tablestyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-o0xfty-10"
+})(["text-align:center;"]);
 export {
-  HeaderCellInnerWrapper,
+  EmptyStateContainer,
   HeaderTitleWrapper,
+  SortableHeadingCompose,
   Table,
   TableBody,
   TableBodyCell,

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

@@ -1,48 +1,32 @@
-import { ComponentType, ReactNode } from 'react';
-import type { CellContext, ColumnDef, PaginationState, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
-import type { TableExpandedRowProps } from './components/TableExpandedRow';
-import './tableTypes';
+import type { CellContext, ColumnDef, PaginationState, Row, SortingState } from '@tanstack/react-table';
+import { TableExpandableRowParams } from './plugins/ExpandableRowPlugin';
+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>;
+/** @deprecated use Row */
 export type RowDefinition<T extends object> = Row<T>;
+/** @deprecated use CellContext */
 export type CellDefinition<T extends object, D> = CellContext<T, D>;
+/** @deprecated use PaginationState */
 export type PaginationTypes = PaginationState;
+/** @deprecated use SortingState */
 export type SortingTypes = SortingState;
-export interface TableSortingProps {
-    defaultSorting?: SortingState;
-    onSortingChange?: (state: SortingState) => void;
-    sorting?: SortingState;
-    manualSorting?: boolean;
-}
-export interface TableExpandableRowProps<T extends object> {
-    getIsRowExpandable?: (row: T) => boolean;
-    renderExpandedRow?: (row: RowDefinition<T>) => ReactNode;
-    expandRowOnClick?: boolean;
-    expandedRowComponent?: ComponentType<TableExpandedRowProps<T>>;
-}
-interface TablePaginationProps {
-    pagination?: PaginationState;
-    defaultPagination?: PaginationState;
-    onPaginationChange?: (state: PaginationState) => void;
-    manualPagination?: boolean;
-    totalRowCount?: number;
-    pageSizes?: number[];
-    paginationEnabled?: boolean;
-}
-interface TableRowSelectionState<T extends object> {
-    rowSelection?: RowSelectionState;
-    defaultRowSelection?: RowSelectionState;
-    onRowSelectionChange?: (state: RowSelectionState) => void;
-    rowSelectionMode?: 'single' | 'multiple';
-    getRowCanSelect?: (row: Row<T>) => boolean;
-}
-export interface TableProps<T extends object> extends TableSortingProps, TableExpandableRowProps<T>, TablePaginationProps, TableRowSelectionState<T> {
+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>, TableRowNavigationParams {
     data: T[];
-    columns: ColumnDefinition<T>[];
-    getRowId?: (row: T, index: number) => string;
-    onRowClick?: (row: T) => void;
-    emptyState?: () => ReactNode;
+    columns: ColumnDef<T>[];
+    getRowId?: (rowData: T, index: number) => string;
+    onRowClick?: (rowData: T) => void;
+    emptyState?: EmptyStateProps['emptyStateRender'];
     maxHeight?: string;
+    minWidth?: string;
     stripedRows?: boolean;
     caption?: string;
 }
-export {};

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@tanstack/react-table/build/lib/index.cjs");
+const plugin_utils = require("../../utils/plugin.utils.cjs");
+const Table_context = require("../../Table.context.cjs");
+const Table_style = require("../../Table.style.cjs");
+const index$1 = require("../../../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const TableCompose = ({
+  data,
+  columns,
+  pluginsData,
+  tableOptions,
+  components,
+  maxHeight,
+  minWidth,
+  stripedRows,
+  ...restProps
+}) => {
+  const mergedPluginsData = plugin_utils.mergePluginsData(pluginsData);
+  const table = index.useReactTable({
+    data,
+    columns,
+    getCoreRowModel: index$1.getCoreRowModel(),
+    enableSorting: false,
+    enableColumnResizing: false,
+    ...tableOptions,
+    ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
+  });
+  const tableContext = {
+    table,
+    plugins: mergedPluginsData.context,
+    components,
+    stripedRows,
+    maxHeight,
+    minWidth
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContextProvider, {
+    value: tableContext,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableContainer, {
+      ...restProps
+    })
+  });
+};
+exports.TableCompose = TableCompose;

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

@@ -0,0 +1,13 @@
+import { SetOptional } from 'type-fest';
+import { TableOptions } from '@tanstack/table-core';
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+import { TablePluginData } from '../../utils/plugin.utils';
+import { CompositionContextProps, TableMainContextProps } from '../../Table.context';
+export type OwnTableComposeProps<T extends object> = TableMainContextProps & Pick<TableOptions<T>, 'data' | 'columns'> & {
+    tableOptions?: Omit<SetOptional<TableOptions<T>, 'getCoreRowModel'>, 'data' | 'columns'>;
+    pluginsData?: TablePluginData<T>[];
+    components?: Partial<CompositionContextProps<T>>;
+};
+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, minWidth, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;