@redis-ui/table 2.25.0 → 3.4.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/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.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/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/tanStackExtendedTypes.d.ts

@@ -1,20 +1,22 @@
 import '@tanstack/table-core';
 import { Cell, Header } from '@tanstack/react-table';
 import { HTMLAttributes } from 'react';
+import { ColumnCellContainer, ColumnSizeUnit } from './Table.types';
 declare module '@tanstack/table-core' {
-    type CellSizingUnits = 'fraction' | 'px' | 'rem';
     interface StringHeaderIdentifier {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
-        sizeUnit?: CellSizingUnits;
+        sizeUnit?: ColumnSizeUnit;
         getHeaderCellProps?: VoidFunction;
         getCellProps?: VoidFunction;
+        cellContainer?: ColumnCellContainer;
     }
     interface IdIdentifier<TData, TValue> {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
-        sizeUnit?: CellSizingUnits;
+        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/table.utils.cjs

@@ -10,4 +10,17 @@ const getWidth = (column) => {
   const unit = !sizeUnit || sizeUnit === "fraction" ? "%" : sizeUnit;
   return `${size}${unit}`;
 };
+const calcTableMinSize = (columns) => {
+  if (!(columns == null ? void 0 : columns.length)) return "0";
+  const sums = columns.reduce((acc, {
+    sizeUnit,
+    size = 150
+  }) => {
+    const unit = !sizeUnit || sizeUnit === "fraction" ? "px" : sizeUnit;
+    acc[unit] = (acc[unit] || 0) + size;
+    return acc;
+  }, {});
+  return `calc(${Object.entries(sums).map(([sizeUnit, size]) => `${size}${sizeUnit}`).join(" + ")})`;
+};
+exports.calcTableMinSize = calcTableMinSize;
 exports.getWidth = getWidth;

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

@@ -1,2 +1,14 @@
 import { Column } from '@tanstack/react-table';
+import type { ColumnSizeUnit } from '../Table.types';
 export declare const getWidth: <T extends object>(column: Column<T, unknown>) => string | number;
+export type SizeParams = {
+    size?: number;
+    sizeUnit?: ColumnSizeUnit;
+};
+/**
+ * Calculates expected minimal table size, using column definition size and sizeUnit fields.
+ * Fractional size is accepted as absolute value in pixels, other units as is.
+ * Summary string is CSS-only value (`calc(...)`),
+ * that can be used for styling or can be passed to the minWidth prop of the table
+ */
+export declare const calcTableMinSize: (columns: SizeParams[]) => string;

package/dist/Table/utils/table.utils.js

@@ -8,6 +8,19 @@ const getWidth = (column) => {
   const unit = !sizeUnit || sizeUnit === "fraction" ? "%" : sizeUnit;
   return `${size}${unit}`;
 };
+const calcTableMinSize = (columns) => {
+  if (!(columns == null ? void 0 : columns.length)) return "0";
+  const sums = columns.reduce((acc, {
+    sizeUnit,
+    size = 150
+  }) => {
+    const unit = !sizeUnit || sizeUnit === "fraction" ? "px" : sizeUnit;
+    acc[unit] = (acc[unit] || 0) + size;
+    return acc;
+  }, {});
+  return `calc(${Object.entries(sums).map(([sizeUnit, size]) => `${size}${sizeUnit}`).join(" + ")})`;
+};
 export {
+  calcTableMinSize,
   getWidth
 };

package/dist/index.cjs

@@ -5,6 +5,7 @@ const ShowOnRowHover_style = require("./Table/components/ShowOnRowHover/ShowOnRo
 const index = require("./node_modules/@tanstack/react-table/build/lib/index.cjs");
 const Table_context = require("./Table/Table.context.cjs");
 const plugin_utils = require("./Table/utils/plugin.utils.cjs");
+const table_utils = require("./Table/utils/table.utils.cjs");
 const index$1 = require("./node_modules/@tanstack/table-core/build/lib/index.cjs");
 exports.Table = Table.default;
 exports.ShowOnRowHover = ShowOnRowHover_style.ShowOnRowHover;
@@ -15,6 +16,7 @@ exports.useComposeContext = Table_context.useComposeContext;
 exports.usePluginContext = Table_context.usePluginContext;
 exports.useTableContext = Table_context.useTableContext;
 exports.buildPluginContext = plugin_utils.buildPluginContext;
+exports.calcTableMinSize = table_utils.calcTableMinSize;
 exports.ColumnFaceting = index$1.ColumnFaceting;
 exports.ColumnFiltering = index$1.ColumnFiltering;
 exports.ColumnGrouping = index$1.ColumnGrouping;

package/dist/index.js

@@ -3,6 +3,7 @@ import { ShowOnRowHover } from "./Table/components/ShowOnRowHover/ShowOnRowHover
 import { flexRender, useReactTable } from "./node_modules/@tanstack/react-table/build/lib/index.js";
 import { TableContextProvider, useComposeContext, usePluginContext, useTableContext } from "./Table/Table.context.js";
 import { buildPluginContext } from "./Table/utils/plugin.utils.js";
+import { calcTableMinSize } from "./Table/utils/table.utils.js";
 import { ColumnFaceting, ColumnFiltering, ColumnGrouping, ColumnOrdering, ColumnPinning, ColumnSizing, ColumnVisibility, GlobalFaceting, GlobalFiltering, Headers, RowExpanding, RowPagination, RowPinning, RowSelection, RowSorting, _getVisibleLeafColumns, aggregationFns, buildHeaderGroups, createCell, createColumn, createColumnHelper, createRow, createTable, defaultColumnSizing, expandRows, filterFns, flattenBy, functionalUpdate, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, isFunction, isNumberArray, isRowSelected, isSubRowSelected, makeStateUpdater, memo, noop, orderColumns, passiveEventSupported, reSplitAlphaNumeric, selectRowsFn, shouldAutoRemoveFilter, sortingFns } from "./node_modules/@tanstack/table-core/build/lib/index.js";
 export {
   ColumnFaceting,
@@ -27,6 +28,7 @@ export {
   aggregationFns,
   buildHeaderGroups,
   buildPluginContext,
+  calcTableMinSize,
   createCell,
   createColumn,
   createColumnHelper,