@redis-ui/table 2.4.0

package/dist/Table/Table.cjs

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const index$1 = require("../node_modules/@tanstack/react-table/build/lib/index.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const index = require("../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
+const TablePagination = require("./components/TablePagination/TablePagination.cjs");
+const ExpandRowButton = require("./components/ExpandRowButton/ExpandRowButton.cjs");
+const TableExpandedRow = require("./components/TableExpandedRow/TableExpandedRow.cjs");
+const TableAnimatedExpandedRow = require("./components/TableExpandedRow/TableAnimatedExpandedRow.cjs");
+const Table_context = require("./Table.context.cjs");
+const Table_style = require("./Table.style.cjs");
+const index$2 = require("../node_modules/@tanstack/table-core/build/lib/index.cjs");
+const getTrue = () => true;
+const DEFAULT_PAGINATION = {
+  pageIndex: 0,
+  pageSize: 10
+};
+const Table = Object.assign(({
+  columns,
+  onRowClick,
+  data,
+  defaultSorting,
+  emptyState,
+  maxHeight,
+  stripedRows = false,
+  onSortingChange,
+  sorting,
+  manualSorting = false,
+  getIsRowExpandable,
+  renderExpandedRow,
+  expandRowOnClick,
+  expandedRowComponent: ExpandedRow = TableExpandedRow.TableExpandedRow,
+  pagination,
+  defaultPagination,
+  onPaginationChange,
+  manualPagination,
+  totalRowCount,
+  pageSizes,
+  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0
+}) => {
+  const [sortingState, setSortingState] = index.useControllableState({
+    prop: sorting,
+    defaultProp: defaultSorting,
+    onChange: onSortingChange
+  });
+  const [paginationState, setPaginationState] = index.useControllableState({
+    prop: pagination,
+    defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
+    onChange: onPaginationChange
+  });
+  const isExpandable = !!renderExpandedRow;
+  const paginationSettings = {
+    getPaginationRowModel: index$2.getPaginationRowModel(),
+    onPaginationChange: setPaginationState,
+    manualPagination,
+    rowCount: totalRowCount,
+    autoResetPageIndex: false
+  };
+  const table = index$1.useReactTable({
+    data,
+    columns,
+    getCoreRowModel: index$2.getCoreRowModel(),
+    getSortedRowModel: index$2.getSortedRowModel(),
+    state: {
+      sorting: sortingState,
+      ...paginationEnabled && {
+        pagination: paginationState
+      }
+    },
+    manualSorting,
+    onSortingChange: setSortingState,
+    getExpandedRowModel: isExpandable ? index$2.getExpandedRowModel() : void 0,
+    getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
+    ...paginationEnabled && paginationSettings
+  });
+  const {
+    pageIndex
+  } = table.getState().pagination;
+  const maxPageIndex = Math.max(table.getPageCount(), 1) - 1;
+  React.useEffect(() => {
+    if (paginationEnabled) table.setPageIndex(Math.min(pageIndex, maxPageIndex));
+  }, [maxPageIndex, pageIndex, table, paginationEnabled]);
+  const {
+    rows
+  } = table.getRowModel();
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_context.TableContext.Provider, {
+    value: {
+      table
+    },
+    children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableContainer, {
+      children: [jsxRuntime.jsxRuntimeExports.jsxs(Table_style.Table, {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHead, {
+          children: table.getHeaderGroups().map((headerGroup) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHeaderRow, {
+            children: headerGroup.headers.map((header) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
+              onClick: header.column.getToggleSortingHandler(),
+              style: {
+                width: header.column.getSize()
+              },
+              children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.HeaderCellInnerWrapper, {
+                size: "XS",
+                children: [header.isPlaceholder ? null : index$1.flexRender(header.column.columnDef.header, header.getContext()), {
+                  asc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowUpIcon, {
+                    size: "S",
+                    color: "neutral700"
+                  }),
+                  desc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowDownIcon, {
+                    size: "S",
+                    color: "neutral700"
+                  })
+                }[header.column.getIsSorted()] ?? null]
+              })
+            }, header.id))
+          }, headerGroup.id))
+        }), jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableBody, {
+          maxHeight,
+          children: [!rows.length ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
+            "$stripedRows": false,
+            children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+              colSpan: columns.length,
+              children: emptyState ? emptyState() : "No data to display"
+            })
+          }) : 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 jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+              children: [jsxRuntime.jsxRuntimeExports.jsx(Table_style.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) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+                  style: {
+                    width: cell.column.getSize()
+                  },
+                  children: index$1.flexRender(cell.column.columnDef.cell, cell.getContext())
+                }, cell.id))
+              }), isRowExpandable && // 2nd row is a custom 1 cell row for expanded part
+              jsxRuntime.jsxRuntimeExports.jsx(ExpandedRow, {
+                "data-row-type": "expanded",
+                "data-expanded": isRowExpanded,
+                expanded: isRowExpanded,
+                row,
+                renderExpandedRow
+              })]
+            }, row.id);
+          })]
+        })]
+      }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.default, {
+        pageSizes
+      })]
+    })
+  });
+}, {
+  ExpandRowButton: ExpandRowButton.ExpandRowButton,
+  ExpandedRow: TableExpandedRow.TableExpandedRow,
+  AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow
+});
+exports.default = Table;

