@redis-ui/table 2.4.0 → 2.18.0

package/dist/Table/Table.js

@@ -1,172 +1,121 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { useEffect, Fragment } from "react";
-import { useReactTable, flexRender } from "../node_modules/@tanstack/react-table/build/lib/index.js";
-import { ArrowUpIcon, ArrowDownIcon } from "@redislabsdev/redis-ui-icons";
-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 { TableContainer, Table as Table$1, TableHead, TableHeaderRow, TableTh, HeaderCellInnerWrapper, 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
-};
+import { RowSelectionButton } from "./components/RowSelection/RowSelectionButton.js";
+import { HeaderMultiRowSelectionButton } from "./components/RowSelection/HeaderMultiRowSelectionButton.js";
+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";
 const Table = Object.assign(({
   columns,
+  caption,
   onRowClick,
   data,
-  defaultSorting,
+  getRowId,
   emptyState,
   maxHeight,
   stripedRows = false,
+  // sorting
+  enableSorting,
+  defaultSorting,
   onSortingChange,
   sorting,
-  manualSorting = false,
+  manualSorting,
+  // row expansion
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
-  expandedRowComponent: ExpandedRow = TableExpandedRow,
+  expandedRowComponent,
+  // pagination
   pagination,
   defaultPagination,
   onPaginationChange,
   manualPagination,
   totalRowCount,
   pageSizes,
-  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0
+  paginationEnabled,
+  // row selection
+  rowSelection,
+  defaultRowSelection,
+  onRowSelectionChange,
+  rowSelectionMode,
+  getRowCanSelect
 }) => {
-  const [sortingState, setSortingState] = useControllableState({
-    prop: sorting,
-    defaultProp: defaultSorting,
-    onChange: onSortingChange
+  const clickableRowPluginData = useClickableRowPlugin({
+    onRowClick: onRowClick && ((row) => onRowClick(row.original)),
+    shouldClickOnEnter: true
   });
-  const [paginationState, setPaginationState] = useControllableState({
-    prop: pagination,
-    defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
-    onChange: onPaginationChange
+  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,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting: sortingState,
-      ...paginationEnabled && {
-        pagination: paginationState
-      }
-    },
-    manualSorting,
-    onSortingChange: setSortingState,
-    getExpandedRowModel: isExpandable ? getExpandedRowModel() : void 0,
-    getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
-    ...paginationEnabled && paginationSettings
+    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.jsx(TableContext.Provider, {
-    value: {
-      table
+  const expandableRowPluginData = useExpandableRowPlugin({
+    expandRowOnClick,
+    getRowCanExpand: getIsRowExpandable && ((row) => getIsRowExpandable(row.original)),
+    renderExpandedRow,
+    expandedRowComponent
+  });
+  const rowSelectionPluginData = useRowSelectionPlugin({
+    rowSelection,
+    defaultRowSelection,
+    onRowSelectionChange,
+    rowSelectionMode,
+    getRowCanSelect
+  });
+  return jsxRuntimeExports.jsx(Table.PluggableTable, {
+    ...{
+      data,
+      columns,
+      maxHeight,
+      stripedRows,
+      caption,
+      emptyStateRender: emptyState
+    },
+    tableOptions: {
+      getRowId
     },
-    children: jsxRuntimeExports.jsxs(TableContainer, {
-      children: [jsxRuntimeExports.jsxs(Table$1, {
-        children: [jsxRuntimeExports.jsx(TableHead, {
-          children: table.getHeaderGroups().map((headerGroup) => jsxRuntimeExports.jsx(TableHeaderRow, {
-            children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(TableTh, {
-              onClick: header.column.getToggleSortingHandler(),
-              style: {
-                width: header.column.getSize()
-              },
-              children: jsxRuntimeExports.jsxs(HeaderCellInnerWrapper, {
-                size: "XS",
-                children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), {
-                  asc: jsxRuntimeExports.jsx(ArrowUpIcon, {
-                    size: "S",
-                    color: "neutral700"
-                  }),
-                  desc: jsxRuntimeExports.jsx(ArrowDownIcon, {
-                    size: "S",
-                    color: "neutral700"
-                  })
-                }[header.column.getIsSorted()] ?? null]
-              })
-            }, header.id))
-          }, headerGroup.id))
-        }), jsxRuntimeExports.jsxs(TableBody, {
-          maxHeight,
-          children: [!rows.length ? jsxRuntimeExports.jsx(TableBodyRow, {
-            "$stripedRows": false,
-            children: jsxRuntimeExports.jsx(TableBodyCell, {
-              colSpan: columns.length,
-              children: emptyState ? emptyState() : "No data to display"
-            })
-          }) : 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
-      })]
-    })
+    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData]
   });
 }, {
   ExpandRowButton,
   ExpandedRow: TableExpandedRow,
-  AnimatedExpandedRow: TableAnimatedExpandedRow
+  AnimatedExpandedRow: TableAnimatedExpandedRow,
+  RowSelectionButton,
+  HeaderMultiRowSelectionButton,
+  // plugins
+  useClickableRowPlugin,
+  useSortingPlugin,
+  usePaginationPlugin,
+  useExpandableRowPlugin,
+  useRowSelectionPlugin,
+  // contexts
+  useTableContext,
+  useComposeContext,
+  useClickableRowContext,
+  useExpandableRowContext,
+  usePaginationContext,
+  useSortingContext,
+  // composition components
+  PluggableTable,
+  ...compositionComponents
 });
 export {
   Table as default

package/dist/Table/Table.style.cjs

@@ -8,40 +8,50 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const TableContainer = _styled__default.default.div.withConfig({
   displayName: "Tablestyle__TableContainer",
-  componentId: "sc-o0xfty-0"
+  componentId: "RedisUI__sc-o0xfty-0"
 })(["width:100%;border-radius:0.8rem;box-shadow:", ";background-color:", ";overflow:hidden;"], () => redisUiStyles.useTheme().components.table.table.tableContainer.boxShadow, () => redisUiStyles.useTheme().components.table.table.tableContainer.backgroundColor);
 const Table = _styled__default.default.table.withConfig({
   displayName: "Tablestyle__Table",
-  componentId: "sc-o0xfty-1"
-})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;::-webkit-scrollbar{height:0.5rem;}"]);
+  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({
   displayName: "Tablestyle__TableHead",
-  componentId: "sc-o0xfty-2"
+  componentId: "RedisUI__sc-o0xfty-2"
 })(["display:table;table-layout:fixed;"]);
 const TableHeaderRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
-  componentId: "sc-o0xfty-3"
+  componentId: "RedisUI__sc-o0xfty-3"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled__default.default(redisUiComponents.Typography.Heading).withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
-  componentId: "sc-o0xfty-4"
-})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+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"));
+const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography.Body).withConfig({
+  displayName: "Tablestyle__HeaderTitleWrapper",
+  componentId: "RedisUI__sc-o0xfty-5"
+})(["flex:0 1 auto;white-space:inherit;text-align:start;", ""], ({
+  $isTextual
+}) => $isTextual ? null : _styled.css`
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        `);
 const TableTh = _styled__default.default.th.withConfig({
   displayName: "Tablestyle__TableTh",
-  componentId: "sc-o0xfty-5"
-})(["padding:1.05rem 0 1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;svg{vertical-align:middle;margin-left:0.8rem;}&:not(:last-child){> ", "{border-right:1px solid ", ";}}"], () => redisUiStyles.useTheme().components.table.table.tableTh.color, HeaderCellInnerWrapper, () => redisUiStyles.useTheme().components.table.table.tableTh.borderRight);
+  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);
 const TableBody = _styled__default.default.tbody.withConfig({
   displayName: "Tablestyle__TableBody",
-  componentId: "sc-o0xfty-6"
+  componentId: "RedisUI__sc-o0xfty-7"
 })(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
   maxHeight
 }) => maxHeight);
 const TableBodyRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
-  componentId: "sc-o0xfty-7"
+  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, ({
+  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']) {
@@ -50,9 +60,15 @@ const TableBodyRow = _styled__default.default.tr.withConfig({
     `);
 const TableBodyCell = _styled__default.default.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
-  componentId: "sc-o0xfty-8"
+  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,13 +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<({ size, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SortableHeadingCompose: 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").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 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

@@ -1,43 +1,53 @@
 import _styled, { css } from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
 import { Typography } from "@redislabsdev/redis-ui-components";
 import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style.js";
 const TableContainer = _styled.div.withConfig({
   displayName: "Tablestyle__TableContainer",
-  componentId: "sc-o0xfty-0"
+  componentId: "RedisUI__sc-o0xfty-0"
 })(["width:100%;border-radius:0.8rem;box-shadow:", ";background-color:", ";overflow:hidden;"], () => useTheme().components.table.table.tableContainer.boxShadow, () => useTheme().components.table.table.tableContainer.backgroundColor);
 const Table = _styled.table.withConfig({
   displayName: "Tablestyle__Table",
-  componentId: "sc-o0xfty-1"
-})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;::-webkit-scrollbar{height:0.5rem;}"]);
+  componentId: "RedisUI__sc-o0xfty-1"
+})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;"]);
 const TableHead = _styled.thead.withConfig({
   displayName: "Tablestyle__TableHead",
-  componentId: "sc-o0xfty-2"
+  componentId: "RedisUI__sc-o0xfty-2"
 })(["display:table;table-layout:fixed;"]);
 const TableHeaderRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
-  componentId: "sc-o0xfty-3"
+  componentId: "RedisUI__sc-o0xfty-3"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled(Typography.Heading).withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
-  componentId: "sc-o0xfty-4"
-})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+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"));
+const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
+  displayName: "Tablestyle__HeaderTitleWrapper",
+  componentId: "RedisUI__sc-o0xfty-5"
+})(["flex:0 1 auto;white-space:inherit;text-align:start;", ""], ({
+  $isTextual
+}) => $isTextual ? null : css`
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        `);
 const TableTh = _styled.th.withConfig({
   displayName: "Tablestyle__TableTh",
-  componentId: "sc-o0xfty-5"
-})(["padding:1.05rem 0 1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;svg{vertical-align:middle;margin-left:0.8rem;}&:not(:last-child){> ", "{border-right:1px solid ", ";}}"], () => useTheme().components.table.table.tableTh.color, HeaderCellInnerWrapper, () => useTheme().components.table.table.tableTh.borderRight);
+  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);
 const TableBody = _styled.tbody.withConfig({
   displayName: "Tablestyle__TableBody",
-  componentId: "sc-o0xfty-6"
+  componentId: "RedisUI__sc-o0xfty-7"
 })(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
   maxHeight
 }) => maxHeight);
 const TableBodyRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
-  componentId: "sc-o0xfty-7"
+  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, ({
+  onClick
+}) => onClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
   $stripedRows
 }) => $stripedRows && css`
       :nth-child(even of [data-row-type='regular']) {
@@ -46,10 +56,16 @@ const TableBodyRow = _styled.tr.withConfig({
     `);
 const TableBodyCell = _styled.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
-  componentId: "sc-o0xfty-8"
+  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,31 +1,30 @@
-import { ComponentType, ReactNode } from 'react';
-import type { ColumnDef, CellContext, PaginationState, Row, SortingState } from '@tanstack/react-table';
-import type { TableExpandedRowProps } from './components/TableExpandedRow';
+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';
+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 TableProps<T extends object> {
+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> {
     data: T[];
-    columns: ColumnDefinition<T>[];
-    onRowClick?: (row: T) => void;
-    emptyState?: () => ReactNode;
-    defaultSorting?: SortingState;
+    columns: ColumnDef<T>[];
+    getRowId?: (rowData: T, index: number) => string;
+    onRowClick?: (rowData: T) => void;
+    emptyState?: EmptyStateProps['emptyStateRender'];
     maxHeight?: string;
     stripedRows?: boolean;
-    onSortingChange?: (state: SortingState) => void;
-    sorting?: SortingState;
-    manualSorting?: boolean;
-    getIsRowExpandable?: (row: T) => boolean;
-    renderExpandedRow?: (row: RowDefinition<T>) => ReactNode;
-    expandRowOnClick?: boolean;
-    expandedRowComponent?: ComponentType<TableExpandedRowProps<T>>;
-    pagination?: PaginationState;
-    defaultPagination?: PaginationState;
-    onPaginationChange?: (state: PaginationState) => void;
-    manualPagination?: boolean;
-    totalRowCount?: number;
-    pageSizes?: number[];
-    paginationEnabled?: boolean;
+    caption?: string;
 }

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

@@ -0,0 +1,42 @@
+"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,
+  stripedRows,
+  ...restProps
+}) => {
+  const mergedPluginsData = plugin_utils.mergePluginsData(pluginsData);
+  const table = index.useReactTable({
+    data,
+    columns,
+    getCoreRowModel: index$1.getCoreRowModel(),
+    enableSorting: false,
+    ...tableOptions,
+    ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
+  });
+  const tableContext = {
+    table,
+    plugins: mergedPluginsData.context,
+    components,
+    stripedRows,
+    maxHeight
+  };
+  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, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useReactTable } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { mergePluginsData } from "../../utils/plugin.utils.js";
+import { TableContextProvider } from "../../Table.context.js";
+import { TableContainer } from "../../Table.style.js";
+import { getCoreRowModel } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+const TableCompose = ({
+  data,
+  columns,
+  pluginsData,
+  tableOptions,
+  components,
+  maxHeight,
+  stripedRows,
+  ...restProps
+}) => {
+  const mergedPluginsData = mergePluginsData(pluginsData);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    enableSorting: false,
+    ...tableOptions,
+    ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
+  });
+  const tableContext = {
+    table,
+    plugins: mergedPluginsData.context,
+    components,
+    stripedRows,
+    maxHeight
+  };
+  return jsxRuntimeExports.jsx(TableContextProvider, {
+    value: tableContext,
+    children: jsxRuntimeExports.jsx(TableContainer, {
+      ...restProps
+    })
+  });
+};
+export {
+  TableCompose
+};

package/dist/Table/components/EmptyState/EmptyState.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Table_context = require("../../Table.context.cjs");
+const TableHeaderCell_utils = require("../TableHeaderCell/TableHeaderCell.utils.cjs");
+const Table_style = require("../../Table.style.cjs");
+const EmptyState = ({
+  emptyStateRender,
+  ...restProps
+}) => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  if (table.getRowModel().rows.length) {
+    return null;
+  }
+  const content = (typeof emptyStateRender === "function" ? emptyStateRender() : emptyStateRender) ?? "No data to display";
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBody, {
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
+      "$stripedRows": false,
+      children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+        colSpan: TableHeaderCell_utils.normalizeCellSpan(table.getVisibleLeafColumns().length),
+        children: typeof content === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.EmptyStateContainer, {
+          children: content
+        }) : content
+      })
+    })
+  });
+};
+exports.EmptyState = EmptyState;

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+export interface EmptyStateProps extends ChildFree<HTMLAttributes<HTMLTableSectionElement>> {
+    emptyStateRender?: (() => ReactNode) | string;
+}
+export declare const EmptyState: ({ emptyStateRender, ...restProps }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element | null;