@hazelcast/ui 1.3.3-next.25 → 1.3.3-next.27

package/lib/Table/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}

package/lib/Table/Header.module.scss

@@ -22,7 +22,6 @@
   .separator {
     width: 1px;
     height: 100%;
-    background: c.$colorNeutralWhite;
   }
 
   .resizing,
@@ -33,6 +32,11 @@
 
 .container {
   position: relative;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  background: c.$colorNeutralGray;
+  border-right: 1px solid c.$colorNeutralWhite;
 
   .th {
     display: flex;
@@ -41,7 +45,7 @@
     padding-left: c.$grid * 5;
     padding-right: c.$grid * 5;
     color: c.$colorText;
-    background: #e9f0f9;
+    box-sizing: border-box;
 
     @include c.typographyBodySmall('bold');
     @include h.overflowEllipsis;
@@ -79,7 +83,7 @@
       }
 
       &:hover {
-        background-color: #ccdff5;
+        background-color: c.$colorNeutralGrayDarker;
       }
     }
 

package/lib/Table/Row.d.ts

@@ -1,6 +1,8 @@
-import { FC, AnchorHTMLAttributes } from 'react';
-import { TableHeaderGroupProps } from 'react-table';
-type RowBase = Omit<TableHeaderGroupProps, 'key'> & {
+import { FC, AnchorHTMLAttributes, CSSProperties } from 'react';
+type RowBase = {
+    className?: string;
+    style?: CSSProperties;
+    role?: string;
     ariaRowIndex?: number;
 };
 export type RowProps = RowBase & {

package/lib/Table/Row.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
-import styles from './Row.module.scss';
 import { useUID } from 'react-uid';
 import { keyIsOneOf } from '../utils/keyboard';
+import styles from './Row.module.scss';
 export const Row = ({ children, className, style, role, ariaRowIndex, onClick }) => {
-    const onKeyPress = useCallback((event) => {
+    const onKeyDown = useCallback((event) => {
         event.preventDefault();
         if (keyIsOneOf(event, 'Enter') && onClick) {
             onClick();
@@ -12,7 +12,7 @@ export const Row = ({ children, className, style, role, ariaRowIndex, onClick })
     }, [onClick]);
     return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.row, {
             [styles.clickable]: !!onClick,
-        }, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyPress: onClick ? onKeyPress : undefined, onClick: onClick }, children));
+        }, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? onKeyDown : undefined, onClick: onClick }, children));
 };
 // eslint-disable-next-line jsx-a11y/anchor-has-content
 const DefaultAnchor = (props) => React.createElement("a", { ...props });
@@ -21,5 +21,5 @@ export const LinkRow = ({ children, className, style, role, ariaRowIndex, href,
     return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.linkRow, className), role: role, "aria-rowindex": ariaRowIndex, "aria-owns": anchorId },
         React.createElement(AnchorComponent, { className: styles.link, style: style, href: href, id: anchorId }, children)));
 };
-export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.headerRow, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
+export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.row, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
 //# sourceMappingURL=Row.js.map

package/lib/Table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAuC,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAO9C,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE;YACzC,OAAO,EAAE,CAAA;SACV;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,uDAAuD;AACvD,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,GAAG,aAAa,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACnG,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAChI,QAAQ,CACL,CACP,CAAA"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAsD,MAAM,OAAO,CAAA;AAClG,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAOtC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE;YACzC,OAAO,EAAE,CAAA;SACV;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,uDAAuD;AACvD,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,GAAG,aAAa,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACnG,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAC1H,QAAQ,CACL,CACP,CAAA"}

package/lib/Table/Row.module.scss

@@ -1,8 +1,14 @@
 @use '../../styles/constants' as c;
 @use '../../styles/helpers' as h;
 
