@redis-ui/table 2.4.0 → 2.12.0

package/dist/Table/Table.cjs

@@ -2,14 +2,19 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
+const index$3 = require("../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
 const index$1 = require("../node_modules/@tanstack/react-table/build/lib/index.cjs");
-const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const index = require("../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
 const TablePagination = require("./components/TablePagination/TablePagination.cjs");
 const ExpandRowButton = require("./components/ExpandRowButton/ExpandRowButton.cjs");
 const TableExpandedRow = require("./components/TableExpandedRow/TableExpandedRow.cjs");
 const TableAnimatedExpandedRow = require("./components/TableExpandedRow/TableAnimatedExpandedRow.cjs");
 const Table_context = require("./Table.context.cjs");
+const TableHeaderCell = require("./components/TableHeaderCell/TableHeaderCell.cjs");
+const TableHeaderCell_utils = require("./components/TableHeaderCell/TableHeaderCell.utils.cjs");
+const EmptyStateRow = require("./components/EmptyStateRow/EmptyStateRow.cjs");
+const RowSelectionButton = require("./components/RowSelection/RowSelectionButton.cjs");
+const HeaderMultiRowSelectionButton = require("./components/RowSelection/HeaderMultiRowSelectionButton.cjs");
 const Table_style = require("./Table.style.cjs");
 const index$2 = require("../node_modules/@tanstack/table-core/build/lib/index.cjs");
 const getTrue = () => true;
@@ -17,29 +22,42 @@ const DEFAULT_PAGINATION = {
   pageIndex: 0,
   pageSize: 10
 };
+const DEFAULT_ROW_SELECTION = {};
 const Table = Object.assign(({
   columns,
+  caption,
   onRowClick,
   data,
-  defaultSorting,
+  getRowId,
   emptyState,
   maxHeight,
   stripedRows = false,
+  // sorting
+  defaultSorting,
   onSortingChange,
   sorting,
   manualSorting = false,
+  // row expansion
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent: ExpandedRow = TableExpandedRow.TableExpandedRow,
+  // pagination
   pagination,
   defaultPagination,
   onPaginationChange,
   manualPagination,
   totalRowCount,
   pageSizes,
-  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0
+  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0,
+  // row selection
+  rowSelection,
+  defaultRowSelection,
+  onRowSelectionChange,
+  rowSelectionMode,
+  getRowCanSelect
 }) => {
+  const [userSorted, setUserSorted] = React.useState(false);
   const [sortingState, setSortingState] = index.useControllableState({
     prop: sorting,
     defaultProp: defaultSorting,
@@ -50,6 +68,11 @@ const Table = Object.assign(({
     defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
     onChange: onPaginationChange
   });
+  const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = index.useControllableState({
+    prop: rowSelection,
+    defaultProp: defaultRowSelection,
+    onChange: onRowSelectionChange
+  });
   const isExpandable = !!renderExpandedRow;
   const paginationSettings = {
     getPaginationRowModel: index$2.getPaginationRowModel(),
@@ -61,19 +84,29 @@ const Table = Object.assign(({
   const table = index$1.useReactTable({
     data,
     columns,
+    getRowId,
     getCoreRowModel: index$2.getCoreRowModel(),
     getSortedRowModel: index$2.getSortedRowModel(),
     state: {
       sorting: sortingState,
       ...paginationEnabled && {
         pagination: paginationState
+      },
+      ...rowSelectionMode && {
+        rowSelection: rowSelectionState
       }
     },
     manualSorting,
-    onSortingChange: setSortingState,
+    onSortingChange: (value) => {
+      setSortingState(value);
+      setUserSorted(true);
+    },
     getExpandedRowModel: isExpandable ? index$2.getExpandedRowModel() : void 0,
     getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
-    ...paginationEnabled && paginationSettings
+    ...paginationEnabled && paginationSettings,
+    enableRowSelection: rowSelectionMode && (getRowCanSelect ?? true),
+    enableMultiRowSelection: rowSelectionMode === "multiple",
+    onRowSelectionChange: setRowSelectionState
   });
   const {
     pageIndex
@@ -85,42 +118,28 @@ const Table = Object.assign(({
   const {
     rows
   } = table.getRowModel();
-  return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContext.Provider, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Table_context.TableContext.Provider, {
     value: {
       table
     },
-    children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableContainer, {
       children: [jsxRuntime.jsxRuntimeExports.jsxs(Table_style.Table, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHead, {
+        children: [caption && jsxRuntime.jsxRuntimeExports.jsx(index$3.VisuallyHidden, {
+          asChild: true,
+          children: jsxRuntime.jsxRuntimeExports.jsx("caption", {
+            children: caption
+          })
+        }), jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHead, {
           children: table.getHeaderGroups().map((headerGroup) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHeaderRow, {
-            children: headerGroup.headers.map((header) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
-              onClick: header.column.getToggleSortingHandler(),
-              style: {
-                width: header.column.getSize()
-              },
-              children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.HeaderCellInnerWrapper, {
-                size: "XS",
-                children: [header.isPlaceholder ? null : index$1.flexRender(header.column.columnDef.header, header.getContext()), {
-                  asc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowUpIcon, {
-                    size: "S",
-                    color: "neutral700"
-                  }),
-                  desc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowDownIcon, {
-                    size: "S",
-                    color: "neutral700"
-                  })
-                }[header.column.getIsSorted()] ?? null]
-              })
+            children: headerGroup.headers.map((header) => jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.TableHeaderCell, {
+              header
             }, header.id))
           }, headerGroup.id))
         }), jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableBody, {
           maxHeight,
-          children: [!rows.length ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
-            "$stripedRows": false,
-            children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
-              colSpan: columns.length,
-              children: emptyState ? emptyState() : "No data to display"
-            })
+          children: [!rows.length ? jsxRuntime.jsxRuntimeExports.jsx(EmptyStateRow.EmptyStateRow, {
+            table,
+            emptyState
           }) : null, rows.map((row) => {
             const isRowExpandable = isExpandable && row.getCanExpand();
             const isRowExpanded = isRowExpandable && row.getIsExpanded();
@@ -163,11 +182,16 @@ const Table = Object.assign(({
       }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.default, {
         pageSizes
       })]
-    })
+    }), userSorted && jsxRuntime.jsxRuntimeExports.jsx(index$3.VisuallyHidden, {
+      "aria-live": "polite",
+      children: TableHeaderCell_utils.getTableSortLabel(table, TableHeaderCell_utils.formatTableSortNotification)
+    })]
   });
 }, {
   ExpandRowButton: ExpandRowButton.ExpandRowButton,
   ExpandedRow: TableExpandedRow.TableExpandedRow,
-  AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow
+  AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow,
+  RowSelectionButton: RowSelectionButton.RowSelectionButton,
+  HeaderMultiRowSelectionButton: HeaderMultiRowSelectionButton.HeaderMultiRowSelectionButton
 });
 exports.default = Table;

package/dist/Table/Table.d.ts

@@ -1,7 +1,9 @@
 import { TableProps } from './Table.types';
-declare const Table: (<T extends object>({ columns, onRowClick, data, defaultSorting, emptyState, maxHeight, stripedRows, onSortingChange, sorting, manualSorting, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent: ExpandedRow, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, maxHeight, stripedRows, defaultSorting, onSortingChange, sorting, manualSorting, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent: ExpandedRow, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandRowButton").ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     ExpandedRow: <T_1 extends object>({ row, renderExpandedRow, keepInDom, expanded, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_1>) => import("react/jsx-runtime").JSX.Element | null;
     AnimatedExpandedRow: <T_2 extends object>({ expanded, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_2>) => import("react/jsx-runtime").JSX.Element;
+    RowSelectionButton: <T_3 extends object>({ row, ...restProps }: import("./components/RowSelection/RowSelectionButton").RowSelectionButtonProps<T_3>) => import("react/jsx-runtime").JSX.Element;
+    HeaderMultiRowSelectionButton: <T_4 extends object>({ table, managePage, ...restProps }: import("./components/RowSelection/HeaderMultiRowSelectionButton").HeaderMultiRowSelectionButtonProps<T_4>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

package/dist/Table/Table.js

@@ -1,43 +1,61 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { useEffect, Fragment } from "react";
+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 { 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 { 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 = {};
 const Table = Object.assign(({
   columns,
+  caption,
   onRowClick,
   data,
-  defaultSorting,
+  getRowId,
   emptyState,
   maxHeight,
   stripedRows = false,
+  // sorting
+  defaultSorting,
   onSortingChange,
   sorting,
   manualSorting = false,
+  // row expansion
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
   expandedRowComponent: ExpandedRow = TableExpandedRow,
+  // pagination
   pagination,
   defaultPagination,
   onPaginationChange,
   manualPagination,
   totalRowCount,
   pageSizes,
-  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0
+  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0,
+  // row selection
+  rowSelection,
+  defaultRowSelection,
+  onRowSelectionChange,
+  rowSelectionMode,
+  getRowCanSelect
 }) => {
+  const [userSorted, setUserSorted] = useState(false);
   const [sortingState, setSortingState] = useControllableState({
     prop: sorting,
     defaultProp: defaultSorting,
@@ -48,6 +66,11 @@ const Table = Object.assign(({
     defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
     onChange: onPaginationChange
   });
+  const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = useControllableState({
+    prop: rowSelection,
+    defaultProp: defaultRowSelection,
+    onChange: onRowSelectionChange
+  });
   const isExpandable = !!renderExpandedRow;
   const paginationSettings = {
     getPaginationRowModel: getPaginationRowModel(),
@@ -59,19 +82,29 @@ const Table = Object.assign(({
   const table = useReactTable({
     data,
     columns,
+    getRowId,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     state: {
       sorting: sortingState,
       ...paginationEnabled && {
         pagination: paginationState
+      },
+      ...rowSelectionMode && {
+        rowSelection: rowSelectionState
       }
     },
     manualSorting,
-    onSortingChange: setSortingState,
+    onSortingChange: (value) => {
+      setSortingState(value);
+      setUserSorted(true);
+    },
     getExpandedRowModel: isExpandable ? getExpandedRowModel() : void 0,
     getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
-    ...paginationEnabled && paginationSettings
+    ...paginationEnabled && paginationSettings,
+    enableRowSelection: rowSelectionMode && (getRowCanSelect ?? true),
+    enableMultiRowSelection: rowSelectionMode === "multiple",
+    onRowSelectionChange: setRowSelectionState
   });
   const {
     pageIndex
@@ -83,42 +116,28 @@ const Table = Object.assign(({
   const {
     rows
   } = table.getRowModel();
-  return jsxRuntimeExports.jsx(TableContext.Provider, {
+  return jsxRuntimeExports.jsxs(TableContext.Provider, {
     value: {
       table
     },
-    children: jsxRuntimeExports.jsxs(TableContainer, {
+    children: [jsxRuntimeExports.jsxs(TableContainer, {
       children: [jsxRuntimeExports.jsxs(Table$1, {
-        children: [jsxRuntimeExports.jsx(TableHead, {
+        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(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]
-              })
+            children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(TableHeaderCell, {
+              header
             }, 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"
-            })
+          children: [!rows.length ? jsxRuntimeExports.jsx(EmptyStateRow, {
+            table,
+            emptyState
           }) : null, rows.map((row) => {
             const isRowExpandable = isExpandable && row.getCanExpand();
             const isRowExpanded = isRowExpandable && row.getIsExpanded();
@@ -161,12 +180,17 @@ const Table = Object.assign(({
       }), jsxRuntimeExports.jsx(TablePagination, {
         pageSizes
       })]
-    })
+    }), userSorted && jsxRuntimeExports.jsx(VisuallyHidden, {
+      "aria-live": "polite",
+      children: getTableSortLabel(table, formatTableSortNotification)
+    })]
   });
 }, {
   ExpandRowButton,
   ExpandedRow: TableExpandedRow,
-  AnimatedExpandedRow: TableAnimatedExpandedRow
+  AnimatedExpandedRow: TableAnimatedExpandedRow,
+  RowSelectionButton,
+  HeaderMultiRowSelectionButton
 });
 export {
   Table as default

package/dist/Table/Table.style.cjs

@@ -8,37 +8,47 @@ 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({
+const HeaderCellInnerWrapper = _styled__default.default.button.withConfig({
   displayName: "Tablestyle__HeaderCellInnerWrapper",
-  componentId: "sc-o0xfty-4"
-})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+  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, ({
@@ -50,9 +60,10 @@ 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;
+exports.HeaderTitleWrapper = HeaderTitleWrapper;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableBodyCell = TableBodyCell;

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

@@ -2,7 +2,10 @@ 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 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, {
+    $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;

package/dist/Table/Table.style.js

@@ -1,40 +1,50 @@
 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({
+const HeaderCellInnerWrapper = _styled.button.withConfig({
   displayName: "Tablestyle__HeaderCellInnerWrapper",
-  componentId: "sc-o0xfty-4"
-})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+  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, ({
@@ -46,10 +56,11 @@ 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);
 export {
   HeaderCellInnerWrapper,
+  HeaderTitleWrapper,
   Table,
   TableBody,
   TableBodyCell,

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

@@ -1,26 +1,25 @@
 import { ComponentType, ReactNode } from 'react';
-import type { ColumnDef, CellContext, PaginationState, Row, SortingState } from '@tanstack/react-table';
+import type { CellContext, ColumnDef, PaginationState, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
 import type { TableExpandedRowProps } from './components/TableExpandedRow';
+import './tableTypes';
 export type ColumnDefinition<T extends object> = ColumnDef<T>;
 export type RowDefinition<T extends object> = Row<T>;
 export type CellDefinition<T extends object, D> = CellContext<T, D>;
 export type PaginationTypes = PaginationState;
 export type SortingTypes = SortingState;
-export interface TableProps<T extends object> {
-    data: T[];
-    columns: ColumnDefinition<T>[];
-    onRowClick?: (row: T) => void;
-    emptyState?: () => ReactNode;
+export interface TableSortingProps {
     defaultSorting?: SortingState;
-    maxHeight?: string;
-    stripedRows?: boolean;
     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;
@@ -29,3 +28,21 @@ export interface TableProps<T extends object> {
     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> {
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    getRowId?: (row: T, index: number) => string;
+    onRowClick?: (row: T) => void;
+    emptyState?: () => ReactNode;
+    maxHeight?: string;
+    stripedRows?: boolean;
+    caption?: string;
+}
+export {};

package/dist/Table/components/EmptyStateRow/EmptyStateRow.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const TableHeaderCell_utils = require("../TableHeaderCell/TableHeaderCell.utils.cjs");
+const Table_style = require("../../Table.style.cjs");
+const EmptyStateRow = ({
+  table,
+  emptyState
+}) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
+  "$stripedRows": false,
+  children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+    colSpan: TableHeaderCell_utils.normalizeCellSpan(table.getVisibleLeafColumns().length),
+    children: (emptyState == null ? void 0 : emptyState()) ?? "No data to display"
+  })
+});
+exports.EmptyStateRow = EmptyStateRow;

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+type EmptyStateRowProps<T extends object> = {
+    table: Table<T>;
+    emptyState?: () => ReactNode;
+};
+export declare const EmptyStateRow: <T extends object>({ table, emptyState }: EmptyStateRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Table/components/EmptyStateRow/EmptyStateRow.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { normalizeCellSpan } from "../TableHeaderCell/TableHeaderCell.utils.js";
+import { TableBodyRow, TableBodyCell } from "../../Table.style.js";
+const EmptyStateRow = ({
+  table,
+  emptyState
+}) => jsxRuntimeExports.jsx(TableBodyRow, {
+  "$stripedRows": false,
+  children: jsxRuntimeExports.jsx(TableBodyCell, {
+    colSpan: normalizeCellSpan(table.getVisibleLeafColumns().length),
+    children: (emptyState == null ? void 0 : emptyState()) ?? "No data to display"
+  })
+});
+export {
+  EmptyStateRow
+};