package/dist/Table/Table.context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const TableContext = React.createContext(null);
+const useTableContext = () => {
+  const tableContext = React.useContext(TableContext);
+  if (!tableContext) {
+    throw new Error(`Table compound components cannot be rendered outside the Table component`);
+  }
+  return tableContext;
+};
+exports.TableContext = TableContext;
+exports.useTableContext = useTableContext;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Table } from '@tanstack/react-table';
+export type TableContextProps<T extends object> = {
+    table: Table<T>;
+};
+export declare const TableContext: import("react").Context<TableContextProps<any> | null>;
+export declare const useTableContext: () => TableContextProps<any>;

package/dist/Table/Table.context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const TableContext = createContext(null);
+const useTableContext = () => {
+  const tableContext = useContext(TableContext);
+  if (!tableContext) {
+    throw new Error(`Table compound components cannot be rendered outside the Table component`);
+  }
+  return tableContext;
+};
+export {
+  TableContext,
+  useTableContext
+};

package/dist/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import { TableProps } from './Table.types';
+declare const Table: (<T extends object>({ columns, onRowClick, data, defaultSorting, emptyState, maxHeight, stripedRows, onSortingChange, sorting, manualSorting, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent: ExpandedRow, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandRowButton").ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    ExpandedRow: <T_1 extends object>({ row, renderExpandedRow, keepInDom, expanded, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_1>) => import("react/jsx-runtime").JSX.Element | null;
+    AnimatedExpandedRow: <T_2 extends object>({ expanded, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_2>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Table;

package/dist/Table/Table.js

@@ -0,0 +1,173 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useEffect, Fragment } from "react";
+import { useReactTable, flexRender } from "../node_modules/@tanstack/react-table/build/lib/index.js";
+import { ArrowUpIcon, ArrowDownIcon } from "@redislabsdev/redis-ui-icons";
+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 { TableContainer, Table as Table$1, TableHead, TableHeaderRow, TableTh, HeaderCellInnerWrapper, 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 Table = Object.assign(({
+  columns,
+  onRowClick,
+  data,
+  defaultSorting,
+  emptyState,
+  maxHeight,
+  stripedRows = false,
+  onSortingChange,
+  sorting,
+  manualSorting = false,
+  getIsRowExpandable,
+  renderExpandedRow,
+  expandRowOnClick,
+  expandedRowComponent: ExpandedRow = TableExpandedRow,
+  pagination,
+  defaultPagination,
+  onPaginationChange,
+  manualPagination,
+  totalRowCount,
+  pageSizes,
+  paginationEnabled = (pagination || defaultPagination || onPaginationChange || pageSizes) !== void 0 || manualPagination !== void 0
+}) => {
+  const [sortingState, setSortingState] = useControllableState({
+    prop: sorting,
+    defaultProp: defaultSorting,
+    onChange: onSortingChange
+  });
+  const [paginationState, setPaginationState] = useControllableState({
+    prop: pagination,
+    defaultProp: defaultPagination ?? DEFAULT_PAGINATION,
+    onChange: onPaginationChange
+  });
+  const isExpandable = !!renderExpandedRow;
+  const paginationSettings = {
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPaginationState,
+    manualPagination,
+    rowCount: totalRowCount,
+    autoResetPageIndex: false
+  };
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting: sortingState,
+      ...paginationEnabled && {
+        pagination: paginationState
+      }
+    },
+    manualSorting,
+    onSortingChange: setSortingState,
+    getExpandedRowModel: isExpandable ? getExpandedRowModel() : void 0,
+    getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
+    ...paginationEnabled && paginationSettings
+  });
+  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.jsx(TableContext.Provider, {
+    value: {
+      table
+    },
+    children: jsxRuntimeExports.jsxs(TableContainer, {
+      children: [jsxRuntimeExports.jsxs(Table$1, {
+        children: [jsxRuntimeExports.jsx(TableHead, {
+          children: table.getHeaderGroups().map((headerGroup) => jsxRuntimeExports.jsx(TableHeaderRow, {
+            children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(TableTh, {
+              onClick: header.column.getToggleSortingHandler(),
+              style: {
+                width: header.column.getSize()
+              },
+              children: jsxRuntimeExports.jsxs(HeaderCellInnerWrapper, {
+                size: "XS",
+                children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), {
+                  asc: jsxRuntimeExports.jsx(ArrowUpIcon, {
+                    size: "S",
+                    color: "neutral700"
+                  }),
+                  desc: jsxRuntimeExports.jsx(ArrowDownIcon, {
+                    size: "S",
+                    color: "neutral700"
+                  })
+                }[header.column.getIsSorted()] ?? null]
+              })
+            }, header.id))
+          }, headerGroup.id))
+        }), jsxRuntimeExports.jsxs(TableBody, {
+          maxHeight,
+          children: [!rows.length ? jsxRuntimeExports.jsx(TableBodyRow, {
+            "$stripedRows": false,
+            children: jsxRuntimeExports.jsx(TableBodyCell, {
+              colSpan: columns.length,
+              children: emptyState ? emptyState() : "No data to display"
+            })
+          }) : 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
+      })]
+    })
+  });
+}, {
+  ExpandRowButton,
+  ExpandedRow: TableExpandedRow,
+  AnimatedExpandedRow: TableAnimatedExpandedRow
+});
+export {
+  Table as default
+};

package/dist/Table/Table.style.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const ShowOnRowHover_style = require("./components/ShowOnRowHover/ShowOnRowHover.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const TableContainer = _styled__default.default.div.withConfig({
+  displayName: "Tablestyle__TableContainer",
+  componentId: "sc-o0xfty-0"
+})(["width:100%;border-radius:0.8rem;box-shadow:", ";background-color:", ";overflow:hidden;"], () => redisUiStyles.useTheme().components.table.table.tableContainer.boxShadow, () => redisUiStyles.useTheme().components.table.table.tableContainer.backgroundColor);
+const Table = _styled__default.default.table.withConfig({
+  displayName: "Tablestyle__Table",
+  componentId: "sc-o0xfty-1"
+})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;::-webkit-scrollbar{height:0.5rem;}"]);
+const TableHead = _styled__default.default.thead.withConfig({
+  displayName: "Tablestyle__TableHead",
+  componentId: "sc-o0xfty-2"
+})(["display:table;table-layout:fixed;"]);
+const TableHeaderRow = _styled__default.default.tr.withConfig({
+  displayName: "Tablestyle__TableHeaderRow",
+  componentId: "sc-o0xfty-3"
+})(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
+const HeaderCellInnerWrapper = _styled__default.default(redisUiComponents.Typography.Heading).withConfig({
+  displayName: "Tablestyle__HeaderCellInnerWrapper",
+  componentId: "sc-o0xfty-4"
+})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+const TableTh = _styled__default.default.th.withConfig({
+  displayName: "Tablestyle__TableTh",
+  componentId: "sc-o0xfty-5"
+})(["padding:1.05rem 0 1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;svg{vertical-align:middle;margin-left:0.8rem;}&:not(:last-child){> ", "{border-right:1px solid ", ";}}"], () => redisUiStyles.useTheme().components.table.table.tableTh.color, HeaderCellInnerWrapper, () => redisUiStyles.useTheme().components.table.table.tableTh.borderRight);
+const TableBody = _styled__default.default.tbody.withConfig({
+  displayName: "Tablestyle__TableBody",
+  componentId: "sc-o0xfty-6"
+})(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
+  maxHeight
+}) => maxHeight);
+const TableBodyRow = _styled__default.default.tr.withConfig({
+  displayName: "Tablestyle__TableBodyRow",
+  componentId: "sc-o0xfty-7"
+})(["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, ({
+  $stripedRows
+}) => $stripedRows && _styled.css`
+      :nth-child(even of [data-row-type='regular']) {
+        background: ${() => redisUiStyles.useTheme().components.table.table.tableBodyRow.backgroundColor};
+      }
+    `);
+const TableBodyCell = _styled__default.default.td.withConfig({
+  displayName: "Tablestyle__TableBodyCell",
+  componentId: "sc-o0xfty-8"
+})(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => redisUiStyles.useTheme().components.table.table.tableBodyCell.color);
+exports.HeaderCellInnerWrapper = HeaderCellInnerWrapper;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableBodyCell = TableBodyCell;
+exports.TableBodyRow = TableBodyRow;
+exports.TableContainer = TableContainer;
+exports.TableHead = TableHead;
+exports.TableHeaderRow = TableHeaderRow;
+exports.TableTh = TableTh;

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

