@redis-ui/table 2.25.0 → 3.4.1

package/dist/Table/Table.style.js

@@ -6,11 +6,11 @@ import { useTableContext } from "./Table.context.js";
 const TableContainer = _styled.div.withConfig({
   displayName: "Tablestyle__TableContainer",
   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",
+})(["width:100%;border-radius:", ";box-shadow:", ";background-color:", ";overflow:hidden;display:flex;flex-direction:column;"], () => useTheme().components.table.table.tableContainer.borderRadius, () => useTheme().components.table.table.tableContainer.boxShadow, () => useTheme().components.table.table.tableContainer.backgroundColor);
+const TableScroller = _styled.div.withConfig({
+  displayName: "Tablestyle__TableScroller",
   componentId: "RedisUI__sc-o0xfty-1"
-})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;", ""], () => {
+})(["flex:1;width:100%;overflow:auto;", ""], () => {
   const {
     table
   } = useTableContext();
@@ -18,33 +18,66 @@ const Table = _styled.table.withConfig({
       overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
     `;
 });
-const TableHead = _styled.thead.attrs((props) => ({
-  "data-role": "table-header",
-  ...props
-})).withConfig({
-  displayName: "Tablestyle__TableHead",
+const TableTopBar = _styled.div.withConfig({
+  displayName: "Tablestyle__TableTopBar",
   componentId: "RedisUI__sc-o0xfty-2"
-})(["display:table;table-layout:fixed;", ""], () => {
+})(["", ""], () => {
+  const styles = useTheme().components.table.table.topBar;
+  return css`
+      display: flex;
+      align-items: center;
+      gap: ${styles.gap};
+      padding: ${styles.padding};
+      min-height: ${styles.minHeight};
+      border-bottom: ${styles.separator.width} solid ${styles.separator.color};
+      background-color: ${styles.bgColor};
+    `;
+});
+const TableBottomBar = _styled.div.withConfig({
+  displayName: "Tablestyle__TableBottomBar",
+  componentId: "RedisUI__sc-o0xfty-3"
+})(["", ""], () => {
+  const styles = useTheme().components.table.table.bottomBar;
+  return css`
+      display: flex;
+      align-items: center;
+      gap: ${styles.gap};
+      padding: ${styles.padding};
+      min-height: ${styles.minHeight};
+      border-top: ${styles.separator.width} solid ${styles.separator.color};
+      background-color: ${styles.bgColor};
+    `;
+});
+const Table = _styled.table.withConfig({
+  displayName: "Tablestyle__Table",
+  componentId: "RedisUI__sc-o0xfty-4"
+})(["border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;min-width:", ";"], () => {
   const {
+    table,
     minWidth
   } = useTableContext();
-  return css`
-      min-width: ${minWidth || void 0};
-    `;
+  return table.getRowModel().rows.length && minWidth || void 0;
 });
+const TableHead = _styled.thead.attrs((props) => ({
+  "data-role": "table-header",
+  ...props
+})).withConfig({
+  displayName: "Tablestyle__TableHead",
+  componentId: "RedisUI__sc-o0xfty-5"
+})(["position:sticky;top:0;z-index:3;background-color:", ";"], () => useTheme().components.table.table.tableHeaderRow.bgColor);
 const TableHeaderRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
-  componentId: "RedisUI__sc-o0xfty-3"
-})(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
+  componentId: "RedisUI__sc-o0xfty-6"
+})(["height:", ";"], () => useTheme().components.table.table.tableHeaderRow.minHeight);
 const SortableHeadingCompose = _styled.button.withConfig({
   displayName: "Tablestyle__SortableHeadingCompose",
-  componentId: "RedisUI__sc-o0xfty-4"
+  componentId: "RedisUI__sc-o0xfty-7"
 })(["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"
+  componentId: "RedisUI__sc-o0xfty-8"
 })(["flex:0 1 auto;white-space:inherit;text-align:start;", ""], ({
   $isTextual
 }) => $isTextual ? null : css`
@@ -52,28 +85,18 @@ const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
           align-items: center;
           justify-content: flex-start;
         `);
-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;overflow:hidden;&[aria-sort]{cursor:pointer;}&: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 TableHeaderCell = _styled.th.withConfig({
+  displayName: "Tablestyle__TableHeaderCell",
+  componentId: "RedisUI__sc-o0xfty-9"
+})(["padding:", ";color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;overflow:hidden;border-bottom:", " solid ", ";&[aria-sort]{cursor:pointer;}&:not(:last-child)::after{content:'';position:absolute;inset-inline-end:0;inset-block:", ";border-right:", " solid ", ";}"], () => useTheme().components.table.table.tableHeaderCell.padding, () => useTheme().components.table.table.tableHeaderCell.color, () => useTheme().components.table.table.tableHeaderRow.separator.width, () => useTheme().components.table.table.tableHeaderRow.separator.color, () => useTheme().components.table.table.tableHeaderCell.separator.blockPadding, () => useTheme().components.table.table.tableHeaderCell.separator.width, () => useTheme().components.table.table.tableHeaderCell.separator.color);
 const TableBody = _styled.tbody.withConfig({
   displayName: "Tablestyle__TableBody",
-  componentId: "RedisUI__sc-o0xfty-7"
-})(["", " 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};
-    `;
-});
+  componentId: "RedisUI__sc-o0xfty-10"
+})([""]);
 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,&: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, ({
+  componentId: "RedisUI__sc-o0xfty-11"
+})(["> *{border-top:", " solid transparent;}&:not(:first-child) > *{border-top-color:", ";}height:", ";transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus,&:focus-within{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", ""], () => useTheme().components.table.table.tableBodyRow.separator.width, () => useTheme().components.table.table.tableBodyRow.separator.color, () => useTheme().components.table.table.tableBodyRow.minHeight, ({
   onClick
 }) => onClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
   $stripedRows
@@ -84,11 +107,11 @@ const TableBodyRow = _styled.tr.withConfig({
     `);
 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);
+  componentId: "RedisUI__sc-o0xfty-12"
+})(["color:", ";padding:", ";text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => useTheme().components.table.table.tableBodyCell.color, () => useTheme().components.table.table.tableBodyCell.padding);
 const EmptyStateContainer = _styled.div.withConfig({
   displayName: "Tablestyle__EmptyStateContainer",
-  componentId: "RedisUI__sc-o0xfty-10"
+  componentId: "RedisUI__sc-o0xfty-13"
 })(["text-align:center;"]);
 export {
   EmptyStateContainer,
@@ -98,8 +121,11 @@ export {
   TableBody,
   TableBodyCell,
   TableBodyRow,
+  TableBottomBar,
   TableContainer,
   TableHead,
+  TableHeaderCell,
   TableHeaderRow,
-  TableTh
+  TableScroller,
+  TableTopBar
 };

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

@@ -1,32 +1,25 @@
-import type { CellContext, ColumnDef, PaginationState, Row, SortingState } from '@tanstack/react-table';
+import { ReactElement, ReactNode } from 'react';
 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 { TableFilteringParams } from './plugins/FilteringPlugin';
 import { TableRowNavigationParams } from './plugins/RowNavigationPlugin';
+import { OwnPluggableTableProps, RestPluggableTableProps } from './components/PluggableTable/PluggableTable';
+import { TableColumnVisibilityParams } from './plugins/ColumnVisibilityPlugin';
 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;
 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: ColumnDef<T>[];
+export interface TableProps<T extends object> extends TableSortingParams, TableColumnVisibilityParams, TableFilteringParams<T>, TableExpandableRowProps<T>, TablePaginationParams, TableRowSelectionParams<T>, TableRowNavigationParams, Omit<OwnPluggableTableProps<T>, 'tableOptions' | 'pluginsData' | 'emptyStateRender' | 'components'>, RestPluggableTableProps {
     getRowId?: (rowData: T, index: number) => string;
     onRowClick?: (rowData: T) => void;
-    emptyState?: EmptyStateProps['emptyStateRender'];
-    maxHeight?: string;
-    minWidth?: string;
-    stripedRows?: boolean;
-    caption?: string;
+    emptyState?: OwnPluggableTableProps<T>['emptyStateRender'];
 }
+export type ColumnSizeUnit = 'fraction' | 'px' | 'rem';
+/** @deprecated use {@link ColumnSizeUnit} instead */
+export type CellSizingUnits = ColumnSizeUnit;
+export type CellContainerComponent = ({ children }: {
+    children: ReactNode;
+}) => ReactElement;
+export type ColumnCellContainer = 'flex' | 'ellipsis' | CellContainerComponent;

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

@@ -12,7 +12,6 @@ const TableCompose = ({
   pluginsData,
   tableOptions,
   components,
-  maxHeight,
   minWidth,
   stripedRows,
   ...restProps
@@ -31,13 +30,13 @@ const TableCompose = ({
     plugins: mergedPluginsData.context,
     components,
     stripedRows,
-    maxHeight,
     minWidth
   };
   return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContextProvider, {
     value: tableContext,
     children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableContainer, {
-      ...restProps
+      ...restProps,
+      "data-role": "table-container"
     })
   });
 };

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

@@ -11,4 +11,4 @@ export type OwnTableComposeProps<T extends object> = TableMainContextProps & {
 };
 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;
+export declare const TableCompose: <T extends object>({ data, columns, pluginsData, tableOptions, components, minWidth, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,7 +10,6 @@ const TableCompose = ({
   pluginsData,
   tableOptions,
   components,
-  maxHeight,
   minWidth,
   stripedRows,
   ...restProps
@@ -29,13 +28,13 @@ const TableCompose = ({
     plugins: mergedPluginsData.context,
     components,
     stripedRows,
-    maxHeight,
     minWidth
   };
   return jsxRuntimeExports.jsx(TableContextProvider, {
     value: tableContext,
     children: jsxRuntimeExports.jsx(TableContainer, {
-      ...restProps
+      ...restProps,
+      "data-role": "table-container"
     })
   });
 };

package/dist/Table/components/PluggableTable/PluggableTable.cjs

@@ -5,15 +5,21 @@ const compositionComponents = require("./compositionComponents.cjs");
 const PluggableTable = ({
   caption,
   emptyStateRender,
+  topBar,
+  bottomBar,
   ...restProps
 }) => jsxRuntime.jsxRuntimeExports.jsxs(compositionComponents.compositionComponents.Compose, {
   ...restProps,
-  children: [jsxRuntime.jsxRuntimeExports.jsxs(compositionComponents.compositionComponents.Root, {
+  children: [jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.TopBar, {
+    children: topBar
+  }), jsxRuntime.jsxRuntimeExports.jsxs(compositionComponents.compositionComponents.Root, {
     children: [jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.SRCaption, {
       caption
     }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Header, {}), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.EmptyState, {
       emptyStateRender
     }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Body, {})]
+  }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.BottomBar, {
+    children: bottomBar
   }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Pagination, {}), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.SRSortingNotification, {})]
 });
 exports.PluggableTable = PluggableTable;

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

@@ -4,7 +4,9 @@ import { OwnTableComposeProps, RestTableComposeProps } from '../Compose/Compose'
 export type OwnPluggableTableProps<T extends object> = OwnTableComposeProps<T> & {
     caption?: string;
     emptyStateRender?: (() => ReactNode) | string;
+    topBar?: ReactNode;
+    bottomBar?: ReactNode;
 };
 export type RestPluggableTableProps = ChildFree<RestTableComposeProps>;
 export type PluggableTableProps<T extends object> = OwnPluggableTableProps<T> & RestPluggableTableProps;
-export declare const PluggableTable: <T extends object>({ caption, emptyStateRender, ...restProps }: PluggableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const PluggableTable: <T extends object>({ caption, emptyStateRender, topBar, bottomBar, ...restProps }: PluggableTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/PluggableTable/PluggableTable.js

@@ -3,15 +3,21 @@ import { compositionComponents } from "./compositionComponents.js";
 const PluggableTable = ({
   caption,
   emptyStateRender,
+  topBar,
+  bottomBar,
   ...restProps
 }) => jsxRuntimeExports.jsxs(compositionComponents.Compose, {
   ...restProps,
-  children: [jsxRuntimeExports.jsxs(compositionComponents.Root, {
+  children: [jsxRuntimeExports.jsx(compositionComponents.TopBar, {
+    children: topBar
+  }), jsxRuntimeExports.jsxs(compositionComponents.Root, {
     children: [jsxRuntimeExports.jsx(compositionComponents.SRCaption, {
       caption
     }), jsxRuntimeExports.jsx(compositionComponents.Header, {}), jsxRuntimeExports.jsx(compositionComponents.EmptyState, {
       emptyStateRender
     }), jsxRuntimeExports.jsx(compositionComponents.Body, {})]
+  }), jsxRuntimeExports.jsx(compositionComponents.BottomBar, {
+    children: bottomBar
   }), jsxRuntimeExports.jsx(compositionComponents.Pagination, {}), jsxRuntimeExports.jsx(compositionComponents.SRSortingNotification, {})]
 });
 export {

package/dist/Table/components/PluggableTable/compositionComponents.cjs

@@ -8,8 +8,12 @@ const EmptyState = require("../EmptyState/EmptyState.cjs");
 const TableBody = require("../TableBody/TableBody.cjs");
 const TablePagination = require("../TablePagination/TablePagination.cjs");
 const SRSortingNotification = require("../TableHeaderCell/SRSortingNotification.cjs");
+const TableTopBar = require("../TableTopBar/TableTopBar.cjs");
+const TableBottomBar = require("../TableBottomBar/TableBottomBar.cjs");
 const compositionComponents = {
   Compose: Compose.TableCompose,
+  TopBar: TableTopBar.TableTopBar,
+  BottomBar: TableBottomBar.TableBottomBar,
   Root: TableRoot.TableRoot,
   SRCaption: HiddenCaption.HiddenCaption,
   Header: TableHeader.TableHeader,

package/dist/Table/components/PluggableTable/compositionComponents.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { SRSortingNotification } from '../TableHeaderCell/SRSortingNotification';
 export declare const compositionComponents: {
-    Compose: <T extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, minWidth, stripedRows, ...restProps }: import("../Compose/Compose").TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Compose: <T extends object>({ data, columns, pluginsData, tableOptions, components, minWidth, stripedRows, ...restProps }: import("../Compose/Compose").TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;
+    TopBar: (props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
+    BottomBar: (props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
     Root: (props: import("react").HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;
     SRCaption: ({ caption }: {
         caption?: string | undefined;
@@ -12,7 +14,7 @@ export declare const compositionComponents: {
             Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
         };
         Cell: (<T_3 extends object>(props: import("../TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_3> & import("../TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: <T_4 extends object>(props: import("../TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_4> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+            Compose: <T_4 extends object>(props: import("../TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_4> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
             SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
                 Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
                     SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -26,7 +28,7 @@ export declare const compositionComponents: {
     Body: (<T_5 extends object>(props: import("../TableBody/TableBody").RestTableBodyProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: import("../TableBody/components/Compose/Compose").TableBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
         Row: (<T_6 extends object>(props: import("../TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_6> & import("../TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
+            Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "children" | "content"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
             useHandleClickableRow: <T_7 extends object>({ row, onClick, onKeyDown }: {
                 row: import("@tanstack/table-core").Row<T_7>;
                 onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
@@ -38,7 +40,7 @@ export declare const compositionComponents: {
         };
         ExpandableRow: <T_8 extends object>(props: import("../TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_8> & import("../TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
         Cell: (<T_9 extends object>(props: import("../TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_9> & import("../TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: <T_10 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("../TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_10> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+            Compose: <T_10 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & import("../TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_10> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
         };
     };
     Pagination: (() => import("react/jsx-runtime").JSX.Element | null) & {

package/dist/Table/components/PluggableTable/compositionComponents.js

@@ -6,8 +6,12 @@ import { EmptyState } from "../EmptyState/EmptyState.js";
 import { TableBody } from "../TableBody/TableBody.js";
 import TablePagination from "../TablePagination/TablePagination.js";
 import { SRSortingNotification } from "../TableHeaderCell/SRSortingNotification.js";
+import { TableTopBar } from "../TableTopBar/TableTopBar.js";
+import { TableBottomBar } from "../TableBottomBar/TableBottomBar.js";
 const compositionComponents = {
   Compose: TableCompose,
+  TopBar: TableTopBar,
+  BottomBar: TableBottomBar,
   Root: TableRoot,
   SRCaption: HiddenCaption,
   Header: TableHeader,

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

@@ -6,7 +6,7 @@ export type TableBodyProps = RestTableBodyProps;
 export declare const TableBody: (<T extends object>(props: TableBodyProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: (props: TableBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
     Row: (<T_1 extends object>(props: import("../TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_1> & import("../TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
-        Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
+        Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "children" | "content"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
         useHandleClickableRow: <T_2 extends object>({ row, onClick, onKeyDown }: {
             row: import("@tanstack/table-core").Row<T_2>;
             onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
@@ -18,6 +18,6 @@ export declare const TableBody: (<T extends object>(props: TableBodyProps) => im
     };
     ExpandableRow: <T_3 extends object>(props: import("../TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_3> & import("../TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
     Cell: (<T_4 extends object>(props: import("../TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_4> & import("../TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-        Compose: <T_5 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("../TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_5> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+        Compose: <T_5 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & import("../TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_5> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
     };
 };

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

@@ -5,5 +5,5 @@ export type OwnTableBodyCellProps<T extends object> = OwnTableBodyCellComposePro
 export type RestTableBodyCellProps = ChildFree<RestTableBodyCellComposeProps>;
 export type TableBodyCellProps<T extends object> = OwnTableBodyCellProps<T> & RestTableBodyCellProps;
 export declare const TableBodyCell: (<T extends object>(props: OwnTableBodyCellProps<T> & RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-    Compose: <T_1 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & OwnTableBodyCellComposeProps<T_1> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+    Compose: <T_1 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & OwnTableBodyCellComposeProps<T_1> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
 };

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const CellContainers_style = require("./CellContainers.style.cjs");
+const EllipsisContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(CellContainers_style.FlexContainer, {
+  children: jsxRuntime.jsxRuntimeExports.jsx(CellContainers_style.EllipsisContainer, {
+    ...props,
+    ellipsis: true,
+    tooltipOnEllipsis: true
+  })
+});
+const containers = {
+  flex: CellContainers_style.FlexContainer,
+  ellipsis: EllipsisContainer
+};
+const getCellContainer = (containerOrType) => {
+  if (!containerOrType) return void 0;
+  if (typeof containerOrType === "string") return containers[containerOrType];
+  return containerOrType;
+};
+exports.getCellContainer = getCellContainer;

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.d.ts

@@ -0,0 +1,2 @@
+import type { CellContainerComponent, ColumnCellContainer } from '../../../../Table.types';
+export declare const getCellContainer: (containerOrType: ColumnCellContainer | undefined) => CellContainerComponent | undefined;

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.js

@@ -0,0 +1,21 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { FlexContainer, EllipsisContainer as EllipsisContainer$1 } from "./CellContainers.style.js";
+const EllipsisContainer = (props) => jsxRuntimeExports.jsx(FlexContainer, {
+  children: jsxRuntimeExports.jsx(EllipsisContainer$1, {
+    ...props,
+    ellipsis: true,
+    tooltipOnEllipsis: true
+  })
+});
+const containers = {
+  flex: FlexContainer,
+  ellipsis: EllipsisContainer
+};
+const getCellContainer = (containerOrType) => {
+  if (!containerOrType) return void 0;
+  if (typeof containerOrType === "string") return containers[containerOrType];
+  return containerOrType;
+};
+export {
+  getCellContainer
+};

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.style.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexContainer = _styled__default.default(redisUiComponents.FlexGroup).withConfig({
+  displayName: "CellContainersstyle__FlexContainer",
+  componentId: "RedisUI__sc-1w37zg2-0"
+})(["height:100%;width:100%;max-width:100%;overflow:hidden;svg{flex:none;}"]);
+const EllipsisContainer = _styled__default.default(redisUiComponents.Typography.Base).withConfig({
+  displayName: "CellContainersstyle__EllipsisContainer",
+  componentId: "RedisUI__sc-1w37zg2-1"
+})(["flex:0 1 auto;white-space:inherit;text-align:start;"]);
+exports.EllipsisContainer = EllipsisContainer;
+exports.FlexContainer = FlexContainer;

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const FlexContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("@redislabsdev/redis-ui-components").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const EllipsisContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.style.js

@@ -0,0 +1,14 @@
+import _styled from "styled-components";
+import { FlexGroup, Typography } from "@redislabsdev/redis-ui-components";
+const FlexContainer = _styled(FlexGroup).withConfig({
+  displayName: "CellContainersstyle__FlexContainer",
+  componentId: "RedisUI__sc-1w37zg2-0"
+})(["height:100%;width:100%;max-width:100%;overflow:hidden;svg{flex:none;}"]);
+const EllipsisContainer = _styled(Typography.Base).withConfig({
+  displayName: "CellContainersstyle__EllipsisContainer",
+  componentId: "RedisUI__sc-1w37zg2-1"
+})(["flex:0 1 auto;white-space:inherit;text-align:start;"]);
+export {
+  EllipsisContainer,
+  FlexContainer
+};

package/dist/Table/components/TableBodyCell/components/CellContainers/CellContainers.test.d.ts

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

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

@@ -3,14 +3,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const redisUiComponents = require("@redislabsdev/redis-ui-components");
 const table_utils = require("../../../../utils/table.utils.cjs");
+const CellContainers = require("../CellContainers/CellContainers.cjs");
 const Table_style = require("../../../../Table.style.cjs");
 const TableBodyCellCompose = redisUiComponents.forwardRefWithGenerics(({
   cell,
   style,
+  children,
   ...restProps
 }, ref) => {
-  var _a, _b;
-  const columnCellProps = (_b = (_a = cell.column.columnDef).getCellProps) == null ? void 0 : _b.call(_a, cell.row.original, cell);
+  const {
+    getCellProps,
+    cellContainer
+  } = cell.column.columnDef;
+  const columnCellProps = getCellProps == null ? void 0 : getCellProps(cell.row.original, cell);
+  const CellContainer = CellContainers.getCellContainer(cellContainer);
   return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
     ...restProps,
     ...columnCellProps,
@@ -19,7 +25,10 @@ const TableBodyCellCompose = redisUiComponents.forwardRefWithGenerics(({
       width: table_utils.getWidth(cell.column),
       ...style,
       ...columnCellProps == null ? void 0 : columnCellProps.style
-    }
+    },
+    children: CellContainer ? jsxRuntime.jsxRuntimeExports.jsx(CellContainer, {
+      children
+    }) : children
   });
 });
 exports.TableBodyCellCompose = TableBodyCellCompose;

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

@@ -6,4 +6,4 @@ export type OwnTableBodyCellComposeProps<T extends object> = {
 };
 export type RestTableBodyCellComposeProps = ComposeElementProps<HTMLTableCellElement>;
 export type TableBodyCellComposeProps<T extends object> = RestTableBodyCellComposeProps & OwnTableBodyCellComposeProps<T>;
-export declare const TableBodyCellCompose: <T extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & OwnTableBodyCellComposeProps<T> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+export declare const TableBodyCellCompose: <T extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & OwnTableBodyCellComposeProps<T> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;

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

@@ -1,14 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
 import { getWidth } from "../../../../utils/table.utils.js";
+import { getCellContainer } from "../CellContainers/CellContainers.js";
 import { TableBodyCell } from "../../../../Table.style.js";
 const TableBodyCellCompose = forwardRefWithGenerics(({
   cell,
   style,
+  children,
   ...restProps
 }, ref) => {
-  var _a, _b;
-  const columnCellProps = (_b = (_a = cell.column.columnDef).getCellProps) == null ? void 0 : _b.call(_a, cell.row.original, cell);
+  const {
+    getCellProps,
+    cellContainer
+  } = cell.column.columnDef;
+  const columnCellProps = getCellProps == null ? void 0 : getCellProps(cell.row.original, cell);
+  const CellContainer = getCellContainer(cellContainer);
   return jsxRuntimeExports.jsx(TableBodyCell, {
     ...restProps,
     ...columnCellProps,
@@ -17,7 +23,10 @@ const TableBodyCellCompose = forwardRefWithGenerics(({
       width: getWidth(cell.column),
       ...style,
       ...columnCellProps == null ? void 0 : columnCellProps.style
-    }
+    },
+    children: CellContainer ? jsxRuntimeExports.jsx(CellContainer, {
+      children
+    }) : children
   });
 });
 export {

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

@@ -8,7 +8,7 @@ export type OwnTableBodyRowProps<T extends object> = {
 export type RestTableBodyRowProps = ChildFree<RestTableBodyRowComposeProps>;
 export type TableBodyRowProps<T extends object> = OwnTableBodyRowProps<T> & RestTableBodyRowProps;
 export declare const TableBodyRow: (<T extends object>(props: OwnTableBodyRowProps<T> & RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
-    Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
+    Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "children" | "content"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
     useHandleClickableRow: <T_1 extends object>({ row, onClick, onKeyDown }: {
         row: Row<T_1>;
         onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;

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

@@ -2,4 +2,4 @@
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
 export type RestTableBodyRowComposeProps = ComposeElementProps<HTMLTableRowElement>;
 export type TableBodyRowComposeProps = RestTableBodyRowComposeProps;
-export declare const TableBodyRowCompose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
+export declare const TableBodyRowCompose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "children" | "content"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;