+@mixin rowBase {
+  display: flex;
+  width: 100%;
+}
+
 .row {
   @include c.typographyBodySmall;
+  @include rowBase;
 
   &.clickable {
     cursor: pointer;
@@ -25,10 +31,12 @@
 
 .linkRow {
   cursor: pointer;
+  @include rowBase;
 
   .link {
     text-decoration: none;
     background-color: inherit;
+    @include rowBase;
 
     &:focus-visible {
       @include h.outlineSimple;

package/lib/Table/Table.d.ts

@@ -1,34 +1,11 @@
 import { DataTestProp } from '@hazelcast/helpers';
 import { AnchorHTMLAttributes, FC, ReactChild, ReactElement, ReactNode } from 'react';
-import { TableOptions, Row as RowType, Cell as CellType, Column as ColumnType, TableInstance, SortingRule } from 'react-table';
 import { PaginationProps } from '../Pagination';
 import { CellProps } from './Cell';
 import { RowProps } from './Row';
-export type { Accessor, Cell, Renderer, Row, CellProps, HeaderGroup, TableInstance, TableState } from 'react-table';
-export type Column<T extends object> = ColumnType<T> & {
-    canHide?: boolean;
-};
-declare module 'react-table' {
-    interface TableOptions<D extends object = {}> extends UsePaginationOptions<D & UseExpandedRowProps<D>>, UseSortByOptions<D>, UseFiltersOptions<D>, UseRowSelectOptions<D>, UseGroupByOptions<D>, UseExpandedOptions<D>, UseResizeColumnsOptions<D>, Record<string, any> {
-    }
-    interface Hooks<D extends object = {}> extends UseSortByHooks<D>, UseRowSelectHooks<D>, UseGroupByHooks<D> {
-    }
-    interface TableInstance<D extends object = {}> extends UsePaginationInstanceProps<D>, UseSortByInstanceProps<D>, UseFiltersInstanceProps<D>, UseRowSelectInstanceProps<D>, UseGroupByInstanceProps<D> {
-    }
-    interface TableState<D extends object = {}> extends UsePaginationState<D>, UseSortByState<D>, UseFiltersState<D>, UseRowSelectState<D>, UseGroupByState<D>, UseColumnOrderState<D>, UseResizeColumnsState<D> {
-    }
-    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseGroupByColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
-        Footer?: string | Renderer<TableInstance<D>>;
-        align?: 'left' | 'right' | 'center';
-    }
-    interface ColumnInstance<D extends object = {}> extends UseSortByColumnProps<D>, UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D> {
-    }
-    interface Cell<D extends object = {}, V = any> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
-    }
-    interface Row<D extends object = {}> extends UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseExpandedRowProps<D> {
-    }
-}
+import { CellType, ColumnType, InitialState, RowData, RowType, SortingRule, TableState } from './tableTypes';
 export type PaginationOptions = Partial<Pick<PaginationProps, 'pageSizeOptions'>>;
+export * from './tableTypes';
 /**
  * `defaultPageSize` should be one of the values in `pageSizeOptions`.
  * If it's not it won't break anything but it is a bad UX
@@ -48,11 +25,10 @@ export type ControlledPaginationProps = {
     manualPagination?: boolean;
     onPaginationChange?: (paginationChangeProps: PaginationChangeProps) => void;
 };
-export type ControlledSortingProps<D extends object> = {
-    manualSortBy?: boolean;
-    onSortingChange?: (sortBy: SortingRule<D>[]) => void;
+export type ControlledSortingProps = {
+    onSortingChange?: (sortBy: SortingRule[]) => void;
 };
-type CustomTableRowClickProps<D extends object> = {
+type CustomTableRowClickProps<D extends RowData> = {
     onRowClick?: (rowInfo: RowType<D>) => void;
     getHref?: never;
     AnchorComponent?: never;
@@ -61,8 +37,9 @@ type CustomTableRowClickProps<D extends object> = {
     onRowClick?: never;
     AnchorComponent?: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
 };
-type CustomTableProps<D extends object> = {
+type CustomTableProps<D extends RowData> = {
     loading?: boolean;
+    tableId?: string;
     overlayLoading?: boolean;
     className?: string;
     hideHeader?: boolean;
@@ -75,18 +52,24 @@ type CustomTableProps<D extends object> = {
     getCustomRowProps?: (rowInfo: RowType<D>) => RowProps;
     getCustomCellProps?: (cellInfo: CellType<D>) => CellProps;
     onRenderedContentChange?: (newPage: RowType<D>[]) => void;
-    autoResetGlobalFilter?: boolean;
     pageIndex?: number;
     onPageChange?: (newPage: number) => void;
     onRowSelect?: (ids: string[]) => void;
     columnsOrdering?: boolean;
-    children?: (table: ReactElement, tableInstance: TableInstance<D>) => ReactElement;
+    children?: (table: ReactElement) => ReactElement;
     renderRowSubComponent?: (props: RowType<D>) => ReactNode;
-    canExpand?: (row: RowType<D>) => void;
+    canExpand?: (row: RowType<D>) => boolean;
     onCopy?: (data: (string | undefined)[][]) => void;
+    initialState?: InitialState;
+    onStateChange?: ((newState: TableState) => void) | null;
 } & CustomTableRowClickProps<D> & DataTestProp;
-export type TableProps<D extends object> = TableOptions<D> & ExtendedPaginationProps & ControlledPaginationProps & ControlledSortingProps<D> & CustomTableProps<D>;
-export type { ColumnType, RowType, CellType };
+export type TableProps<D extends RowData> = {
+    data: D[];
+    columns: ColumnType<D>[];
+    pageCount?: number;
+    disableSortBy?: boolean;
+    pageSize?: number;
+} & ExtendedPaginationProps & ControlledPaginationProps & ControlledSortingProps & CustomTableProps<D>;
 /**
  * ### Purpose
  * Table component allows to arrange data in rows and columns.
@@ -97,4 +80,6 @@ export type { ColumnType, RowType, CellType };
  * - Rows can be clickable. If you supply Table with `getHref` function rows will become <a> tags!
  * - Is able to resize columns out of the box
  */
-export declare const Table: <D extends object>({ "data-test": dataTest, autoResetSortBy, columns: propColumns, data, defaultColumn, disableSortBy, onPaginationChange, onSortingChange, manualPagination, manualSortBy, onRenderedContentChange, autoResetPage, hidePagination, pageCount: controlledPageCount, defaultPageSize, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle, pageIndex: incomingPageIndex, initialState, className, headerClassName, contentClassName, footerClassName, searchValue, hideHeader, autoResetGlobalFilter, onPageChange, overlayLoading, onRowSelect, columnsOrdering, autoResetResize, autoResetSelectedRows, children, renderRowSubComponent, autoResetExpanded, onCopy, canExpand, }: TableProps<D>) => ReactElement;
+export declare const Table: <D extends object & {
+    subRows?: D[] | undefined;
+}>({ "data-test": dataTest, columns: propColumns, data, disableSortBy, onPaginationChange, onSortingChange, manualPagination, onRenderedContentChange, hidePagination, pageCount: controlledPageCount, defaultPageSize, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle, pageIndex: incomingPageIndex, initialState, className, headerClassName, contentClassName, footerClassName, searchValue, hideHeader, onPageChange, overlayLoading, onRowSelect, columnsOrdering, children, renderRowSubComponent, onCopy, canExpand, onStateChange, }: TableProps<D>) => ReactElement;

package/lib/Table/Table.js

@@ -1,11 +1,12 @@
+import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useMemo, useState, } from 'react';
 import cn from 'classnames';
 import { HotKeys } from 'react-hotkeys';
-import { useTable, usePagination, useSortBy, useAsyncDebounce, useResizeColumns, useFlexLayout, useGlobalFilter, useColumnOrder, useExpanded, } from 'react-table';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getExpandedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather';
 import { Pagination } from '../Pagination';
 import { Cell } from './Cell';
-import { EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
+import { EnhancedCellRenderer, EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
 import { Header } from './Header';
 import { HeaderRow, Row } from './Row';
 import { Loader } from '../Loader';
@@ -16,14 +17,11 @@ import { TableContent } from './TableContent';
 import { ROW_EXPANDER_COLUMN_ID } from './constants';
 import { useColumnsSelection, ContextMenu } from './features/columnsSelection';
 import { useRefValue } from '../hooks';
+import { useTrackTableState } from './useTrackTableState';
+import { getCellStyle, getColumnDef, getRowStyle, getTableInitialState, prepareRow } from './utils';
 import styles from './Table.module.scss';
 import styleConsts from '../../styles/constants/export.module.scss';
-const column = {
-    // When using the useFlexLayout:
-    minWidth: Number(styleConsts.tableColumnMinWidth),
-    width: Number(styleConsts.tableColumnWidth),
-    maxWidth: Number(styleConsts.tableColumnMaxWidth), // maxWidth is only used as a limit for resizing
-};
+export * from './tableTypes';
 /**
  * ### Purpose
  * Table component allows to arrange data in rows and columns.
@@ -35,9 +33,11 @@ const column = {
  * - Is able to resize columns out of the box
  */
 // Inspiration here: https://react-table.tanstack.com/docs/examples/basic
-export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns: propColumns, data, defaultColumn = column, disableSortBy, onPaginationChange, onSortingChange, manualPagination, manualSortBy, onRenderedContentChange, autoResetPage = false, hidePagination = false, pageCount: controlledPageCount, defaultPageSize = 10, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle = 'The table is empty', pageIndex: incomingPageIndex, initialState = { pageIndex: incomingPageIndex || 0, pageSize: defaultPageSize }, className = '', headerClassName = '', contentClassName = '', footerClassName = '', searchValue, hideHeader, autoResetGlobalFilter = false, onPageChange, overlayLoading, onRowSelect, columnsOrdering = false, autoResetResize = false, autoResetSelectedRows = false, children, renderRowSubComponent, autoResetExpanded = false, onCopy, canExpand, }) => {
+export const Table = ({ 'data-test': dataTest, columns: propColumns, data, disableSortBy, onPaginationChange, onSortingChange, manualPagination, onRenderedContentChange, hidePagination = false, pageCount: controlledPageCount, defaultPageSize = 10, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle = 'The table is empty', pageIndex: incomingPageIndex, initialState = { paginationOptions: { pageIndex: incomingPageIndex || 0, pageSize: defaultPageSize } }, className = '', headerClassName = '', contentClassName = '', footerClassName = '', searchValue, hideHeader, onPageChange, overlayLoading, onRowSelect, columnsOrdering = false, children, renderRowSubComponent, onCopy, canExpand, onStateChange, }) => {
     var _a;
     const getOncopy = useRefValue(onCopy);
+    const getCanExpand = useRefValue(canExpand);
+    const getRenderRowSubComponent = useRefValue(renderRowSubComponent);
     const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState(null);
     const draggedColumnRef = useRef(null);
     const previousIncomingPageIndex = usePrevious(incomingPageIndex);
@@ -53,76 +53,94 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns:
     }, [onCopy]);
     const columns = useMemo(() => {
         if (renderRowSubComponent || data.some((item) => 'subRows' in item)) {
-            return [
-                {
-                    width: 60,
-                    disableResizing: true,
-                    id: ROW_EXPANDER_COLUMN_ID,
-                    Header: () => React.createElement("span", { role: "contentinfo", "aria-label": "row-expander-column-header" }),
-                    Cell: ({ row }) => {
-                        if ((row.canExpand || renderRowSubComponent) && (!canExpand || (canExpand && canExpand(row)))) {
-                            const rowProps = row.getToggleRowExpandedProps();
-                            return (
-                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                            React.createElement("div", { tabIndex: 0, role: "button", "data-test": "row-expander", className: styles.expander, ...rowProps, onClick: (e) => {
-                                    e.preventDefault();
-                                    rowProps.onClick(e);
-                                } },
-                                React.createElement(Icon, { icon: row.isExpanded ? ChevronUp : ChevronDown, ariaLabel: "row-expander" })));
-                        }
-                        return null;
-                    },
+            const expander = {
+                width: 60,
+                disableResizing: true,
+                id: ROW_EXPANDER_COLUMN_ID,
+                Header: () => React.createElement("span", { role: "contentinfo", "aria-label": "row-expander-column-header" }),
+                Cell: ({ row }) => {
+                    if (row.getCanExpand()) {
+                        return (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        React.createElement("div", { tabIndex: 0, role: "button", "data-test": "row-expander", "aria-expanded": row.getIsExpanded(), className: styles.expander, onClick: (e) => {
+                                e.preventDefault();
+                                row.getToggleExpandedHandler()();
+                            } },
+                            React.createElement(Icon, { icon: row.getIsExpanded() ? ChevronUp : ChevronDown, ariaLabel: "row-expander" })));
+                    }
+                    return React.createElement(React.Fragment, null, null);
                 },
-                ...propColumns,
-            ];
+            };
+            return [expander, ...propColumns].map(getColumnDef);
         }
-        return propColumns;
-    }, [propColumns, canExpand, data, renderRowSubComponent]);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const onPaginationChangeDebounced = useAsyncDebounce(onPaginationChange, 200);
-    const tableInstance = useTable({
+        return propColumns.map(getColumnDef);
+    }, [propColumns, data, renderRowSubComponent]);
+    const defaultColumn = useMemo(() => ({
+        cell: (props) => React.createElement(EnhancedCellRenderer, { cell: props.cell, columnResizing: props.column.getIsResizing() }),
+        minSize: Number(styleConsts.tableColumnMinWidth),
+        size: Number(styleConsts.tableColumnWidth),
+        maxSize: Number(styleConsts.tableColumnMaxWidth), // maxWidth is only used as a limit for resizing
+    }), []);
+    const tableInitialState = useMemo(() => getTableInitialState(initialState), [initialState]);
+    const tableInstance = useReactTable({
         columns,
         data,
-        disableSortBy,
-        disableMultiSort: true,
-        // https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes
-        autoResetSortBy,
+        enableSorting: !disableSortBy,
+        enableMultiSort: false,
         // Pass our hoisted table state
-        initialState,
+        initialState: tableInitialState,
         // Tell the usePagination hook that we'll handle our own data fetching
         manualPagination: manualPagination,
-        manualSortBy,
         // This means we'll also have to provide our own pageCount
         pageCount: controlledPageCount,
-        autoResetPage,
         defaultColumn,
-        autoResetGlobalFilter,
-        autoResetResize,
-        autoResetSelectedRows,
-        autoResetExpanded,
+        columnResizeMode: 'onChange',
         paginateExpandedRows: false,
-    }, useGlobalFilter, useSortBy, useExpanded, usePagination, useFlexLayout, useResizeColumns, useColumnOrder);
-    const { getTableProps, headerGroups, footerGroups, prepareRow, page, visibleColumns, canPreviousPage, canNextPage, pageCount, gotoPage, nextPage, previousPage, setPageSize, 
-    // Get the state from the instance
-    state: { pageIndex, pageSize, sortBy, columnResizing, selectedRowIds, hiddenColumns }, setGlobalFilter, setColumnOrder, } = tableInstance;
+        getSubRows: useCallback((row) => row.subRows, []),
+        getRowCanExpand: useCallback((row) => {
+            var _a;
+            const cb = getCanExpand();
+            if (cb) {
+                return cb(prepareRow(row));
+            }
+            if (getRenderRowSubComponent()) {
+                return true;
+            }
+            return ((_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        }, [getCanExpand, getRenderRowSubComponent]),
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+    const { getVisibleFlatColumns, nextPage, setPageIndex: goToPage, getRowCount, getState, previousPage, setPageSize, setGlobalFilter, setColumnOrder, getPageCount, getCanNextPage, getCanPreviousPage, getFooterGroups, } = tableInstance;
+    useTrackTableState(tableInstance, onStateChange);
+    const footerGroups = getFooterGroups();
+    const page = tableInstance.getPaginationRowModel().rows;
+    const rowsPerPage = getRowCount();
+    const pageCount = getPageCount();
+    const { sorting: sortBy, columnOrder, columnSizing: columnResizing, rowSelection: selectedRowIds, pagination: { pageIndex, pageSize }, } = getState();
+    const getColumnOrder = useRefValue(columnOrder);
     // drag and drop
     const onDragStart = useCallback((e) => {
         draggedColumnRef.current = Number(e.dataTransfer.getData('text/plain'));
     }, []);
-    const onDrop = useCallback((e, columnIndex) => {
+    const onDrop = useCallback((_, columnIndex) => {
         if (draggedColumnRef.current !== null && columnIndex !== draggedColumnRef.current) {
+            const visibleColumns = getColumnOrder() || getVisibleFlatColumns().map(({ id }) => id);
             const newColumns = [...visibleColumns];
             newColumns[columnIndex] = visibleColumns[draggedColumnRef.current];
             newColumns[draggedColumnRef.current] = visibleColumns[columnIndex];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-            setColumnOrder(newColumns.map(({ id, accessor }) => (id || accessor)));
+            setColumnOrder(newColumns);
         }
-    }, [visibleColumns, setColumnOrder]);
+    }, [getColumnOrder, getVisibleFlatColumns, setColumnOrder]);
     const columnsSelectionProps = useColumnsSelection({
-        rowsPerPage: page.length,
+        rowsPerPage,
         columnsPerRow: columns.length,
     });
     const { onEndSelection, getSelectedColumns, selectedColumnValuesRef } = columnsSelectionProps;
+    const onPaginationChangeDebounced = useMemo(() => (onPaginationChange ? debounce(onPaginationChange, 200) : undefined), [onPaginationChange]);
     const onKeyUp = useCallback(() => {
         const callback = getOncopy();
         if (callback) {
@@ -147,25 +165,23 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns:
     }, [onKeyUp, onEndSelection]);
     // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
     useEffect(() => {
-        if (onPaginationChange) {
+        if (onPaginationChangeDebounced) {
             onPaginationChangeDebounced({ pageIndex, pageSize });
         }
-    }, [onPaginationChange, onPaginationChangeDebounced, pageIndex, pageSize]);
+    }, [onPaginationChangeDebounced, pageIndex, pageSize]);
     useEffect(() => {
         if (onSortingChange) {
             onSortingChange(sortBy);
         }
     }, [sortBy, onSortingChange]);
     // Debounce our `fetchData` call for 200ms.
-    // We can use non-null assertion here since we're checking existence of `fetchData` in the `useEffect` below
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const onRenderedContentChangeDebounced = useAsyncDebounce(onRenderedContentChange, 200);
+    const onRenderedContentChangeDebounced = useMemo(() => (onRenderedContentChange ? debounce(onRenderedContentChange, 200) : undefined), [onRenderedContentChange]);
     // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
     useEffect(() => {
-        if (onRenderedContentChange) {
-            onRenderedContentChangeDebounced(page);
+        if (onRenderedContentChangeDebounced) {
+            onRenderedContentChangeDebounced(page.map(prepareRow));
         }
-    }, [onRenderedContentChange, onRenderedContentChangeDebounced, page]);
+    }, [onRenderedContentChangeDebounced, page]);
     // Apply global filter when searchValue changes
     useEffect(() => {
         if (searchValue !== undefined) {
@@ -175,14 +191,14 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns:
     }, [searchValue, setGlobalFilter]);
     useEffect(() => {
         if (pageCount < pageIndex + 1) {
-            gotoPage(pageCount - 1);
+            goToPage(pageCount - 1);
         }
-    }, [pageIndex, pageCount, gotoPage]);
+    }, [pageIndex, pageCount, goToPage]);
     useEffect(() => {
         if (incomingPageIndex !== undefined && incomingPageIndex !== previousIncomingPageIndex) {
-            gotoPage(incomingPageIndex);
+            goToPage(incomingPageIndex);
         }
-    }, [gotoPage, incomingPageIndex, previousIncomingPageIndex]);
+    }, [goToPage, incomingPageIndex, previousIncomingPageIndex]);
     useEffect(() => {
         if (onRowSelect) {
             onRowSelect(Object.keys(selectedRowIds));
@@ -190,58 +206,51 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns:
     }, [onRowSelect, selectedRowIds]);
     const hasData = data.length > 0;
     // If at least one of the columns has footer then we display the footer row
-    const hasFooter = !loading && hasData && columns.some((col) => !!col.Footer);
+    const hasFooter = !loading && hasData && columns.some((col) => !!col.footer);
     // Header row has always aria-rowindex = 1.
     const headerIndex = 1;
     // We're using this offset to display correct aria-rowindex when pagination is in action.
     const cellIndexOffset = pageSize * pageIndex + headerIndex;
     // Total row count.
     const rowCount = data.length + headerIndex + (hasFooter ? 1 : 0);
-    const contentColumns = useMemo(() => {
-        if (!hiddenColumns || hiddenColumns.length === 0) {
-            return columns;
-        }
-        return columns.filter((col) => hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes((col.id || col.Header)));
-    }, [columns, hiddenColumns]);
     const content = (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper', className: className },
             React.createElement("div", { className: cn(styles.container, {
                     [styles.spaceBottom]: !hidePagination,
                 }) },
-                React.createElement("div", { "data-test": "table", ...getTableProps(), "aria-rowcount": rowCount },
-                    !hideHeader && (React.createElement("div", { "data-test": "table-header-row-group", role: "rowgroup", className: headerClassName }, headerGroups.map((headerGroup) => {
-                        const { key: headerGroupKey, ...restHeaderGroupProps } = headerGroup.getHeaderGroupProps();
-                        return (React.createElement(HeaderRow, { key: headerGroupKey, ...restHeaderGroupProps, ariaRowIndex: headerIndex }, headerGroup.headers.map((column, i) => {
-                            const { key: columnKey, ...restHeaderProps } = column.getHeaderProps(column.getSortByToggleProps());
-                            const isDraggable = columnsOrdering && column.id !== 'expander';
-                            return (React.createElement(Header, { index: i, key: columnKey, align: column.align, canSort: column.canSort, isSorted: column.isSorted, isSortedDesc: column.isSortedDesc, canResize: column.canResize, isResizing: column.isResizing, getResizerProps: column.getResizerProps, onDrop: isDraggable ? onDrop : undefined, onDragStart: onDragStart, ...restHeaderProps },
-                                React.createElement(EnhancedHeaderFooterRenderer, { column: column, columnResizing: columnResizing, type: "Header" })));
-                        })));
-                    }))),
+                React.createElement("div", { "data-test": "table", role: "table", "aria-rowcount": rowCount },
+                    !hideHeader && (React.createElement("div", { "data-test": "table-header-row-group", role: "rowgroup", className: headerClassName }, tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(HeaderRow, { key: headerGroup.id, role: "row", ariaRowIndex: headerIndex, style: getRowStyle({ totalSize: tableInstance.getTotalSize() }) }, headerGroup.headers.map((header, i) => {
+                        var _a, _b;
+                        const canSort = header.column.getCanSort();
+                        const isDraggable = columnsOrdering && header.id !== 'expander';
+                        return (React.createElement(Header, { index: i, colSpan: 1, key: header.id, role: "columnheader", onDragStart: onDragStart, style: getCellStyle({ size: header.getSize(), minSize: header.column.columnDef.minSize || header.getSize() }), canSort: canSort, isSorted: !!header.column.getIsSorted(), isSortedDesc: (_a = sortBy[header.column.getSortIndex()]) === null || _a === void 0 ? void 0 : _a.desc, canResize: header.column.getCanResize(), onDrop: isDraggable ? onDrop : undefined, resizeHandler: header.getResizeHandler(), isResizing: header.column.getIsResizing(), align: (_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.align, onClick: canSort ? header.column.getToggleSortingHandler() : undefined },
+                            React.createElement(EnhancedHeaderFooterRenderer, { type: "header", context: header.getContext() })));
+                    })))))),
                     !overlayLoading && loading ? (React.createElement(Row, { role: "row" },
                         React.createElement(Cell, { role: "cell", align: "center", colSpan: columns.length, "data-test": "table-loader-cell" },
                             React.createElement(Loader, null)))) : hasData ? (React.createElement(HotKeys, { role: "rowgroup", "data-test": "table-cell-row-group", keyMap: commands, handlers: hotKeysHandlers, className: styles.hotKeys },
-                        React.createElement(TableContent, { page: page, onCopy: onCopy, getHref: getHref, columns: contentColumns, rootRef: setContextMenuAnchorEl, ...columnsSelectionProps, onRowClick: onRowClick, prepareRow: prepareRow, className: contentClassName, columnResizing: columnResizing, AnchorComponent: AnchorComponent, cellIndexOffset: cellIndexOffset, getCustomRowProps: getCustomRowProps, getCustomCellProps: getCustomCellProps, renderRowSubComponent: renderRowSubComponent }))) : (React.createElement("div", { role: "row" },
+                        React.createElement(TableContent, { page: page, onCopy: onCopy, getHref: getHref, totalSize: tableInstance.getTotalSize(), rootRef: setContextMenuAnchorEl, ...columnsSelectionProps, onRowClick: onRowClick, className: contentClassName, columnResizing: columnResizing, AnchorComponent: AnchorComponent, cellIndexOffset: cellIndexOffset, getCustomRowProps: getCustomRowProps, getCustomCellProps: getCustomCellProps, renderRowSubComponent: renderRowSubComponent }))) : (React.createElement("div", { role: "row" },
                         React.createElement("div", { role: "cell" },
                             React.createElement(EmptyState, { "data-test": "table-no-data", className: styles.empty, title: noDataTitle, icon: AlertTriangle, iconLabel: "Alert" })))),
                     hasFooter && (React.createElement("div", { "data-test": "table-footer-row-group", role: "rowgroup", className: footerClassName }, footerGroups.map((group) => {
-                        const { key: footerGroupKey, ...restFooterGroupProps } = group.getFooterGroupProps();
+                        const { id: footerGroupKey } = group;
                         return (
                         // Footer props getters do not provide role attributes
-                        React.createElement(Row, { key: footerGroupKey, ariaRowIndex: rowCount, ...restFooterGroupProps, role: "row" }, group.headers.map((column) => {
-                            const { key: footerKey, ...restFooterProps } = column.getFooterProps();
+                        React.createElement(Row, { key: footerGroupKey, ariaRowIndex: rowCount, style: getRowStyle({ totalSize: tableInstance.getTotalSize() }), role: "row" }, group.headers.map((column) => {
+                            var _a;
+                            const { id: footerKey, column: { columnDef }, } = column;
                             return (
                             // Footer props getters do not provide role attributes
-                            React.createElement(Cell, { key: footerKey, ...restFooterProps, align: column.align, role: "cell" },
-                                React.createElement(EnhancedHeaderFooterRenderer, { column: column, columnResizing: columnResizing, type: "Footer" })));
+                            React.createElement(Cell, { key: footerKey, colSpan: 1, align: (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.align, style: getCellStyle({ size: column.getSize(), maxSize: columnDef.maxSize, minSize: columnDef.minSize }), role: "cell" },
+                                React.createElement(EnhancedHeaderFooterRenderer, { context: column.getContext(), type: "footer" })));
                         })));
                     }))))),
-            !hidePagination && hasData && (React.createElement(Pagination, { pageCount: pageCount, currentPage: pageIndex + 1, canPreviousPage: canPreviousPage, canNextPage: canNextPage, goToPage: (p) => {
+            !hidePagination && hasData && (React.createElement(Pagination, { pageCount: pageCount, currentPage: pageIndex + 1, canPreviousPage: getCanPreviousPage(), canNextPage: getCanNextPage(), goToPage: (p) => {
                     if (onPageChange) {
                         onPageChange(p - 1);
                     }
                     else {
-                        gotoPage(p - 1);
+                        goToPage(p - 1);
                     }
                 }, nextPage: () => {
                     if (onPageChange) {
@@ -260,7 +269,7 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns:
                 }, pageSize: pageSize, setPageSize: setPageSize, numberOfItems: data.length, pageSizeOptions: (_a = paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSizeOptions) !== null && _a !== void 0 ? _a : [5, 10, 20] }))),
         onCopy && React.createElement(ContextMenu, { anchorElement: contextMenuAnchorEl, onCopy: onKeyUp })));
     if (children) {
-        return children(content, tableInstance);
+        return children(content);
     }
     return content;
 };