@@ -0,0 +1,14 @@
+export declare const TableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const TableHeaderRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const HeaderCellInnerWrapper: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TableTh: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {
+    maxHeight?: string | undefined;
+}, 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>;

package/dist/Table/Table.style.js

@@ -0,0 +1,61 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { Typography } from "@redislabsdev/redis-ui-components";
+import { ShowOnRowHover } from "./components/ShowOnRowHover/ShowOnRowHover.style.js";
+const TableContainer = _styled.div.withConfig({
+  displayName: "Tablestyle__TableContainer",
+  componentId: "sc-o0xfty-0"
+})(["width:100%;border-radius:0.8rem;box-shadow:", ";background-color:", ";overflow:hidden;"], () => useTheme().components.table.table.tableContainer.boxShadow, () => useTheme().components.table.table.tableContainer.backgroundColor);
+const Table = _styled.table.withConfig({
+  displayName: "Tablestyle__Table",
+  componentId: "sc-o0xfty-1"
+})(["width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;display:block;table-layout:fixed;::-webkit-scrollbar{height:0.5rem;}"]);
+const TableHead = _styled.thead.withConfig({
+  displayName: "Tablestyle__TableHead",
+  componentId: "sc-o0xfty-2"
+})(["display:table;table-layout:fixed;"]);
+const TableHeaderRow = _styled.tr.withConfig({
+  displayName: "Tablestyle__TableHeaderRow",
+  componentId: "sc-o0xfty-3"
+})(["height:5.6rem;display:table;width:100%;table-layout:fixed;"]);
+const HeaderCellInnerWrapper = _styled(Typography.Heading).withConfig({
+  displayName: "Tablestyle__HeaderCellInnerWrapper",
+  componentId: "sc-o0xfty-4"
+})(["display:flex;align-items:center;justify-content:flex-start;height:35px;line-height:35px;"]);
+const TableTh = _styled.th.withConfig({
+  displayName: "Tablestyle__TableTh",
+  componentId: "sc-o0xfty-5"
+})(["padding:1.05rem 0 1.05rem 1.2rem;color:", ";user-select:none;white-space:nowrap;svg{vertical-align:middle;margin-left:0.8rem;}&:not(:last-child){> ", "{border-right:1px solid ", ";}}"], () => useTheme().components.table.table.tableTh.color, HeaderCellInnerWrapper, () => useTheme().components.table.table.tableTh.borderRight);
+const TableBody = _styled.tbody.withConfig({
+  displayName: "Tablestyle__TableBody",
+  componentId: "sc-o0xfty-6"
+})(["max-height:", ";overflow-y:auto;overflow-x:hidden;display:inline-block;table-layout:fixed;"], ({
+  maxHeight
+}) => maxHeight);
+const TableBodyRow = _styled.tr.withConfig({
+  displayName: "Tablestyle__TableBodyRow",
+  componentId: "sc-o0xfty-7"
+})(["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, ({
+  $stripedRows
+}) => $stripedRows && css`
+      :nth-child(even of [data-row-type='regular']) {
+        background: ${() => useTheme().components.table.table.tableBodyRow.backgroundColor};
+      }
+    `);
+const TableBodyCell = _styled.td.withConfig({
+  displayName: "Tablestyle__TableBodyCell",
+  componentId: "sc-o0xfty-8"
+})(["color:", ";padding:0 1.2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"], () => useTheme().components.table.table.tableBodyCell.color);
+export {
+  HeaderCellInnerWrapper,
+  Table,
+  TableBody,
+  TableBodyCell,
+  TableBodyRow,
+  TableContainer,
+  TableHead,
+  TableHeaderRow,
+  TableTh
+};

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

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

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

