@redis-ui/table 2.12.0 → 2.18.0

package/dist/Table/Table.js

@@ -1,26 +1,17 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { useState, useEffect, Fragment } from "react";
-import { VisuallyHidden } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
-import { useReactTable, flexRender } from "../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useControllableState } from "../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
-import TablePagination from "./components/TablePagination/TablePagination.js";
 import { ExpandRowButton } from "./components/ExpandRowButton/ExpandRowButton.js";
 import { TableExpandedRow } from "./components/TableExpandedRow/TableExpandedRow.js";
 import { TableAnimatedExpandedRow } from "./components/TableExpandedRow/TableAnimatedExpandedRow.js";
-import { TableContext } from "./Table.context.js";
-import { TableHeaderCell } from "./components/TableHeaderCell/TableHeaderCell.js";
-import { getTableSortLabel, formatTableSortNotification } from "./components/TableHeaderCell/TableHeaderCell.utils.js";
-import { EmptyStateRow } from "./components/EmptyStateRow/EmptyStateRow.js";
 import { RowSelectionButton } from "./components/RowSelection/RowSelectionButton.js";
 import { HeaderMultiRowSelectionButton } from "./components/RowSelection/HeaderMultiRowSelectionButton.js";
-import { TableContainer, Table as Table$1, TableHead, TableHeaderRow, TableBody, TableBodyRow, TableBodyCell } from "./Table.style.js";
-import { getCoreRowModel, getSortedRowModel, getExpandedRowModel, getPaginationRowModel } from "../node_modules/@tanstack/table-core/build/lib/index.js";
-const getTrue = () => true;
-const DEFAULT_PAGINATION = {
-  pageIndex: 0,
-  pageSize: 10
-};
-const DEFAULT_ROW_SELECTION = {};
+import { useRowSelectionPlugin } from "./plugins/RowSelectionPlugin.js";
+import { useExpandableRowPlugin, useExpandableRowContext } from "./plugins/ExpandableRowPlugin.js";
+import { usePaginationPlugin, usePaginationContext } from "./plugins/PaginationPlugin.js";
+import { useSortingPlugin, useSortingContext } from "./plugins/SortingPlugin.js";
+import { useClickableRowPlugin, useClickableRowContext } from "./plugins/ClickableRowPlugin.js";
+import { useTableContext, useComposeContext } from "./Table.context.js";
+import { PluggableTable } from "./components/PluggableTable/PluggableTable.js";
+import { compositionComponents } from "./components/PluggableTable/compositionComponents.js";
 const Table = Object.assign(({
   columns,
   caption,
@@ -31,15 +22,16 @@ const Table = Object.assign(({
   maxHeight,
   stripedRows = false,
   // sorting
+  enableSorting,
   defaultSorting,
   onSortingChange,
   sorting,
-  manualSorting = false,
+  manualSorting,
   // row expansion
   getIsRowExpandable,
   renderExpandedRow,
   expandRowOnClick,
-  expandedRowComponent: ExpandedRow = TableExpandedRow,
+  expandedRowComponent,
   // pagination
   pagination,
   defaultPagination,
@@ -47,7 +39,7 @@ const Table = Object.assign(({
   manualPagination,
   totalRowCount,
   pageSizes,
-  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0,
+  paginationEnabled,
   // row selection
   rowSelection,
   defaultRowSelection,
@@ -55,142 +47,75 @@ const Table = Object.assign(({
   rowSelectionMode,
   getRowCanSelect
 }) => {
-  const [userSorted, setUserSorted] = useState(false);
-  const [sortingState, setSortingState] = useControllableState({
-    prop: sorting,
-    defaultProp: defaultSorting,
-    onChange: onSortingChange
-  });
-  const [paginationState, setPaginationState] = useControllableState({
-    prop: pagination,
-    defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
-    onChange: onPaginationChange
+  const clickableRowPluginData = useClickableRowPlugin({
+    onRowClick: onRowClick && ((row) => onRowClick(row.original)),
+    shouldClickOnEnter: true
   });
-  const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = useControllableState({
-    prop: rowSelection,
-    defaultProp: defaultRowSelection,
-    onChange: onRowSelectionChange
+  const sortingPluginData = useSortingPlugin({
+    enableSorting,
+    defaultSorting,
+    onSortingChange,
+    sorting,
+    manualSorting
   });
-  const isExpandable = !!renderExpandedRow;
-  const paginationSettings = {
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPaginationState,
+  const paginationPluginData = usePaginationPlugin({
+    pagination,
+    defaultPagination,
+    onPaginationChange,
     manualPagination,
-    rowCount: totalRowCount,
-    autoResetPageIndex: false
-  };
-  const table = useReactTable({
-    data,
-    columns,
-    getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting: sortingState,
-      ...paginationEnabled && {
-        pagination: paginationState
-      },
-      ...rowSelectionMode && {
-        rowSelection: rowSelectionState
-      }
-    },
-    manualSorting,
-    onSortingChange: (value) => {
-      setSortingState(value);
-      setUserSorted(true);
-    },
-    getExpandedRowModel: isExpandable ? getExpandedRowModel() : void 0,
-    getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
-    ...paginationEnabled && paginationSettings,
-    enableRowSelection: rowSelectionMode && (getRowCanSelect ?? true),
-    enableMultiRowSelection: rowSelectionMode === "multiple",
-    onRowSelectionChange: setRowSelectionState
+    totalRowCount,
+    pageSizes,
+    paginationEnabled
   });
-  const {
-    pageIndex
-  } = table.getState().pagination;
-  const maxPageIndex = Math.max(table.getPageCount(), 1) - 1;
-  useEffect(() => {
-    if (paginationEnabled) table.setPageIndex(Math.min(pageIndex, maxPageIndex));
-  }, [maxPageIndex, pageIndex, table, paginationEnabled]);
-  const {
-    rows
-  } = table.getRowModel();
-  return jsxRuntimeExports.jsxs(TableContext.Provider, {
-    value: {
-      table
+  const expandableRowPluginData = useExpandableRowPlugin({
+    expandRowOnClick,
+    getRowCanExpand: getIsRowExpandable && ((row) => getIsRowExpandable(row.original)),
+    renderExpandedRow,
+    expandedRowComponent
+  });
+  const rowSelectionPluginData = useRowSelectionPlugin({
+    rowSelection,
+    defaultRowSelection,
+    onRowSelectionChange,
+    rowSelectionMode,
+    getRowCanSelect
+  });
+  return jsxRuntimeExports.jsx(Table.PluggableTable, {
+    ...{
+      data,
+      columns,
+      maxHeight,
+      stripedRows,
+      caption,
+      emptyStateRender: emptyState
+    },
+    tableOptions: {
+      getRowId
     },
-    children: [jsxRuntimeExports.jsxs(TableContainer, {
-      children: [jsxRuntimeExports.jsxs(Table$1, {
-        children: [caption && jsxRuntimeExports.jsx(VisuallyHidden, {
-          asChild: true,
-          children: jsxRuntimeExports.jsx("caption", {
-            children: caption
-          })
-        }), jsxRuntimeExports.jsx(TableHead, {
-          children: table.getHeaderGroups().map((headerGroup) => jsxRuntimeExports.jsx(TableHeaderRow, {
-            children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(TableHeaderCell, {
-              header
-            }, header.id))
-          }, headerGroup.id))
-        }), jsxRuntimeExports.jsxs(TableBody, {
-          maxHeight,
-          children: [!rows.length ? jsxRuntimeExports.jsx(EmptyStateRow, {
-            table,
-            emptyState
-          }) : null, rows.map((row) => {
-            const isRowExpandable = isExpandable && row.getCanExpand();
-            const isRowExpanded = isRowExpandable && row.getIsExpanded();
-            const handleClick = () => {
-              isRowExpandable && expandRowOnClick && row.toggleExpanded();
-              onRowClick == null ? void 0 : onRowClick(row.original);
-            };
-            return jsxRuntimeExports.jsxs(Fragment, {
-              children: [jsxRuntimeExports.jsx(TableBodyRow, {
-                tabIndex: 0,
-                "data-row-type": "regular",
-                ...isRowExpandable ? {
-                  "aria-expanded": isRowExpanded
-                } : null,
-                "$stripedRows": stripedRows,
-                "$hasOnClick": !!onRowClick || isRowExpandable,
-                onClick: handleClick,
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" && event.target === event.currentTarget) {
-                    handleClick();
-                  }
-                },
-                children: row.getVisibleCells().map((cell) => jsxRuntimeExports.jsx(TableBodyCell, {
-                  style: {
-                    width: cell.column.getSize()
-                  },
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                }, cell.id))
-              }), isRowExpandable && // 2nd row is a custom 1 cell row for expanded part
-              jsxRuntimeExports.jsx(ExpandedRow, {
-                "data-row-type": "expanded",
-                "data-expanded": isRowExpanded,
-                expanded: isRowExpanded,
-                row,
-                renderExpandedRow
-              })]
-            }, row.id);
-          })]
-        })]
-      }), jsxRuntimeExports.jsx(TablePagination, {
-        pageSizes
-      })]
-    }), userSorted && jsxRuntimeExports.jsx(VisuallyHidden, {
-      "aria-live": "polite",
-      children: getTableSortLabel(table, formatTableSortNotification)
-    })]
+    pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData]
   });
 }, {
   ExpandRowButton,
   ExpandedRow: TableExpandedRow,
   AnimatedExpandedRow: TableAnimatedExpandedRow,
   RowSelectionButton,
-  HeaderMultiRowSelectionButton
+  HeaderMultiRowSelectionButton,
+  // plugins
+  useClickableRowPlugin,
+  useSortingPlugin,
+  usePaginationPlugin,
+  useExpandableRowPlugin,
+  useRowSelectionPlugin,
+  // contexts
+  useTableContext,
+  useComposeContext,
+  useClickableRowContext,
+  useExpandableRowContext,
+  usePaginationContext,
+  useSortingContext,
+  // composition components
+  PluggableTable,
+  ...compositionComponents
 });
 export {
   Table as default

package/dist/Table/Table.style.cjs

@@ -22,8 +22,8 @@ const TableHeaderRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
   componentId: "RedisUI__sc-o0xfty-3"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled__default.default.button.withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
+const SortableHeadingCompose = _styled__default.default.button.withConfig({
+  displayName: "Tablestyle__SortableHeadingCompose",
   componentId: "RedisUI__sc-o0xfty-4"
 })(["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:hidden;", " svg{flex:none;}"], redisUiStyles.getFocusStyle("0.6rem"));
 const HeaderTitleWrapper = _styled__default.default(redisUiComponents.Typography.Body).withConfig({
@@ -50,8 +50,8 @@ const TableBodyRow = _styled__default.default.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
   componentId: "RedisUI__sc-o0xfty-8"
 })(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => redisUiStyles.useTheme().components.table.table.tableBodyRow.borderTop, ({
-  $hasOnClick
-}) => $hasOnClick ? "pointer" : "default", () => redisUiStyles.useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover_style.ShowOnRowHover, ({
+  onClick
+}) => onClick ? "pointer" : "default", () => redisUiStyles.useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover_style.ShowOnRowHover, ({
   $stripedRows
 }) => $stripedRows && _styled.css`
       :nth-child(even of [data-row-type='regular']) {
@@ -62,8 +62,13 @@ const TableBodyCell = _styled__default.default.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
   componentId: "RedisUI__sc-o0xfty-9"
 })(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => redisUiStyles.useTheme().components.table.table.tableBodyCell.color);
-exports.HeaderCellInnerWrapper = HeaderCellInnerWrapper;
+const EmptyStateContainer = _styled__default.default.div.withConfig({
+  displayName: "Tablestyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-o0xfty-10"
+})(["text-align:center;"]);
+exports.EmptyStateContainer = EmptyStateContainer;
 exports.HeaderTitleWrapper = HeaderTitleWrapper;
+exports.SortableHeadingCompose = SortableHeadingCompose;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableBodyCell = TableBodyCell;

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

@@ -2,8 +2,8 @@ export declare const TableContainer: import("styled-components").StyledComponent
 export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
 export declare const TableHeaderRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
-export declare const HeaderCellInnerWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const HeaderTitleWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const SortableHeadingCompose: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const HeaderTitleWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     $isTextual: boolean;
 }, never>;
 export declare const TableTh: import("styled-components").StyledComponent<"th", any, {}, never>;
@@ -12,6 +12,6 @@ export declare const TableBody: import("styled-components").StyledComponent<"tbo
 }, never>;
 export declare const TableBodyRow: import("styled-components").StyledComponent<"tr", any, {
     $stripedRows: boolean;
-    $hasOnClick?: boolean | undefined;
 }, never>;
 export declare const TableBodyCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const EmptyStateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/Table.style.js

@@ -18,8 +18,8 @@ const TableHeaderRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableHeaderRow",
   componentId: "RedisUI__sc-o0xfty-3"
 })(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
-const HeaderCellInnerWrapper = _styled.button.withConfig({
-  displayName: "Tablestyle__HeaderCellInnerWrapper",
+const SortableHeadingCompose = _styled.button.withConfig({
+  displayName: "Tablestyle__SortableHeadingCompose",
   componentId: "RedisUI__sc-o0xfty-4"
 })(["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:hidden;", " svg{flex:none;}"], getFocusStyle("0.6rem"));
 const HeaderTitleWrapper = _styled(Typography.Body).withConfig({
@@ -46,8 +46,8 @@ const TableBodyRow = _styled.tr.withConfig({
   displayName: "Tablestyle__TableBodyRow",
   componentId: "RedisUI__sc-o0xfty-8"
 })(["border-top:1px solid ", ";height:4.8rem;transition:box-shadow 0.2s ease-in-out;position:relative;&:hover,&:focus{cursor:", ";z-index:1;box-shadow:", ";", "{opacity:1;visibility:visible;}}", " display:table;width:100%;table-layout:fixed;"], () => useTheme().components.table.table.tableBodyRow.borderTop, ({
-  $hasOnClick
-}) => $hasOnClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
+  onClick
+}) => onClick ? "pointer" : "default", () => useTheme().components.table.table.tableBodyRow.hoverBoxShadow, ShowOnRowHover, ({
   $stripedRows
 }) => $stripedRows && css`
       :nth-child(even of [data-row-type='regular']) {
@@ -58,9 +58,14 @@ const TableBodyCell = _styled.td.withConfig({
   displayName: "Tablestyle__TableBodyCell",
   componentId: "RedisUI__sc-o0xfty-9"
 })(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => useTheme().components.table.table.tableBodyCell.color);
+const EmptyStateContainer = _styled.div.withConfig({
+  displayName: "Tablestyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-o0xfty-10"
+})(["text-align:center;"]);
 export {
-  HeaderCellInnerWrapper,
+  EmptyStateContainer,
   HeaderTitleWrapper,
+  SortableHeadingCompose,
   Table,
   TableBody,
   TableBodyCell,

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

@@ -1,48 +1,30 @@
-import { ComponentType, ReactNode } from 'react';
-import type { CellContext, ColumnDef, PaginationState, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
-import type { TableExpandedRowProps } from './components/TableExpandedRow';
-import './tableTypes';
+import type { CellContext, ColumnDef, PaginationState, Row, SortingState } from '@tanstack/react-table';
+import { TableExpandableRowParams } from './plugins/ExpandableRowPlugin';
+import { TablePaginationParams } from './plugins/PaginationPlugin';
+import { TableRowSelectionParams } from './plugins/RowSelectionPlugin';
+import { TableSortingParams } from './plugins/SortingPlugin';
+import { EmptyStateProps } from './components/EmptyState/EmptyState';
+export * from '@tanstack/react-table';
+/** @deprecated use ColumnDef */
 export type ColumnDefinition<T extends object> = ColumnDef<T>;
+/** @deprecated use Row */
 export type RowDefinition<T extends object> = Row<T>;
+/** @deprecated use CellContext */
 export type CellDefinition<T extends object, D> = CellContext<T, D>;
+/** @deprecated use PaginationState */
 export type PaginationTypes = PaginationState;
+/** @deprecated use SortingState */
 export type SortingTypes = SortingState;
-export interface TableSortingProps {
-    defaultSorting?: SortingState;
-    onSortingChange?: (state: SortingState) => void;
-    sorting?: SortingState;
-    manualSorting?: boolean;
-}
-export interface TableExpandableRowProps<T extends object> {
-    getIsRowExpandable?: (row: T) => boolean;
-    renderExpandedRow?: (row: RowDefinition<T>) => ReactNode;
-    expandRowOnClick?: boolean;
-    expandedRowComponent?: ComponentType<TableExpandedRowProps<T>>;
-}
-interface TablePaginationProps {
-    pagination?: PaginationState;
-    defaultPagination?: PaginationState;
-    onPaginationChange?: (state: PaginationState) => void;
-    manualPagination?: boolean;
-    totalRowCount?: number;
-    pageSizes?: number[];
-    paginationEnabled?: boolean;
-}
-interface TableRowSelectionState<T extends object> {
-    rowSelection?: RowSelectionState;
-    defaultRowSelection?: RowSelectionState;
-    onRowSelectionChange?: (state: RowSelectionState) => void;
-    rowSelectionMode?: 'single' | 'multiple';
-    getRowCanSelect?: (row: Row<T>) => boolean;
-}
-export interface TableProps<T extends object> extends TableSortingProps, TableExpandableRowProps<T>, TablePaginationProps, TableRowSelectionState<T> {
+type TableExpandableRowProps<T extends object> = Omit<TableExpandableRowParams<T>, 'getRowCanExpand'> & {
+    getIsRowExpandable?: (rowData: T) => boolean;
+};
+export interface TableProps<T extends object> extends TableSortingParams, TableExpandableRowProps<T>, TablePaginationParams, TableRowSelectionParams<T> {
     data: T[];
-    columns: ColumnDefinition<T>[];
-    getRowId?: (row: T, index: number) => string;
-    onRowClick?: (row: T) => void;
-    emptyState?: () => ReactNode;
+    columns: ColumnDef<T>[];
+    getRowId?: (rowData: T, index: number) => string;
+    onRowClick?: (rowData: T) => void;
+    emptyState?: EmptyStateProps['emptyStateRender'];
     maxHeight?: string;
     stripedRows?: boolean;
     caption?: string;
 }
-export {};

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@tanstack/react-table/build/lib/index.cjs");
+const plugin_utils = require("../../utils/plugin.utils.cjs");
+const Table_context = require("../../Table.context.cjs");
+const Table_style = require("../../Table.style.cjs");
+const index$1 = require("../../../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const TableCompose = ({
+  data,
+  columns,
+  pluginsData,
+  tableOptions,
+  components,
+  maxHeight,
+  stripedRows,
+  ...restProps
+}) => {
+  const mergedPluginsData = plugin_utils.mergePluginsData(pluginsData);
+  const table = index.useReactTable({
+    data,
+    columns,
+    getCoreRowModel: index$1.getCoreRowModel(),
+    enableSorting: false,
+    ...tableOptions,
+    ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
+  });
+  const tableContext = {
+    table,
+    plugins: mergedPluginsData.context,
+    components,
+    stripedRows,
+    maxHeight
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContextProvider, {
+    value: tableContext,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableContainer, {
+      ...restProps
+    })
+  });
+};
+exports.TableCompose = TableCompose;

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

@@ -0,0 +1,13 @@
+import { SetOptional } from 'type-fest';
+import { TableOptions } from '@tanstack/table-core';
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+import { TablePluginData } from '../../utils/plugin.utils';
+import { CompositionContextProps, TableMainContextProps } from '../../Table.context';
+export type OwnTableComposeProps<T extends object> = TableMainContextProps & Pick<TableOptions<T>, 'data' | 'columns'> & {
+    tableOptions?: Omit<SetOptional<TableOptions<T>, 'getCoreRowModel'>, 'data' | 'columns'>;
+    pluginsData?: TablePluginData<T>[];
+    components?: Partial<CompositionContextProps<T>>;
+};
+export type RestTableComposeProps = ComposeElementProps;
+export type TableComposeProps<T extends object> = OwnTableComposeProps<T> & RestTableComposeProps;
+export declare const TableCompose: <T extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, stripedRows, ...restProps }: TableComposeProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useReactTable } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { mergePluginsData } from "../../utils/plugin.utils.js";
+import { TableContextProvider } from "../../Table.context.js";
+import { TableContainer } from "../../Table.style.js";
+import { getCoreRowModel } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+const TableCompose = ({
+  data,
+  columns,
+  pluginsData,
+  tableOptions,
+  components,
+  maxHeight,
+  stripedRows,
+  ...restProps
+}) => {
+  const mergedPluginsData = mergePluginsData(pluginsData);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    enableSorting: false,
+    ...tableOptions,
+    ...mergedPluginsData == null ? void 0 : mergedPluginsData.tableOptions
+  });
+  const tableContext = {
+    table,
+    plugins: mergedPluginsData.context,
+    components,
+    stripedRows,
+    maxHeight
+  };
+  return jsxRuntimeExports.jsx(TableContextProvider, {
+    value: tableContext,
+    children: jsxRuntimeExports.jsx(TableContainer, {
+      ...restProps
+    })
+  });
+};
+export {
+  TableCompose
+};

package/dist/Table/components/EmptyState/EmptyState.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Table_context = require("../../Table.context.cjs");
+const TableHeaderCell_utils = require("../TableHeaderCell/TableHeaderCell.utils.cjs");
+const Table_style = require("../../Table.style.cjs");
+const EmptyState = ({
+  emptyStateRender,
+  ...restProps
+}) => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  if (table.getRowModel().rows.length) {
+    return null;
+  }
+  const content = (typeof emptyStateRender === "function" ? emptyStateRender() : emptyStateRender) ?? "No data to display";
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBody, {
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
+      "$stripedRows": false,
+      children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+        colSpan: TableHeaderCell_utils.normalizeCellSpan(table.getVisibleLeafColumns().length),
+        children: typeof content === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.EmptyStateContainer, {
+          children: content
+        }) : content
+      })
+    })
+  });
+};
+exports.EmptyState = EmptyState;

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+export interface EmptyStateProps extends ChildFree<HTMLAttributes<HTMLTableSectionElement>> {
+    emptyStateRender?: (() => ReactNode) | string;
+}
+export declare const EmptyState: ({ emptyStateRender, ...restProps }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/EmptyState/EmptyState.js

@@ -0,0 +1,31 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useTableContext } from "../../Table.context.js";
+import { normalizeCellSpan } from "../TableHeaderCell/TableHeaderCell.utils.js";
+import { TableBody, TableBodyRow, TableBodyCell, EmptyStateContainer } from "../../Table.style.js";
+const EmptyState = ({
+  emptyStateRender,
+  ...restProps
+}) => {
+  const {
+    table
+  } = useTableContext();
+  if (table.getRowModel().rows.length) {
+    return null;
+  }
+  const content = (typeof emptyStateRender === "function" ? emptyStateRender() : emptyStateRender) ?? "No data to display";
+  return jsxRuntimeExports.jsx(TableBody, {
+    ...restProps,
+    children: jsxRuntimeExports.jsx(TableBodyRow, {
+      "$stripedRows": false,
+      children: jsxRuntimeExports.jsx(TableBodyCell, {
+        colSpan: normalizeCellSpan(table.getVisibleLeafColumns().length),
+        children: typeof content === "string" ? jsxRuntimeExports.jsx(EmptyStateContainer, {
+          children: content
+        }) : content
+      })
+    })
+  });
+};
+export {
+  EmptyState
+};

package/dist/Table/components/HiddenCaption/HiddenCaption.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const HiddenCaption = ({
+  caption
+}) => caption ? jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
+  asChild: true,
+  children: jsxRuntime.jsxRuntimeExports.jsx("caption", {
+    children: caption
+  })
+}) : null;
+exports.HiddenCaption = HiddenCaption;

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

@@ -0,0 +1,3 @@
+export declare const HiddenCaption: ({ caption }: {
+    caption?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/HiddenCaption/HiddenCaption.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+const HiddenCaption = ({
+  caption
+}) => caption ? jsxRuntimeExports.jsx(VisuallyHidden, {
+  asChild: true,
+  children: jsxRuntimeExports.jsx("caption", {
+    children: caption
+  })
+}) : null;
+export {
+  HiddenCaption
+};

package/dist/Table/components/PluggableTable/PluggableTable.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const compositionComponents = require("./compositionComponents.cjs");
+const PluggableTable = ({
+  caption,
+  emptyStateRender,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(compositionComponents.compositionComponents.Compose, {
+  ...restProps,
+  children: [jsxRuntime.jsxRuntimeExports.jsxs(compositionComponents.compositionComponents.Root, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.SRCaption, {
+      caption
+    }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Header, {}), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.EmptyState, {
+      emptyStateRender
+    }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Body, {})]
+  }), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.Pagination, {}), jsxRuntime.jsxRuntimeExports.jsx(compositionComponents.compositionComponents.SRSortingNotification, {})]
+});
+exports.PluggableTable = PluggableTable;