@redis-ui/table 3.3.2 → 3.5.1

package/dist/Table/Table.cjs

@@ -71,6 +71,8 @@ const Table = Object.assign(({
   filterFns,
   // column visibility
   columnVisibility,
+  // meta
+  meta,
   // rest
   ...restProps
 }) => {
@@ -140,7 +142,8 @@ const Table = Object.assign(({
       emptyStateRender: emptyState
     },
     tableOptions: {
-      getRowId
+      getRowId,
+      meta
     },
     pluginsData: [clickableRowPluginData, sortingPluginData, columnVisibilityPluginData, filteringPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });

package/dist/Table/Table.d.ts

@@ -2,10 +2,29 @@
 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, 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) & {
+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, meta, ...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;
+    TopBar: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Divider: (props: Omit<import("@redislabsdev/redis-ui-components").FlexDividerProps, "orientation">) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ text, ...restProps }: import("@redislabsdev/redis-ui-components").ChildFree<import("@redislabsdev/redis-ui-components").TypographyHeadingProps> & {
+            text: string;
+        }) => import("react/jsx-runtime").JSX.Element;
+        TitleGroup: ({ icon: Icon, title, infoTip, ...restProps }: import("./components/TableTopBar/components/TitleGroup/TitleGroup.types").TableTopBarTitleGroupProps) => import("react/jsx-runtime").JSX.Element;
+        SearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter" | "readOnly"> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("@redislabsdev/redis-ui-components").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+            Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>, "onChange" | "defaultValue"> & {
+                readonlyRender?: import("@redislabsdev/redis-ui-components/dist/Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+                readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+            }) => import("react/jsx-runtime").JSX.Element;
+            ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("@redislabsdev/redis-ui-components").IconButtonProps> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+            Tag: import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
+            StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
+            LoadingIndicator: ({ loading, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+            SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+        }, any, {}, never>;
+    };
+    BottomBar: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Divider: (props: Omit<import("@redislabsdev/redis-ui-components").FlexDividerProps, "orientation">) => import("react/jsx-runtime").JSX.Element;
+    };
     Root: (props: import("react").HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;
     SRCaption: ({ caption }: {
         caption?: string | undefined;

package/dist/Table/Table.js

@@ -69,6 +69,8 @@ const Table = Object.assign(({
   filterFns,
   // column visibility
   columnVisibility,
+  // meta
+  meta,
   // rest
   ...restProps
 }) => {
@@ -138,7 +140,8 @@ const Table = Object.assign(({
       emptyStateRender: emptyState
     },
     tableOptions: {
-      getRowId
+      getRowId,
+      meta
     },
     pluginsData: [clickableRowPluginData, sortingPluginData, columnVisibilityPluginData, filteringPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData, rowNavigationPluginData]
   });

package/dist/Table/Table.style.cjs

@@ -22,14 +22,16 @@ const TableScroller = _styled__default.default.div.withConfig({
       overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
     `;
 });
-const TableTopBar = _styled__default.default.div.withConfig({
-  displayName: "Tablestyle__TableTopBar",
+const TableSearchInput = _styled__default.default(redisUiComponents.SearchInput).withConfig({
+  displayName: "Tablestyle__TableSearchInput",
   componentId: "RedisUI__sc-o0xfty-2"
+})(["width:", ";border-color:", ";&:where(:hover,:has(input:not(:placeholder-shown))){border-color:", ";}"], () => redisUiStyles.useTheme().components.tableHeading.searchInput.width, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.hover.borderColor);
+const TableTopBar = _styled__default.default(redisUiComponents.FlexGroup).withConfig({
+  displayName: "Tablestyle__TableTopBar",
+  componentId: "RedisUI__sc-o0xfty-3"
 })(["", ""], () => {
   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};
@@ -37,14 +39,12 @@ const TableTopBar = _styled__default.default.div.withConfig({
       background-color: ${styles.bgColor};
     `;
 });
-const TableBottomBar = _styled__default.default.div.withConfig({
+const TableBottomBar = _styled__default.default(redisUiComponents.FlexGroup).withConfig({
   displayName: "Tablestyle__TableBottomBar",
-  componentId: "RedisUI__sc-o0xfty-3"
+  componentId: "RedisUI__sc-o0xfty-4"
 })(["", ""], () => {
   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};
@@ -54,7 +54,7 @@ const TableBottomBar = _styled__default.default.div.withConfig({
 });
 const Table = _styled__default.default.table.withConfig({
   displayName: "Tablestyle__Table",
-  componentId: "RedisUI__sc-o0xfty-4"
+  componentId: "RedisUI__sc-o0xfty-5"
 })(["border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;min-width:", ";"], () => {
   const {
     table,
@@ -67,21 +67,21 @@ const TableHead = _styled__default.default.thead.attrs((props) => ({
   ...props
 })).withConfig({
   displayName: "Tablestyle__TableHead",
-  componentId: "RedisUI__sc-o0xfty-5"
+  componentId: "RedisUI__sc-o0xfty-6"
 })(["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-6"
+  componentId: "RedisUI__sc-o0xfty-7"
 })(["height:", ";"], () => redisUiStyles.useTheme().components.table.table.tableHeaderRow.minHeight);
 const SortableHeadingCompose = _styled__default.default.button.withConfig({
   displayName: "Tablestyle__SortableHeadingCompose",
-  componentId: "RedisUI__sc-o0xfty-7"
+  componentId: "RedisUI__sc-o0xfty-8"
 })(["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-8"
+  componentId: "RedisUI__sc-o0xfty-9"
 })(["flex:0 1 auto;white-space:inherit;text-align:start;", ""], ({
   $isTextual
 }) => $isTextual ? null : _styled.css`
@@ -91,15 +91,15 @@ const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography
         `);
 const TableHeaderCell = _styled__default.default.th.withConfig({
   displayName: "Tablestyle__TableHeaderCell",
-  componentId: "RedisUI__sc-o0xfty-9"
+  componentId: "RedisUI__sc-o0xfty-10"
 })(["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-10"
+  componentId: "RedisUI__sc-o0xfty-11"
 })([""]);
 const TableBodyRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
-  componentId: "RedisUI__sc-o0xfty-11"
+  componentId: "RedisUI__sc-o0xfty-12"
 })(["> *{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, ({
@@ -111,11 +111,11 @@ const TableBodyRow = _styled__default.default.tr.withConfig({
     `);
 const TableBodyCell = _styled__default.default.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
-  componentId: "RedisUI__sc-o0xfty-12"
+  componentId: "RedisUI__sc-o0xfty-13"
 })(["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-13"
+  componentId: "RedisUI__sc-o0xfty-14"
 })(["text-align:center;"]);
 exports.EmptyStateContainer = EmptyStateContainer;
 exports.HeaderTitleWrapper = HeaderTitleWrapper;
@@ -130,4 +130,5 @@ exports.TableHead = TableHead;
 exports.TableHeaderCell = TableHeaderCell;
 exports.TableHeaderRow = TableHeaderRow;
 exports.TableScroller = TableScroller;
+exports.TableSearchInput = TableSearchInput;
 exports.TableTopBar = TableTopBar;

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

@@ -2,8 +2,19 @@
 /// <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 TableSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter" | "readOnly"> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("@redislabsdev/redis-ui-components").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>, "onChange" | "defaultValue"> & {
+        readonlyRender?: import("@redislabsdev/redis-ui-components/dist/Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+        readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("@redislabsdev/redis-ui-components").IconButtonProps> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    Tag: import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
+    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
+    LoadingIndicator: ({ loading, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+    SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+}, any, {}, never>;
+export declare const TableTopBar: 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 TableBottomBar: 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 Table: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {
     id?: string | undefined;

package/dist/Table/Table.style.js

@@ -1,6 +1,6 @@
 import _styled, { css } from "styled-components";
 import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
-import { Typography } from "@redislabsdev/redis-ui-components";
+import { SearchInput, FlexGroup, Typography } from "@redislabsdev/redis-ui-components";
 import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style.js";
 import { useTableContext } from "./Table.context.js";
 const TableContainer = _styled.div.withConfig({
@@ -18,14 +18,16 @@ const TableScroller = _styled.div.withConfig({
       overflow-x: ${table.getRowModel().rows.length ? "auto" : "hidden"};
     `;
 });
-const TableTopBar = _styled.div.withConfig({
-  displayName: "Tablestyle__TableTopBar",
+const TableSearchInput = _styled(SearchInput).withConfig({
+  displayName: "Tablestyle__TableSearchInput",
   componentId: "RedisUI__sc-o0xfty-2"
+})(["width:", ";border-color:", ";&:where(:hover,:has(input:not(:placeholder-shown))){border-color:", ";}"], () => useTheme().components.tableHeading.searchInput.width, () => useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => useTheme().components.tableHeading.searchInput.states.hover.borderColor);
+const TableTopBar = _styled(FlexGroup).withConfig({
+  displayName: "Tablestyle__TableTopBar",
+  componentId: "RedisUI__sc-o0xfty-3"
 })(["", ""], () => {
   const styles = useTheme().components.table.table.topBar;
   return css`
-      display: flex;
-      align-items: center;
       gap: ${styles.gap};
       padding: ${styles.padding};
       min-height: ${styles.minHeight};
@@ -33,14 +35,12 @@ const TableTopBar = _styled.div.withConfig({
       background-color: ${styles.bgColor};
     `;
 });
-const TableBottomBar = _styled.div.withConfig({
+const TableBottomBar = _styled(FlexGroup).withConfig({
   displayName: "Tablestyle__TableBottomBar",
-  componentId: "RedisUI__sc-o0xfty-3"
+  componentId: "RedisUI__sc-o0xfty-4"
 })(["", ""], () => {
   const styles = useTheme().components.table.table.bottomBar;
   return css`
-      display: flex;
-      align-items: center;
       gap: ${styles.gap};
       padding: ${styles.padding};
       min-height: ${styles.minHeight};
@@ -50,7 +50,7 @@ const TableBottomBar = _styled.div.withConfig({
 });
 const Table = _styled.table.withConfig({
   displayName: "Tablestyle__Table",
-  componentId: "RedisUI__sc-o0xfty-4"
+  componentId: "RedisUI__sc-o0xfty-5"
 })(["border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;min-width:", ";"], () => {
   const {
     table,
@@ -63,21 +63,21 @@ const TableHead = _styled.thead.attrs((props) => ({
   ...props
 })).withConfig({
   displayName: "Tablestyle__TableHead",
-  componentId: "RedisUI__sc-o0xfty-5"
+  componentId: "RedisUI__sc-o0xfty-6"
 })(["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-6"
+  componentId: "RedisUI__sc-o0xfty-7"
 })(["height:", ";"], () => useTheme().components.table.table.tableHeaderRow.minHeight);
 const SortableHeadingCompose = _styled.button.withConfig({
   displayName: "Tablestyle__SortableHeadingCompose",
-  componentId: "RedisUI__sc-o0xfty-7"
+  componentId: "RedisUI__sc-o0xfty-8"
 })(["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-8"
+  componentId: "RedisUI__sc-o0xfty-9"
 })(["flex:0 1 auto;white-space:inherit;text-align:start;", ""], ({
   $isTextual
 }) => $isTextual ? null : css`
@@ -87,15 +87,15 @@ const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
         `);
 const TableHeaderCell = _styled.th.withConfig({
   displayName: "Tablestyle__TableHeaderCell",
-  componentId: "RedisUI__sc-o0xfty-9"
+  componentId: "RedisUI__sc-o0xfty-10"
 })(["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-10"
+  componentId: "RedisUI__sc-o0xfty-11"
 })([""]);
 const TableBodyRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
-  componentId: "RedisUI__sc-o0xfty-11"
+  componentId: "RedisUI__sc-o0xfty-12"
 })(["> *{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, ({
@@ -107,11 +107,11 @@ const TableBodyRow = _styled.tr.withConfig({
     `);
 const TableBodyCell = _styled.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
-  componentId: "RedisUI__sc-o0xfty-12"
+  componentId: "RedisUI__sc-o0xfty-13"
 })(["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-13"
+  componentId: "RedisUI__sc-o0xfty-14"
 })(["text-align:center;"]);
 export {
   EmptyStateContainer,
@@ -127,5 +127,6 @@ export {
   TableHeaderCell,
   TableHeaderRow,
   TableScroller,
+  TableSearchInput,
   TableTopBar
 };

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

@@ -1,3 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { TableMeta } from '@tanstack/react-table';
 import { TableExpandableRowParams } from './plugins/ExpandableRowPlugin';
 import { TablePaginationParams } from './plugins/PaginationPlugin';
 import { TableRowSelectionParams } from './plugins/RowSelectionPlugin';
@@ -14,7 +16,12 @@ export interface TableProps<T extends object> extends TableSortingParams, TableC
     getRowId?: (rowData: T, index: number) => string;
     onRowClick?: (rowData: T) => void;
     emptyState?: OwnPluggableTableProps<T>['emptyStateRender'];
+    meta?: TableMeta<T>;
 }
 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/PluggableTable/compositionComponents.d.ts

@@ -2,8 +2,27 @@
 import { SRSortingNotification } from '../TableHeaderCell/SRSortingNotification';
 export declare const compositionComponents: {
     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;
+    TopBar: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Divider: (props: Omit<import("@redislabsdev/redis-ui-components").FlexDividerProps, "orientation">) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ text, ...restProps }: import("@redislabsdev/redis-ui-components").ChildFree<import("@redislabsdev/redis-ui-components").TypographyHeadingProps> & {
+            text: string;
+        }) => import("react/jsx-runtime").JSX.Element;
+        TitleGroup: ({ icon: Icon, title, infoTip, ...restProps }: import("../TableTopBar/components/TitleGroup/TitleGroup.types").TableTopBarTitleGroupProps) => import("react/jsx-runtime").JSX.Element;
+        SearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter" | "readOnly"> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("@redislabsdev/redis-ui-components").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+            Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>, "onChange" | "defaultValue"> & {
+                readonlyRender?: import("@redislabsdev/redis-ui-components/dist/Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+                readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+            }) => import("react/jsx-runtime").JSX.Element;
+            ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("@redislabsdev/redis-ui-components").IconButtonProps> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+            Tag: import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
+            StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
+            LoadingIndicator: ({ loading, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+            SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+        }, any, {}, never>;
+    };
+    BottomBar: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Divider: (props: Omit<import("@redislabsdev/redis-ui-components").FlexDividerProps, "orientation">) => import("react/jsx-runtime").JSX.Element;
+    };
     Root: (props: import("react").HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;
     SRCaption: ({ caption }: {
         caption?: string | undefined;

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.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/TableBottomBar/TableBottomBar.cjs

@@ -2,11 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
+const Divider = require("../TableTopBar/components/Divider/Divider.cjs");
 const Table_style = require("../../Table.style.cjs");
-const TableBottomBar = (props) => (
+const TableBottomBar = Object.assign((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
-);
+), {
+  Divider: Divider.TableBarDivider
+});
 exports.TableBottomBar = TableBottomBar;

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

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

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

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

package/dist/Table/components/TableTopBar/TableTopBar.cjs

@@ -2,11 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
+const TitleGroup = require("./components/TitleGroup/TitleGroup.cjs");
+const Divider = require("./components/Divider/Divider.cjs");
+const Title = require("./components/Title/Title.cjs");
 const Table_style = require("../../Table.style.cjs");
-const TableTopBar = (props) => (
+const TableTopBar = Object.assign((props) => (
   // eslint-disable-next-line react/destructuring-assignment
   React.Children.toArray(props.children).filter((ch) => ch !== "").length ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTopBar, {
     ...props
   }) : null
-);
+), {
+  Divider: Divider.TableBarDivider,
+  Title: Title.TableTitle,
+  TitleGroup: TitleGroup.TableTopBarTitleGroup,
+  SearchInput: Table_style.TableSearchInput
+});
 exports.TableTopBar = TableTopBar;

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

@@ -1,2 +1,20 @@
+/// <reference types="react" />
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
-export declare const TableTopBar: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TableTopBar: ((props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Divider: (props: Omit<import("@redislabsdev/redis-ui-components").FlexDividerProps, "orientation">) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ text, ...restProps }: import("@redislabsdev/redis-ui-components").ChildFree<import("@redislabsdev/redis-ui-components").TypographyHeadingProps> & {
+        text: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    TitleGroup: ({ icon: Icon, title, infoTip, ...restProps }: import("./components/TitleGroup/TitleGroup.types").TableTopBarTitleGroupProps) => import("react/jsx-runtime").JSX.Element;
+    SearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "parser" | "formatter" | "readOnly"> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("@redislabsdev/redis-ui-components").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+        Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<ComposeElementProps<HTMLElement>, "onChange" | "defaultValue"> & {
+            readonlyRender?: import("@redislabsdev/redis-ui-components/dist/Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+            readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+        }) => import("react/jsx-runtime").JSX.Element;
+        ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("@redislabsdev/redis-ui-components").IconButtonProps> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+        Tag: import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
+        StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
+        LoadingIndicator: ({ loading, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+        SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+    }, any, {}, never>;
+};

package/dist/Table/components/TableTopBar/TableTopBar.js

@@ -1,12 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { Children } from "react";
-import { TableTopBar as TableTopBar$1 } from "../../Table.style.js";
-const TableTopBar = (props) => (
+import { TableTopBarTitleGroup } from "./components/TitleGroup/TitleGroup.js";
+import { TableBarDivider } from "./components/Divider/Divider.js";
+import { TableTitle } from "./components/Title/Title.js";
+import { TableTopBar as TableTopBar$1, TableSearchInput } from "../../Table.style.js";
+const TableTopBar = Object.assign((props) => (
   // eslint-disable-next-line react/destructuring-assignment
   Children.toArray(props.children).filter((ch) => ch !== "").length ? jsxRuntimeExports.jsx(TableTopBar$1, {
     ...props
   }) : null
-);
+), {
+  Divider: TableBarDivider,
+  Title: TableTitle,
+  TitleGroup: TableTopBarTitleGroup,
+  SearchInput: TableSearchInput
+});
 export {
   TableTopBar
 };

package/dist/Table/components/TableTopBar/components/Divider/Divider.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const TableBarDivider = (props) => jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.FlexDivider, {
+  padding: "XL",
+  ...props
+});
+exports.TableBarDivider = TableBarDivider;

package/dist/Table/components/TableTopBar/components/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import { FlexDividerProps } from '@redislabsdev/redis-ui-components';
+export declare const TableBarDivider: (props: Omit<FlexDividerProps, 'orientation'>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableTopBar/components/Divider/Divider.js

@@ -0,0 +1,9 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { FlexDivider } from "@redislabsdev/redis-ui-components";
+const TableBarDivider = (props) => jsxRuntimeExports.jsx(FlexDivider, {
+  padding: "XL",
+  ...props
+});
+export {
+  TableBarDivider
+};

package/dist/Table/components/TableTopBar/components/Divider/Divider.test.d.ts

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

package/dist/Table/components/TableTopBar/components/Title/Title.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const TableTitle = ({
+  text,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.Typography.Heading, {
+  size: "S",
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  ...restProps,
+  children: text
+});
+exports.TableTitle = TableTitle;

package/dist/Table/components/TableTopBar/components/Title/Title.d.ts

@@ -0,0 +1,4 @@
+import { ChildFree, TypographyHeadingProps } from '@redislabsdev/redis-ui-components';
+export declare const TableTitle: ({ text, ...restProps }: ChildFree<TypographyHeadingProps> & {
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableTopBar/components/Title/Title.js

@@ -0,0 +1,15 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Typography } from "@redislabsdev/redis-ui-components";
+const TableTitle = ({
+  text,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Typography.Heading, {
+  size: "S",
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  ...restProps,
+  children: text
+});
+export {
+  TableTitle
+};

package/dist/Table/components/TableTopBar/components/Title/Title.test.d.ts

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

package/dist/Table/components/TableTopBar/components/TitleGroup/TitleGroup.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const Title = require("../Title/Title.cjs");
+const TableTopBarTitleGroup = ({
+  icon: Icon,
+  title,
+  infoTip,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(redisUiComponents.FlexGroup, {
+  gap: "XS",
+  ...restProps,
+  children: [Icon && jsxRuntime.jsxRuntimeExports.jsx(Icon, {}), jsxRuntime.jsxRuntimeExports.jsx(Title.TableTitle, {
+    text: title
+  }), infoTip && jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.MoreInfoIcon, {
+    tooltip: infoTip
+  })]
+});
+exports.TableTopBarTitleGroup = TableTopBarTitleGroup;

package/dist/Table/components/TableTopBar/components/TitleGroup/TitleGroup.d.ts

@@ -0,0 +1,2 @@
+import { TableTopBarTitleGroupProps } from './TitleGroup.types';
+export declare const TableTopBarTitleGroup: ({ icon: Icon, title, infoTip, ...restProps }: TableTopBarTitleGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableTopBar/components/TitleGroup/TitleGroup.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { FlexGroup, MoreInfoIcon } from "@redislabsdev/redis-ui-components";
+import { TableTitle } from "../Title/Title.js";
+const TableTopBarTitleGroup = ({
+  icon: Icon,
+  title,
+  infoTip,
+  ...restProps
+}) => jsxRuntimeExports.jsxs(FlexGroup, {
+  gap: "XS",
+  ...restProps,
+  children: [Icon && jsxRuntimeExports.jsx(Icon, {}), jsxRuntimeExports.jsx(TableTitle, {
+    text: title
+  }), infoTip && jsxRuntimeExports.jsx(MoreInfoIcon, {
+    tooltip: infoTip
+  })]
+});
+export {
+  TableTopBarTitleGroup
+};

package/dist/Table/components/TableTopBar/components/TitleGroup/TitleGroup.test.d.ts

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

package/dist/Table/components/TableTopBar/components/TitleGroup/TitleGroup.types.d.ts

@@ -0,0 +1,10 @@
+import { IconType } from '@redislabsdev/redis-ui-icons';
+import { FlexGroupProps } from '@redislabsdev/redis-ui-components';
+type OwnTableTopBarTitleGroupProps = {
+    icon?: IconType;
+    title: string;
+    infoTip?: string;
+};
+type RestTableTopBarTitleGroupProps = Omit<FlexGroupProps, 'direction' | 'children'>;
+export type TableTopBarTitleGroupProps = OwnTableTopBarTitleGroupProps & RestTableTopBarTitleGroupProps;
+export {};

package/dist/Table/tanStackExtendedTypes.d.ts

@@ -1,7 +1,7 @@
 import '@tanstack/table-core';
 import { Cell, Header } from '@tanstack/react-table';
 import { HTMLAttributes } from 'react';
-import { ColumnSizeUnit } from './Table.types';
+import { ColumnCellContainer, ColumnSizeUnit } from './Table.types';
 declare module '@tanstack/table-core' {
     interface StringHeaderIdentifier {
         isHeaderHidden?: boolean;
@@ -9,6 +9,7 @@ declare module '@tanstack/table-core' {
         sizeUnit?: ColumnSizeUnit;
         getHeaderCellProps?: VoidFunction;
         getCellProps?: VoidFunction;
+        cellContainer?: ColumnCellContainer;
     }
     interface IdIdentifier<TData, TValue> {
         isHeaderHidden?: boolean;
@@ -16,5 +17,6 @@ declare module '@tanstack/table-core' {
         sizeUnit?: ColumnSizeUnit;
         getHeaderCellProps?: (header: Header<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
         getCellProps?: (data: TData, cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
+        cellContainer?: ColumnCellContainer;
     }
 }

package/dist/Table/utils/plugin.utils.d.ts

@@ -1,7 +1,7 @@
 import { TableOptions } from '@tanstack/table-core';
 import { ColumnDef, RowData } from '@tanstack/react-table';
 import { SetOptional } from 'type-fest';
-export type PartialTableOptions<T extends RowData> = Partial<Omit<TableOptions<T>, 'columns' | 'data' | 'getRowId' | 'onStateChange' | 'getCoreRowModel' | 'defaultColumn' | 'debugTable' | 'debugRows' | 'debugHeaders' | 'debugColumns' | 'debugCells' | 'debugAll' | 'autoResetAll' | 'meta'>>;
+export type PartialTableOptions<T extends RowData> = Partial<Omit<TableOptions<T>, 'columns' | 'data' | 'getRowId' | 'onStateChange' | 'getCoreRowModel' | 'defaultColumn' | 'debugTable' | 'debugRows' | 'debugHeaders' | 'debugColumns' | 'debugCells' | 'debugAll' | 'autoResetAll'>>;
 export type UserTableOptions<T extends RowData> = Omit<SetOptional<TableOptions<T>, 'getCoreRowModel'>, 'data' | 'columns'>;
 export type TablePluginData<T extends RowData> = {
     /** Partial table options that will be smartly merged with other table options */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/table",
   "license": "UNLICENSED",
-  "version": "3.3.2",
+  "version": "3.5.1",
   "type": "module",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
@@ -29,11 +29,11 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0",
-    "@redis-ui/styles": "^14.4.2"
+    "@redis-ui/styles": "^14.9.1"
   },
   "dependencies": {
-    "@redis-ui/components": "^41.5.0",
-    "@redis-ui/icons": "^6.6.0",
+    "@redis-ui/components": "^42.5.1",
+    "@redis-ui/icons": "^6.7.1",
     "@tanstack/react-table": "^8.9.8",
     "type-fest": "^3.13.1"
   },