@redis-ui/table 2.25.0 → 3.3.2

package/dist/Table/Table.cjs

@@ -19,6 +19,8 @@ const ShowOnRowHover_style = require("./components/ShowOnRowHover/ShowOnRowHover
 const ExpandAllRowsButton = require("./components/ExpandRowButton/ExpandAllRowsButton.cjs");
 const useExpanderColumn = require("./components/ExpandRowButton/useExpanderColumn.cjs");
 const useRowSelectionColumn = require("./components/RowSelection/useRowSelectionColumn.cjs");
+const FilteringPlugin = require("./plugins/FilteringPlugin.cjs");
+const ColumnVisibilityPlugin = require("./plugins/ColumnVisibilityPlugin.cjs");
 const Table = Object.assign(({
   columns,
   caption,
@@ -26,7 +28,6 @@ const Table = Object.assign(({
   data,
   getRowId,
   emptyState,
-  maxHeight,
   minWidth,
   stripedRows = false,
   // sorting
@@ -61,12 +62,32 @@ const Table = Object.assign(({
   getRowCanSelect,
   selectRowOnClick,
   // row navigation
-  enableRowNavigation = false
+  enableRowNavigation = false,
+  // filtering and searching
+  enableFiltering,
+  columnFilters,
+  globalFilter,
+  globalFilterFn,
+  filterFns,
+  // column visibility
+  columnVisibility,
+  // rest
+  ...restProps
 }) => {
   const clickableRowPluginData = ClickableRowPlugin.useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
     shouldClickOnEnter: true
   });
+  const columnVisibilityPluginData = ColumnVisibilityPlugin.useColumnVisibilityPlugin({
+    columnVisibility
+  });
+  const filteringPluginData = FilteringPlugin.useFilteringPlugin({
+    enableFiltering,
+    columnFilters,
+    globalFilter,
+    globalFilterFn,
+    filterFns
+  });
   const sortingPluginData = SortingPlugin.useSortingPlugin({
     enableSorting,
     defaultSorting,
@@ -109,10 +130,10 @@ const Table = Object.assign(({
     enableRowNavigation
   });
   return jsxRuntime.jsxRuntimeExports.jsx(Table.PluggableTable, {
+    ...restProps,
     ...{
       data,
       columns,
-      maxHeight,
       minWidth,
       stripedRows,
       caption,
@@ -121,7 +142,7 @@ const Table = Object.assign(({
     tableOptions: {
       getRowId
     },
-    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
+    pluginsData: [clickableRowPluginData, sortingPluginData, columnVisibilityPluginData, filteringPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });
 }, {
   ExpandRowButton: ExpandRowButton.ExpandRowButton,
@@ -136,6 +157,8 @@ const Table = Object.assign(({
   // plugins
   useClickableRowPlugin: ClickableRowPlugin.useClickableRowPlugin,
   useSortingPlugin: SortingPlugin.useSortingPlugin,
+  useColumnVisibilityPlugin: ColumnVisibilityPlugin.useColumnVisibilityPlugin,
+  useFilteringPlugin: FilteringPlugin.useFilteringPlugin,
   usePaginationPlugin: PaginationPlugin.usePaginationPlugin,
   useExpandableRowPlugin: ExpandableRowPlugin.useExpandableRowPlugin,
   useRowSelectionPlugin: RowSelectionPlugin.useRowSelectionPlugin,

package/dist/Table/Table.context.d.ts

@@ -12,7 +12,6 @@ export type CompositionContextProps<T extends object> = {
 };
 export type TableMainContextProps = {
     stripedRows?: boolean;
-    maxHeight?: string;
     minWidth?: string;
 };
 export type TableContextProps<T extends object> = TableMainContextProps & {

package/dist/Table/Table.d.ts

@@ -2,8 +2,10 @@
 import './tanStackExtendedTypes';
 import type { Row } from '@tanstack/react-table';
 import { TableProps } from './Table.types';
-declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, maxHeight, minWidth, stripedRows, enableSorting, defaultSorting, onSortingChange, sorting, manualSorting, defaultExpanded, expanded, onExpandedChange, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, totalPageCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, selectRowOnClick, enableRowNavigation }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: <T_1 extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, minWidth, stripedRows, ...restProps }: import("./components/Compose/Compose").TableComposeProps<T_1>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, minWidth, stripedRows, enableSorting, defaultSorting, onSortingChange, sorting, manualSorting, defaultExpanded, expanded, onExpandedChange, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, totalPageCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, selectRowOnClick, enableRowNavigation, enableFiltering, columnFilters, globalFilter, globalFilterFn, filterFns, columnVisibility, ...restProps }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <T_1 extends object>({ data, columns, pluginsData, tableOptions, components, minWidth, stripedRows, ...restProps }: import("./components/Compose/Compose").TableComposeProps<T_1>) => 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;
@@ -14,7 +16,7 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
             Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
         };
         Cell: (<T_4 extends object>(props: import("./components/TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_4> & import("./components/TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: <T_5 extends object>(props: import("./components/TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_5> & 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_5 extends object>(props: import("./components/TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_5> & 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>>;
@@ -28,7 +30,7 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
     Body: (<T_6 extends object>(props: import("./components/TableBody/TableBody").RestTableBodyProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: import("./components/TableBody/components/Compose/Compose").TableBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
         Row: (<T_7 extends object>(props: import("./components/TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_7> & import("./components/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_8 extends object>({ row, onClick, onKeyDown }: {
                 row: Row<T_8>;
                 onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
@@ -40,7 +42,7 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
         };
         ExpandableRow: <T_9 extends object>(props: import("./components/TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_9> & import("./components/TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
         Cell: (<T_10 extends object>(props: import("./components/TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_10> & import("./components/TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-            Compose: <T_11 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("./components/TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_11> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
+            Compose: <T_11 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "children" | "content"> & import("./components/TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_11> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
         };
     };
     Pagination: (() => import("react/jsx-runtime").JSX.Element | null) & {
@@ -69,24 +71,26 @@ declare const Table: (<T extends object>({ columns, caption, onRowClick, data, g
     ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandRowButton").ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     ExpandAllRowsButton: ({ table, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandAllRowsButton").ExpandAllRowsButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     useExpanderColumn: <T_12 extends object>({ allowExpandAll, ...colDef }?: import("./components/ExpandRowButton/useExpanderColumn").UseExpanderColumnParams<T_12>) => import("@tanstack/react-table").ColumnDef<T_12, unknown>;
-    ExpandedRow: <T_13 extends object>({ row, keepInDom, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_13>) => import("react/jsx-runtime").JSX.Element | null;
-    AnimatedExpandedRow: <T_14 extends object>({ rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_14>) => import("react/jsx-runtime").JSX.Element;
+    ExpandedRow: <T_13 extends object>({ row, keepInDom, rowRef, contentWrapper, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_13>) => import("react/jsx-runtime").JSX.Element | null;
+    AnimatedExpandedRow: <T_14 extends object>({ rowRef, contentWrapper, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_14>) => import("react/jsx-runtime").JSX.Element;
     RowSelectionButton: <T_15 extends object>({ row, ...restProps }: import("./components/RowSelection/RowSelectionButton").RowSelectionButtonProps<T_15>) => import("react/jsx-runtime").JSX.Element;
     HeaderMultiRowSelectionButton: <T_16 extends object>({ table, managePage, ...restProps }: import("./components/RowSelection/HeaderMultiRowSelectionButton").HeaderMultiRowSelectionButtonProps<T_16>) => import("react/jsx-runtime").JSX.Element | null;
     useRowSelectionColumn: <T_17 extends object>({ disableSelectAll, managePage, ...colDef }?: import("./components/RowSelection/useRowSelectionColumn").UseRowSelectionColumnParams<T_17>) => import("@tanstack/react-table").ColumnDef<T_17, unknown>;
     ShowOnActiveRow: import("styled-components").StyledComponent<"div", any, {}, never>;
     useClickableRowPlugin: <T_18 extends object>({ getCanRowClick, onRowClick, shouldClickOnEnter }: Partial<import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_18>>) => import(".").TablePluginData<T_18>;
     useSortingPlugin: <T_19 extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }?: import("./plugins/SortingPlugin").TableSortingParams) => import(".").TablePluginData<T_19>;
+    useColumnVisibilityPlugin: ({ columnVisibility }: import("./plugins/ColumnVisibilityPlugin").TableColumnVisibilityParams) => import(".").TablePluginData<any>;
+    useFilteringPlugin: <T_20 extends object>({ globalFilter, globalFilterFn, columnFilters, enableFiltering, filterFns }?: import("./plugins/FilteringPlugin").TableFilteringParams<T_20>) => import(".").TablePluginData<T_20>;
     usePaginationPlugin: ({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, totalPageCount, pageSizes, paginationEnabled }: import("./plugins/PaginationPlugin").TablePaginationParams) => import(".").TablePluginData<any>;
-    useExpandableRowPlugin: <T_20 extends object>({ defaultExpanded, expanded, onExpandedChange, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: import("./plugins/ExpandableRowPlugin").TableExpandableRowParams<T_20>) => import(".").TablePluginData<T_20>;
-    useRowSelectionPlugin: <T_21 extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, selectRowOnClick }: import("./plugins/RowSelectionPlugin").TableRowSelectionParams<T_21>) => import(".").TablePluginData<T_21>;
+    useExpandableRowPlugin: <T_21 extends object>({ defaultExpanded, expanded, onExpandedChange, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: import("./plugins/ExpandableRowPlugin").TableExpandableRowParams<T_21>) => import(".").TablePluginData<T_21>;
+    useRowSelectionPlugin: <T_22 extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, selectRowOnClick }: import("./plugins/RowSelectionPlugin").TableRowSelectionParams<T_22>) => import(".").TablePluginData<T_22>;
     useRowNavigationPlugin: ({ enableRowNavigation }: import("./plugins/RowNavigationPlugin").TableRowNavigationParams) => import(".").TablePluginData<any>;
-    useTableContext: <T_22 extends object = object>() => import("./Table.context").TableContextProps<T_22>;
-    useComposeContext: <T_23 extends object, C extends import("./Table.context").CompositionContextProps<T_23> = import("./Table.context").CompositionContextProps<T_23>>(defaults: Partial<C>) => C;
-    useClickableRowContext: <T_24 extends object>() => import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_24> | undefined;
-    useExpandableRowContext: <T_25 extends object>() => import("./plugins/ExpandableRowPlugin").TableExpandableRowContext<T_25> | undefined;
+    useTableContext: <T_23 extends object = object>() => import("./Table.context").TableContextProps<T_23>;
+    useComposeContext: <T_24 extends object, C extends import("./Table.context").CompositionContextProps<T_24> = import("./Table.context").CompositionContextProps<T_24>>(defaults: Partial<C>) => C;
+    useClickableRowContext: <T_25 extends object>() => import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_25> | undefined;
+    useExpandableRowContext: <T_26 extends object>() => import("./plugins/ExpandableRowPlugin").TableExpandableRowContext<T_26> | undefined;
     usePaginationContext: () => import("./plugins/PaginationPlugin").TablePaginationContext | undefined;
     useSortingContext: () => import("./plugins/SortingPlugin").TableSortingContext | undefined;
-    PluggableTable: <T_26 extends object>({ caption, emptyStateRender, ...restProps }: import("./components/PluggableTable/PluggableTable").PluggableTableProps<T_26>) => import("react/jsx-runtime").JSX.Element;
+    PluggableTable: <T_27 extends object>({ caption, emptyStateRender, topBar, bottomBar, ...restProps }: import("./components/PluggableTable/PluggableTable").PluggableTableProps<T_27>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

package/dist/Table/Table.js

@@ -17,6 +17,8 @@ import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style
 import { ExpandAllRowsButton } from "./components/ExpandRowButton/ExpandAllRowsButton.js";
 import { useExpanderColumn } from "./components/ExpandRowButton/useExpanderColumn.js";
 import { useRowSelectionColumn } from "./components/RowSelection/useRowSelectionColumn.js";
+import { useFilteringPlugin } from "./plugins/FilteringPlugin.js";
+import { useColumnVisibilityPlugin } from "./plugins/ColumnVisibilityPlugin.js";
 const Table = Object.assign(({
   columns,
   caption,
@@ -24,7 +26,6 @@ const Table = Object.assign(({
   data,
   getRowId,
   emptyState,
-  maxHeight,
   minWidth,
   stripedRows = false,
   // sorting
@@ -59,12 +60,32 @@ const Table = Object.assign(({
   getRowCanSelect,
   selectRowOnClick,
   // row navigation
-  enableRowNavigation = false
+  enableRowNavigation = false,
+  // filtering and searching
+  enableFiltering,
+  columnFilters,
+  globalFilter,
+  globalFilterFn,
+  filterFns,
+  // column visibility
+  columnVisibility,
+  // rest
+  ...restProps
 }) => {
   const clickableRowPluginData = useClickableRowPlugin({
     onRowClick: onRowClick && ((row) => onRowClick(row.original)),
     shouldClickOnEnter: true
   });
+  const columnVisibilityPluginData = useColumnVisibilityPlugin({
+    columnVisibility
+  });
+  const filteringPluginData = useFilteringPlugin({
+    enableFiltering,
+    columnFilters,
+    globalFilter,
+    globalFilterFn,
+    filterFns
+  });
   const sortingPluginData = useSortingPlugin({
     enableSorting,
     defaultSorting,
@@ -107,10 +128,10 @@ const Table = Object.assign(({
     enableRowNavigation
   });
   return jsxRuntimeExports.jsx(Table.PluggableTable, {
+    ...restProps,
     ...{
       data,
       columns,
-      maxHeight,
       minWidth,
       stripedRows,
       caption,
@@ -119,7 +140,7 @@ const Table = Object.assign(({
     tableOptions: {
       getRowId
     },
-    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
+    pluginsData: [clickableRowPluginData, sortingPluginData, columnVisibilityPluginData, filteringPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });
 }, {
   ExpandRowButton,
@@ -134,6 +155,8 @@ const Table = Object.assign(({
   // plugins
   useClickableRowPlugin,
   useSortingPlugin,
+  useColumnVisibilityPlugin,
+  useFilteringPlugin,
   usePaginationPlugin,
   useExpandableRowPlugin,
   useRowSelectionPlugin,

package/dist/Table/Table.style.cjs

@@ -10,11 +10,11 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const TableContainer = _styled__default.default.div.withConfig({
   displayName: "Tablestyle__TableContainer",
   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",
+})(["width:100%;border-radius:", ";box-shadow:", ";background-color:", ";overflow:hidden;display:flex;flex-direction:column;"], () => redisUiStyles.useTheme().components.table.table.tableContainer.borderRadius, () => redisUiStyles.useTheme().components.table.table.tableContainer.boxShadow, () => redisUiStyles.useTheme().components.table.table.tableContainer.backgroundColor);
+const TableScroller = _styled__default.default.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
   } = Table_context.useTableContext();
@@ -22,33 +22,66 @@ const Table = _styled__default.default.table.withConfig({
       overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
     `;
 });
-const TableHead = _styled__default.default.thead.attrs((props) => ({
-  "data-role": "table-header",
-  ...props
-})).withConfig({
-  displayName: "Tablestyle__TableHead",
+const TableTopBar = _styled__default.default.div.withConfig({
+  displayName: "Tablestyle__TableTopBar",
   componentId: "RedisUI__sc-o0xfty-2"
-})(["display:table;table-layout:fixed;", ""], () => {
+})(["", ""], () => {
+  const styles = redisUiStyles.useTheme().components.table.table.topBar;
+  return _styled.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__default.default.div.withConfig({
+  displayName: "Tablestyle__TableBottomBar",
+  componentId: "RedisUI__sc-o0xfty-3"
+})(["", ""], () => {
+  const styles = redisUiStyles.useTheme().components.table.table.bottomBar;
+  return _styled.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__default.default.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
   } = Table_context.useTableContext();
-  return _styled.css`
-      min-width: ${minWidth || void 0};
-    `;
+  return table.getRowModel().rows.length && minWidth || void 0;
 });
+const TableHead = _styled__default.default.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:", ";"], () => redisUiStyles.useTheme().components.table.table.tableHeaderRow.bgColor);
 const TableHeaderRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
-  componentId: "RedisUI__sc-o0xfty-3"
-})(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
+  componentId: "RedisUI__sc-o0xfty-6"
+})(["height:", ";"], () => redisUiStyles.useTheme().components.table.table.tableHeaderRow.minHeight);
 const SortableHeadingCompose = _styled__default.default.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", redisUiStyles.getFocusStyle("0.6rem"));
 const HeaderTitleWrapper = _styled__default.default(redisUiComponents.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 : _styled.css`
@@ -56,28 +89,18 @@ const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography
           align-items: center;
           justify-content: flex-start;
         `);
-const TableTh = _styled__default.default.th.withConfig({
-  displayName: "Tablestyle__TableTh",
-  componentId: "RedisUI__sc-o0xfty-6"
-})(["padding:1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;word-break:break-word;line-height:normal;position:relative;overflow:hidden;&[aria-sort]{cursor:pointer;}&: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 TableHeaderCell = _styled__default.default.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 ", ";}"], () => redisUiStyles.useTheme().components.table.table.tableHeaderCell.padding, () => redisUiStyles.useTheme().components.table.table.tableHeaderCell.color, () => redisUiStyles.useTheme().components.table.table.tableHeaderRow.separator.width, () => redisUiStyles.useTheme().components.table.table.tableHeaderRow.separator.color, () => redisUiStyles.useTheme().components.table.table.tableHeaderCell.separator.blockPadding, () => redisUiStyles.useTheme().components.table.table.tableHeaderCell.separator.width, () => redisUiStyles.useTheme().components.table.table.tableHeaderCell.separator.color);
 const TableBody = _styled__default.default.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
-  } = Table_context.useTableContext();
-  return _styled.css`
-      max-height: ${maxHeight};
-      min-width: ${table.getRowModel().rows.length && minWidth || void 0};
-    `;
-});
+  componentId: "RedisUI__sc-o0xfty-10"
+})([""]);
 const TableBodyRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
-  componentId: "RedisUI__sc-o0xfty-8"
-})(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus,&:focus-within{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => redisUiStyles.useTheme().components.table.table.tableBodyRow.borderTop, ({
+  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;}}", ""], () => redisUiStyles.useTheme().components.table.table.tableBodyRow.separator.width, () => redisUiStyles.useTheme().components.table.table.tableBodyRow.separator.color, () => redisUiStyles.useTheme().components.table.table.tableBodyRow.minHeight, ({
   onClick
 }) => onClick ? "pointer" : "default", () => redisUiStyles.useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover_style.ShowOnRowHover, ({
   $stripedRows
@@ -88,11 +111,11 @@ const TableBodyRow = _styled__default.default.tr.withConfig({
     `);
 const TableBodyCell = _styled__default.default.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
-  componentId: "RedisUI__sc-o0xfty-9"
-})(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => redisUiStyles.useTheme().components.table.table.tableBodyCell.color);
+  componentId: "RedisUI__sc-o0xfty-12"
+})(["color:", ";padding:", ";text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => redisUiStyles.useTheme().components.table.table.tableBodyCell.color, () => redisUiStyles.useTheme().components.table.table.tableBodyCell.padding);
 const EmptyStateContainer = _styled__default.default.div.withConfig({
   displayName: "Tablestyle__EmptyStateContainer",
-  componentId: "RedisUI__sc-o0xfty-10"
+  componentId: "RedisUI__sc-o0xfty-13"
 })(["text-align:center;"]);
 exports.EmptyStateContainer = EmptyStateContainer;
 exports.HeaderTitleWrapper = HeaderTitleWrapper;
@@ -101,7 +124,10 @@ exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableBodyCell = TableBodyCell;
 exports.TableBodyRow = TableBodyRow;
+exports.TableBottomBar = TableBottomBar;
 exports.TableContainer = TableContainer;
 exports.TableHead = TableHead;
+exports.TableHeaderCell = TableHeaderCell;
 exports.TableHeaderRow = TableHeaderRow;
-exports.TableTh = TableTh;
+exports.TableScroller = TableScroller;
+exports.TableTopBar = TableTopBar;

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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 /// <reference types="react" />
 export declare const TableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableScroller: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableTopBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableBottomBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {
     id?: string | undefined;
     onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
+    children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -22,8 +23,11 @@ export declare const TableHead: import("styled-components").StyledComponent<"the
     hidden?: boolean | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
+    title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
@@ -105,7 +109,6 @@ export declare const TableHead: import("styled-components").StyledComponent<"the
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -272,7 +275,7 @@ export declare const TableHead: import("styled-components").StyledComponent<"the
     ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     theme: any;
     'data-role': string;
-}, "id" | "onChange" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "ref" | "key" | "data-role">;
+}, "id" | "onChange" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "ref" | "key" | "data-role">;
 export declare const TableHeaderRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
 export declare const SortableHeadingCompose: import("styled-components").StyledComponent<"button", any, {
     $custom: boolean;
@@ -280,7 +283,7 @@ export declare const SortableHeadingCompose: import("styled-components").StyledC
 export declare const HeaderTitleWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
     $isTextual: boolean;
 }, never>;
-export declare const TableTh: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const TableHeaderCell: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
 export declare const TableBodyRow: import("styled-components").StyledComponent<"tr", any, {
     $stripedRows: boolean;