@@ -0,0 +1,31 @@
+import { ComponentType, ReactNode } from 'react';
+import type { ColumnDef, CellContext, PaginationState, Row, SortingState } from '@tanstack/react-table';
+import type { TableExpandedRowProps } from './components/TableExpandedRow';
+export type ColumnDefinition<T extends object> = ColumnDef<T>;
+export type RowDefinition<T extends object> = Row<T>;
+export type CellDefinition<T extends object, D> = CellContext<T, D>;
+export type PaginationTypes = PaginationState;
+export type SortingTypes = SortingState;
+export interface TableProps<T extends object> {
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    onRowClick?: (row: T) => void;
+    emptyState?: () => ReactNode;
+    defaultSorting?: SortingState;
+    maxHeight?: string;
+    stripedRows?: boolean;
+    onSortingChange?: (state: SortingState) => void;
+    sorting?: SortingState;
+    manualSorting?: boolean;
+    getIsRowExpandable?: (row: T) => boolean;
+    renderExpandedRow?: (row: RowDefinition<T>) => ReactNode;
+    expandRowOnClick?: boolean;
+    expandedRowComponent?: ComponentType<TableExpandedRowProps<T>>;
+    pagination?: PaginationState;
+    defaultPagination?: PaginationState;
+    onPaginationChange?: (state: PaginationState) => void;
+    manualPagination?: boolean;
+    totalRowCount?: number;
+    pageSizes?: number[];
+    paginationEnabled?: boolean;
+}

