@redis-ui/table 2.25.0 → 3.3.2

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,20 @@
-import type { CellContext, ColumnDef, PaginationState, Row, SortingState } from '@tanstack/react-table';
 import { TableExpandableRowParams } from './plugins/ExpandableRowPlugin';
 import { TablePaginationParams } from './plugins/PaginationPlugin';
 import { TableRowSelectionParams } from './plugins/RowSelectionPlugin';
 import { TableSortingParams } from './plugins/SortingPlugin';
-import { EmptyStateProps } from './components/EmptyState/EmptyState';
+import { 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;

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/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/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;

package/dist/Table/components/TableBottomBar/TableBottomBar.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Table_style = require("../../Table.style.cjs");
+const TableBottomBar = (props) => (
+  // eslint-disable-next-line react/destructuring-assignment
+  React.Children.toArray(props.children).filter((ch) => ch !== "").length ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBottomBar, {
+    ...props
+  }) : null
+);
+exports.TableBottomBar = TableBottomBar;

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

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export declare const TableBottomBar: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/TableBottomBar/TableBottomBar.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Children } from "react";
+import { TableBottomBar as TableBottomBar$1 } from "../../Table.style.js";
+const TableBottomBar = (props) => (
+  // eslint-disable-next-line react/destructuring-assignment
+  Children.toArray(props.children).filter((ch) => ch !== "").length ? jsxRuntimeExports.jsx(TableBottomBar$1, {
+    ...props
+  }) : null
+);
+export {
+  TableBottomBar
+};

package/dist/Table/components/TableBottomBar/TableBottomBar.test.d.ts

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

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.cjs

@@ -6,6 +6,7 @@ const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/i
 const TableAnimatedExpandedRow_style = require("./TableAnimatedExpandedRow.style.cjs");
 const TableAnimatedExpandedRow = ({
   rowRef,
+  contentWrapper = (content) => content,
   ...restProps
 }) => {
   const innerRowRef = React.useRef(null);
@@ -24,10 +25,16 @@ const TableAnimatedExpandedRow = ({
     }
     return void 0;
   }, [isExpanded]);
+  const wrapContentForAnimation = (content) => jsxRuntime.jsxRuntimeExports.jsx(TableAnimatedExpandedRow_style.AnimatedContainer, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(TableAnimatedExpandedRow_style.AnimatedContent, {
+      children: contentWrapper(content)
+    })
+  });
   return jsxRuntime.jsxRuntimeExports.jsx(TableAnimatedExpandedRow_style.AnimatedExpandedRow, {
     rowRef: composedRowRef,
     ...restProps,
-    keepInDom: true
+    keepInDom: true,
+    contentWrapper: wrapContentForAnimation
   });
 };
 exports.TableAnimatedExpandedRow = TableAnimatedExpandedRow;

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.d.ts

@@ -1,2 +1,2 @@
 import { TableExpandedRowProps } from './TableExpandedRow.types';
