@redis-ui/table 2.23.2 → 3.3.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,10 +6,10 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ExpandedRow = _styled__default.default.tr.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedRow",
   componentId: "RedisUI__sc-2hwl98-0"
-})(["display:grid;width:100%;&[data-expanded='false']{display:none;}"]);
+})(["&[data-expanded='false']{display:none;}"]);
 const ExpandedCell = _styled__default.default.td.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedCell",
   componentId: "RedisUI__sc-2hwl98-1"
-})(["width:100%;padding:0;overflow:hidden;"]);
+})(["padding:0;overflow:hidden;"]);
 exports.ExpandedCell = ExpandedCell;
 exports.ExpandedRow = ExpandedRow;

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

@@ -2,11 +2,11 @@ import _styled from "styled-components";
 const ExpandedRow = _styled.tr.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedRow",
   componentId: "RedisUI__sc-2hwl98-0"
-})(["display:grid;width:100%;&[data-expanded='false']{display:none;}"]);
+})(["&[data-expanded='false']{display:none;}"]);
 const ExpandedCell = _styled.td.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedCell",
   componentId: "RedisUI__sc-2hwl98-1"
-})(["width:100%;padding:0;overflow:hidden;"]);
+})(["padding:0;overflow:hidden;"]);
 export {
   ExpandedCell,
   ExpandedRow

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

@@ -1,7 +1,8 @@
-import { HTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
 import { Row } from '@tanstack/react-table';
 export type TableExpandedRowProps<T extends object> = {
     row: Row<T>;
     keepInDom?: boolean;
     rowRef?: Ref<HTMLTableRowElement>;
-} & HTMLAttributes<HTMLTableRowElement>;
+    contentWrapper?: (content: ReactNode) => ReactNode;
+} & Omit<HTMLAttributes<HTMLTableRowElement>, 'children'>;

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

@@ -9,7 +9,7 @@ export declare const TableHeader: (<T extends object>(props: TableHeaderProps) =
         Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
     };
     Cell: (<T_2 extends object>(props: import("../TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_2> & import("../TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-        Compose: <T_3 extends object>(props: import("../TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_3> & 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_3 extends object>(props: import("../TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_3> & 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>>;

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

@@ -5,7 +5,7 @@ export type OwnTableHeaderCellProps<T extends object> = OwnTableHeaderCellCompos
 export type RestTableHeaderCellProps = ChildFree<RestTableHeaderCellComposeProps>;
 export type TableHeaderCellProps<T extends object> = OwnTableHeaderCellProps<T> & RestTableHeaderCellProps;
 export declare const TableHeaderCell: (<T extends object>(props: OwnTableHeaderCellProps<T> & RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-    Compose: <T_1 extends object>(props: OwnTableHeaderCellComposeProps<T_1> & 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_1 extends object>(props: OwnTableHeaderCellComposeProps<T_1> & 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>>;

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

@@ -24,7 +24,7 @@ const TableHeaderCellCompose = redisUiComponents.forwardRefWithGenerics(({
     value: React.useMemo(() => ({
       header
     }), [header]),
-    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHeaderCell, {
       ...restProps,
       ...columnCellProps,
       ref,

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

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

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

@@ -5,7 +5,7 @@ import { useMemo } from "react";
 import { normalizeCellSpan, getCurrentAriaSort } from "../../TableHeaderCell.utils.js";
 import { TableHeaderCellContextProvider } from "../../TableHeaderCell.context.js";
 import { getWidth } from "../../../../utils/table.utils.js";
-import { TableTh } from "../../../../Table.style.js";
+import { TableHeaderCell } from "../../../../Table.style.js";
 const TableHeaderCellCompose = forwardRefWithGenerics(({
   header,
   children,
@@ -22,7 +22,7 @@ const TableHeaderCellCompose = forwardRefWithGenerics(({
     value: useMemo(() => ({
       header
     }), [header]),
-    children: jsxRuntimeExports.jsx(TableTh, {
+    children: jsxRuntimeExports.jsx(TableHeaderCell, {
       ...restProps,
       ...columnCellProps,
       ref,

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.d.ts

@@ -1,5 +1,4 @@
-import { ComponentProps } from 'react';
-import { ChildFree, Typography } from '@redislabsdev/redis-ui-components';
-export type RestTableHeaderCellHeadingProps = ChildFree<ComponentProps<typeof Typography.Body>>;
+import { ChildFree, TypographyBodyProps } from '@redislabsdev/redis-ui-components';
+export type RestTableHeaderCellHeadingProps = ChildFree<TypographyBodyProps>;
 export type TableHeaderCellHeadingProps = RestTableHeaderCellHeadingProps;
 export declare const TableHeaderCellHeading: (props: TableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PaginationInfoLabelProps } from '@redislabsdev/redis-ui-components';
 declare const TablePagination: (() => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: ({ children }: import("@redislabsdev/redis-ui-components").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -10,11 +11,11 @@ declare const TablePagination: (() => import("react/jsx-runtime").JSX.Element |
     InfoLabel: import("styled-components").StyledComponent<({ renderer, ...restProps }: PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
     PageSelect: import("styled-components").StyledComponent<{
         ({ ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     }, any, {}, never>;
     PageSizeSelect: import("styled-components").StyledComponent<{
         ({ pageSizes, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
-        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
     }, any, {}, never>;
     NavigationButton: import("styled-components").StyledComponent<({ navType, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
     PageSizeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/components/TablePagination/TablePagination.style.cjs

@@ -28,7 +28,7 @@ const PaginationBar = _styled__default.default(redisUiComponents.Pagination.Bar)
 })).withConfig({
   displayName: "TablePaginationstyle__PaginationBar",
   componentId: "RedisUI__sc-ccqfi0-1"
-})(["", " width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
+})(["", " flex:none;width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
   const styles = redisUiStyles.useTheme().components.table.pagination.bar;
   return _styled.css`
       font-size: ${styles.fontSize};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const NavigationButton: import("styled-components").StyledComponent<({ navType, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const PaginationBar: import("styled-components").StyledComponent<"nav", any, {
     'aria-label': string;
@@ -7,11 +8,11 @@ export declare const PaginationBar: import("styled-components").StyledComponent<
 export declare const InfoLabel: import("styled-components").StyledComponent<({ renderer, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const PageSizeSelect: import("styled-components").StyledComponent<{
     ({ pageSizes, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
-    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
 }, any, {}, never>;
 export declare const PageSelect: import("styled-components").StyledComponent<{
     ({ ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;
 export declare const PageSizeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PageNavGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/components/TablePagination/TablePagination.style.js

@@ -24,7 +24,7 @@ const PaginationBar = _styled(Pagination.Bar).attrs(({
 })).withConfig({
   displayName: "TablePaginationstyle__PaginationBar",
   componentId: "RedisUI__sc-ccqfi0-1"
-})(["", " width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
+})(["", " flex:none;width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
   const styles = useTheme().components.table.pagination.bar;
   return css`
       font-size: ${styles.fontSize};

package/dist/Table/components/TableRoot/TableRoot.cjs

@@ -5,9 +5,12 @@ const Table_style = require("../../Table.style.cjs");
 const RowNavigationPlugin = require("../../plugins/RowNavigationPlugin.cjs");
 const TableRoot = (props) => {
   const navigationProps = RowNavigationPlugin.useHandleRowNavigationOnTable(props);
-  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.Table, {
-    ...props,
-    ...navigationProps
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableScroller, {
+    "data-role": "table-scroller",
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.Table, {
+      ...props,
+      ...navigationProps
+    })
   });
 };
 exports.TableRoot = TableRoot;

package/dist/Table/components/TableRoot/TableRoot.js

@@ -1,11 +1,14 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { Table } from "../../Table.style.js";
+import { TableScroller, Table } from "../../Table.style.js";
 import { useHandleRowNavigationOnTable } from "../../plugins/RowNavigationPlugin.js";
 const TableRoot = (props) => {
   const navigationProps = useHandleRowNavigationOnTable(props);
-  return jsxRuntimeExports.jsx(Table, {
-    ...props,
-    ...navigationProps
+  return jsxRuntimeExports.jsx(TableScroller, {
+    "data-role": "table-scroller",
+    children: jsxRuntimeExports.jsx(Table, {
+      ...props,
+      ...navigationProps
+    })
   });
 };
 export {

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Table_style = require("../../Table.style.cjs");
+const TableTopBar = (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
+);
+exports.TableTopBar = TableTopBar;

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

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

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

@@ -0,0 +1,12 @@
+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) => (
+  // eslint-disable-next-line react/destructuring-assignment
+  Children.toArray(props.children).filter((ch) => ch !== "").length ? jsxRuntimeExports.jsx(TableTopBar$1, {
+    ...props
+  }) : null
+);
+export {
+  TableTopBar
+};

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

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

package/dist/Table/index.d.ts

@@ -3,3 +3,4 @@ export { ShowOnRowHover } from './components/ShowOnRowHover/ShowOnRowHover.style
 export * from './Table.types';
 export * from './Table.context';
 export { type TablePluginData, buildPluginContext } from './utils/plugin.utils';
+export { calcTableMinSize } from './utils/table.utils';

package/dist/Table/plugins/ColumnVisibilityPlugin.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useColumnVisibilityPlugin = ({
+  columnVisibility
+}) => {
+  return columnVisibility ? {
+    tableOptions: {
+      state: {
+        columnVisibility
+      }
+    }
+  } : void 0;
+};
+exports.useColumnVisibilityPlugin = useColumnVisibilityPlugin;

package/dist/Table/plugins/ColumnVisibilityPlugin.d.ts

@@ -0,0 +1,10 @@
+import { VisibilityState } from '@tanstack/react-table';
+import { TablePluginData } from '../utils/plugin.utils';
+export interface TableColumnVisibilityParams {
+    /** Map of column id to column visibility */
+    columnVisibility?: VisibilityState;
+}
+/**
+ * Table plugin that enables column visibility control from external state only.
+ */
+export declare const useColumnVisibilityPlugin: ({ columnVisibility }: TableColumnVisibilityParams) => TablePluginData<any>;

package/dist/Table/plugins/ColumnVisibilityPlugin.js

@@ -0,0 +1,14 @@
+const useColumnVisibilityPlugin = ({
+  columnVisibility
+}) => {
+  return columnVisibility ? {
+    tableOptions: {
+      state: {
+        columnVisibility
+      }
+    }
+  } : void 0;
+};
+export {
+  useColumnVisibilityPlugin
+};

package/dist/Table/plugins/ColumnVisibilityPlugin.test.d.ts

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

package/dist/Table/plugins/ExpandableRowPlugin.cjs

@@ -1,13 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
 const plugin_utils = require("../utils/plugin.utils.cjs");
 const ClickableRowPlugin = require("./ClickableRowPlugin.cjs");
 const Table_context = require("../Table.context.cjs");
-const index = require("../../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const index$1 = require("../../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const DEFAULT_EXPANDED = {};
 const getTrue = () => true;
 const TableExpandableRowContextKey = "expandableRow";
 const useExpandableRowPlugin = ({
   defaultExpanded,
+  expanded,
+  onExpandedChange,
   getRowCanExpand,
   renderExpandedRow,
   expandRowOnClick,
@@ -19,15 +23,24 @@ const useExpandableRowPlugin = ({
     onRowClick: (row) => row.toggleExpanded(),
     shouldClickOnEnter: true
   });
+  const [expandedState = DEFAULT_EXPANDED, setExpandedState] = index.useControllableState({
+    prop: expanded,
+    defaultProp: defaultExpanded,
+    onChange: onExpandedChange
+  });
   if (!renderExpandedRow && !getSubRows) return void 0;
   return {
     tableOptions: {
-      getExpandedRowModel: index.getExpandedRowModel(),
+      getExpandedRowModel: index$1.getExpandedRowModel(),
       getRowCanExpand: getRowCanExpand || (getSubRows ? void 0 : getTrue),
       getSubRows,
       initialState: defaultExpanded ? {
         expanded: defaultExpanded
-      } : void 0
+      } : void 0,
+      state: {
+        expanded: expandedState
+      },
+      onExpandedChange: setExpandedState
     },
     context: {
       ...plugin_utils.buildPluginContext(TableExpandableRowContextKey, {

package/dist/Table/plugins/ExpandableRowPlugin.d.ts

@@ -23,6 +23,8 @@ export interface TableExpandableRowParams<T extends object> extends TableExpanda
      * When this prop is set, the `renderExpandedRow` and `expandedRowComponent` parameters are not used. */
     getSubRows?: (rowData: T, index: number) => T[] | undefined;
     defaultExpanded?: ExpandedState;
+    expanded?: ExpandedState;
+    onExpandedChange?: (state: ExpandedState) => void;
 }
-export declare const useExpandableRowPlugin: <T extends object>({ defaultExpanded, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: TableExpandableRowParams<T>) => TablePluginData<T>;
+export declare const useExpandableRowPlugin: <T extends object>({ defaultExpanded, expanded, onExpandedChange, getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent, getSubRows }: TableExpandableRowParams<T>) => TablePluginData<T>;
 export declare const useExpandableRowContext: <T extends object>() => TableExpandableRowContext<T> | undefined;

package/dist/Table/plugins/ExpandableRowPlugin.js

@@ -1,11 +1,15 @@
+import { useControllableState } from "../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
 import { buildPluginContext } from "../utils/plugin.utils.js";
 import { useClickableRowPlugin } from "./ClickableRowPlugin.js";
 import { usePluginContext } from "../Table.context.js";
 import { getExpandedRowModel } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const DEFAULT_EXPANDED = {};
 const getTrue = () => true;
 const TableExpandableRowContextKey = "expandableRow";
 const useExpandableRowPlugin = ({
   defaultExpanded,
+  expanded,
+  onExpandedChange,
   getRowCanExpand,
   renderExpandedRow,
   expandRowOnClick,
@@ -17,6 +21,11 @@ const useExpandableRowPlugin = ({
     onRowClick: (row) => row.toggleExpanded(),
     shouldClickOnEnter: true
   });
+  const [expandedState = DEFAULT_EXPANDED, setExpandedState] = useControllableState({
+    prop: expanded,
+    defaultProp: defaultExpanded,
+    onChange: onExpandedChange
+  });
   if (!renderExpandedRow && !getSubRows) return void 0;
   return {
     tableOptions: {
@@ -25,7 +34,11 @@ const useExpandableRowPlugin = ({
       getSubRows,
       initialState: defaultExpanded ? {
         expanded: defaultExpanded
-      } : void 0
+      } : void 0,
+      state: {
+        expanded: expandedState
+      },
+      onExpandedChange: setExpandedState
     },
     context: {
       ...buildPluginContext(TableExpandableRowContextKey, {

package/dist/Table/plugins/FilteringPlugin.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const useFilteringPlugin = ({
+  globalFilter,
+  globalFilterFn = "includesString",
+  columnFilters,
+  enableFiltering = !!globalFilter || !!(columnFilters == null ? void 0 : columnFilters.length),
+  filterFns
+} = {}) => {
+  return enableFiltering ? {
+    tableOptions: {
+      getFilteredRowModel: index.getFilteredRowModel(),
+      state: {
+        globalFilter,
+        columnFilters
+      },
+      enableGlobalFilter: !!globalFilter,
+      enableColumnFilters: !!(columnFilters == null ? void 0 : columnFilters.length),
+      globalFilterFn,
+      filterFns
+    }
+  } : void 0;
+};
+exports.useFilteringPlugin = useFilteringPlugin;

package/dist/Table/plugins/FilteringPlugin.d.ts

@@ -0,0 +1,20 @@
+import { TableOptions, ColumnFiltersState } from '@tanstack/react-table';
+import { TablePluginData } from '../utils/plugin.utils';
+export interface TableFilteringParams<T extends object> extends Pick<TableOptions<T>, 'globalFilterFn' | 'filterFns'> {
+    /**
+     * String, for global search by all the columns<br/>
+     * To disable global search per specific column, set `enableGlobalFilter: false` on `columnDef`
+     */
+    globalFilter?: string;
+    /**
+     * Array of column filters data.<br/>
+     * Do not forget to define filterFn for columns on `columnDef`, depends on column data type
+     */
+    columnFilters?: ColumnFiltersState;
+    /** Set false to disable filtering or for manual filtering out of table */
+    enableFiltering?: boolean;
+}
+/**
+ * This plugin is for outer filtering control (filters data comes from outside), but with inner filtering engine
+ */
+export declare const useFilteringPlugin: <T extends object>({ globalFilter, globalFilterFn, columnFilters, enableFiltering, filterFns }?: TableFilteringParams<T>) => TablePluginData<T>;

package/dist/Table/plugins/FilteringPlugin.js

@@ -0,0 +1,25 @@
+import { getFilteredRowModel } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const useFilteringPlugin = ({
+  globalFilter,
+  globalFilterFn = "includesString",
+  columnFilters,
+  enableFiltering = !!globalFilter || !!(columnFilters == null ? void 0 : columnFilters.length),
+  filterFns
+} = {}) => {
+  return enableFiltering ? {
+    tableOptions: {
+      getFilteredRowModel: getFilteredRowModel(),
+      state: {
+        globalFilter,
+        columnFilters
+      },
+      enableGlobalFilter: !!globalFilter,
+      enableColumnFilters: !!(columnFilters == null ? void 0 : columnFilters.length),
+      globalFilterFn,
+      filterFns
+    }
+  } : void 0;
+};
+export {
+  useFilteringPlugin
+};

package/dist/Table/plugins/FilteringPlugin.test.d.ts

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

package/dist/Table/plugins/PaginationPlugin.d.ts

@@ -13,5 +13,5 @@ export interface TablePaginationParams extends TablePaginationContext {
     totalRowCount?: number;
     totalPageCount?: number;
 }
-export declare const usePaginationPlugin: <T extends object>({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, totalPageCount, pageSizes, paginationEnabled }: TablePaginationParams) => TablePluginData<T>;
+export declare const usePaginationPlugin: ({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, totalPageCount, pageSizes, paginationEnabled }: TablePaginationParams) => TablePluginData<any>;
 export declare const usePaginationContext: () => TablePaginationContext | undefined;

package/dist/Table/plugins/RowNavigationPlugin.d.ts

@@ -16,7 +16,7 @@ export type TableRowNavigationContext = {
 export type TableRowNavigationParams = {
     enableRowNavigation?: boolean;
 };
-export declare const useRowNavigationPlugin: <T extends object>({ enableRowNavigation }: TableRowNavigationParams) => TablePluginData<T>;
+export declare const useRowNavigationPlugin: ({ enableRowNavigation }: TableRowNavigationParams) => TablePluginData<any>;
 export declare const useRowNavigationContext: () => TableRowNavigationContext | undefined;
 type UseHandleRowNavigationOnRowParams<T extends object> = {
     row: Row<T>;