package/dist/Table/components/ExpandRowButton/ExpandRowButton.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const ExpandRowButton = ({
+  row,
+  expandedIcon,
+  collapsedIcon,
+  ...restProps
+}) => row.getCanExpand() ? jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.IconButton, {
+  ...restProps,
+  icon: row.getIsExpanded() ? expandedIcon ?? redisUiIcons.ChevronUpIcon : collapsedIcon ?? redisUiIcons.ChevronDownIcon,
+  onClick: (e) => {
+    var _a;
+    e.stopPropagation();
+    (_a = row.getToggleExpandedHandler()) == null ? void 0 : _a();
+  }
+}) : null;
+exports.ExpandRowButton = ExpandRowButton;

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

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@redislabsdev/redis-ui-components';
+import { Row } from '@tanstack/react-table';
+export interface ExpandRowButtonProps extends Omit<IconButtonProps, 'icon' | 'onClick'> {
+    row: Pick<Row<unknown>, 'getCanExpand' | 'getIsExpanded' | 'getToggleExpandedHandler'>;
+    expandedIcon?: IconButtonProps['icon'];
+    collapsedIcon?: IconButtonProps['icon'];
+}
+export declare const ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/ExpandRowButton/ExpandRowButton.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { IconButton } from "@redislabsdev/redis-ui-components";
+import { ChevronUpIcon, ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
+const ExpandRowButton = ({
+  row,
+  expandedIcon,
+  collapsedIcon,
+  ...restProps
+}) => row.getCanExpand() ? jsxRuntimeExports.jsx(IconButton, {
+  ...restProps,
+  icon: row.getIsExpanded() ? expandedIcon ?? ChevronUpIcon : collapsedIcon ?? ChevronDownIcon,
+  onClick: (e) => {
+    var _a;
+    e.stopPropagation();
+    (_a = row.getToggleExpandedHandler()) == null ? void 0 : _a();
+  }
+}) : null;
+export {
+  ExpandRowButton
+};

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const ShowOnRowHover = _styled__default.default.div`
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease-in-out;
+`;
+exports.ShowOnRowHover = ShowOnRowHover;

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

@@ -0,0 +1 @@
+export declare const ShowOnRowHover: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+const ShowOnRowHover = _styled.div`
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease-in-out;
+`;
+export {
+  ShowOnRowHover
+};