-export declare const TableAnimatedExpandedRow: <T extends object>({ rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableAnimatedExpandedRow: <T extends object>({ rowRef, contentWrapper, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.js

@@ -1,9 +1,10 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { useRef, useEffect } from "react";
 import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
-import { AnimatedExpandedRow } from "./TableAnimatedExpandedRow.style.js";
+import { AnimatedExpandedRow, AnimatedContainer, AnimatedContent } from "./TableAnimatedExpandedRow.style.js";
 const TableAnimatedExpandedRow = ({
   rowRef,
+  contentWrapper = (content) => content,
   ...restProps
 }) => {
   const innerRowRef = useRef(null);
@@ -22,10 +23,16 @@ const TableAnimatedExpandedRow = ({
     }
     return void 0;
   }, [isExpanded]);
+  const wrapContentForAnimation = (content) => jsxRuntimeExports.jsx(AnimatedContainer, {
+    children: jsxRuntimeExports.jsx(AnimatedContent, {
+      children: contentWrapper(content)
+    })
+  });
   return jsxRuntimeExports.jsx(AnimatedExpandedRow, {
     rowRef: composedRowRef,
     ...restProps,
-    keepInDom: true
+    keepInDom: true,
+    contentWrapper: wrapContentForAnimation
   });
 };
 export {

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.cjs

@@ -7,5 +7,15 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const AnimatedExpandedRow = _styled__default.default(TableExpandedRow.TableExpandedRow).withConfig({
   displayName: "TableAnimatedExpandedRowstyle__AnimatedExpandedRow",
   componentId: "RedisUI__sc-l3awb3-0"
-})(["&&{display:grid;}visibility:hidden;grid-template-rows:0fr;transition:all 0.5s;&[data-expanded='true']{visibility:visible;grid-template-rows:1fr;}"]);
+})(["@supports not (transition-behavior:allow-discrete){&&{display:table-row;}visibility:hidden;&[data-expanded='true']{visibility:visible;}}transition:all 0.5s;transition-behavior:allow-discrete;"]);
+const AnimatedContainer = _styled__default.default.div.withConfig({
+  displayName: "TableAnimatedExpandedRowstyle__AnimatedContainer",
+  componentId: "RedisUI__sc-l3awb3-1"
+})(["min-height:0;overflow:hidden;display:grid;grid-template-rows:0fr;transition:all 0.5s;[data-expanded='true']:where(", ") &{grid-template-rows:1fr;}@starting-style{&&{grid-template-rows:0fr;}}"], AnimatedExpandedRow);
+const AnimatedContent = _styled__default.default.div.withConfig({
+  displayName: "TableAnimatedExpandedRowstyle__AnimatedContent",
+  componentId: "RedisUI__sc-l3awb3-2"
+})(["min-height:0;overflow:hidden;"]);
+exports.AnimatedContainer = AnimatedContainer;
+exports.AnimatedContent = AnimatedContent;
 exports.AnimatedExpandedRow = AnimatedExpandedRow;

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.d.ts

@@ -1,2 +1,3 @@
-import { TableExpandedRow } from './TableExpandedRow';
-export declare const AnimatedExpandedRow: typeof TableExpandedRow;
+export declare const AnimatedExpandedRow: import("styled-components").StyledComponent<(<T extends object>({ row, keepInDom, rowRef, contentWrapper, ...restProps }: import("./TableExpandedRow.types").TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element | null), any, {}, never>;
+export declare const AnimatedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AnimatedContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.js

@@ -3,7 +3,17 @@ import { TableExpandedRow } from "./TableExpandedRow.js";
 const AnimatedExpandedRow = _styled(TableExpandedRow).withConfig({
   displayName: "TableAnimatedExpandedRowstyle__AnimatedExpandedRow",
   componentId: "RedisUI__sc-l3awb3-0"
-})(["&&{display:grid;}visibility:hidden;grid-template-rows:0fr;transition:all 0.5s;&[data-expanded='true']{visibility:visible;grid-template-rows:1fr;}"]);
+})(["@supports not (transition-behavior:allow-discrete){&&{display:table-row;}visibility:hidden;&[data-expanded='true']{visibility:visible;}}transition:all 0.5s;transition-behavior:allow-discrete;"]);
+const AnimatedContainer = _styled.div.withConfig({
+  displayName: "TableAnimatedExpandedRowstyle__AnimatedContainer",
+  componentId: "RedisUI__sc-l3awb3-1"
+})(["min-height:0;overflow:hidden;display:grid;grid-template-rows:0fr;transition:all 0.5s;[data-expanded='true']:where(", ") &{grid-template-rows:1fr;}@starting-style{&&{grid-template-rows:0fr;}}"], AnimatedExpandedRow);
+const AnimatedContent = _styled.div.withConfig({
+  displayName: "TableAnimatedExpandedRowstyle__AnimatedContent",
+  componentId: "RedisUI__sc-l3awb3-2"
+})(["min-height:0;overflow:hidden;"]);
 export {
+  AnimatedContainer,
+  AnimatedContent,
   AnimatedExpandedRow
 };

package/dist/Table/components/TableExpandedRow/TableExpandedRow.cjs

@@ -9,6 +9,7 @@ const TableExpandedRow = ({
   row,
   keepInDom,
   rowRef,
+  contentWrapper = (content) => content,
   ...restProps
 }) => {
   const innerRowRef = React.useRef(null);
@@ -34,7 +35,7 @@ const TableExpandedRow = ({
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(TableExpandedRow_style.ExpandedCell, {
       colSpan: row.getVisibleCells().length,
-      children: renderExpandedRow(row)
+      children: contentWrapper(renderExpandedRow(row))
     })
   }) : null;
 };

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

@@ -1,2 +1,2 @@
 import { TableExpandedRowProps } from './TableExpandedRow.types';
-export declare const TableExpandedRow: <T extends object>({ row, keepInDom, rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TableExpandedRow: <T extends object>({ row, keepInDom, rowRef, contentWrapper, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element | null;