@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Table/Table.js

@@ -1,30 +1,27 @@
-'use strict';
-
-var debounce = require('lodash/debounce');
-var React = require('react');
-var cn = require('classnames');
-var HotKeys = require('react-hot-keys');
-var reactTable = require('@tanstack/react-table');
-var reactFeather = require('react-feather');
-var components_Pagination = require('../Pagination.js');
-var components_Table_Cell = require('./Cell.js');
-var components_Table_EnhancedRenderers = require('./EnhancedRenderers.js');
-var components_Table_Header = require('./Header.js');
-var components_Table_Row = require('./Row.js');
-var components_Loader = require('../Loader.js');
-var components_EmptyState = require('../EmptyState.js');
-var hooks_usePrevious = require('../../hooks/usePrevious.js');
-var components_Icon = require('../Icon.js');
-var components_Table_TableContent = require('./TableContent.js');
-var components_Table_constants = require('./constants.js');
-var components_Table_features_columnsSelection_columnsSelection = require('./features/columnsSelection/columnsSelection.js');
-var components_Table_features_columnsSelection_ContextMenu_ContextMenu = require('./features/columnsSelection/ContextMenu/ContextMenu.js');
-var components_Table_useTrackTableState = require('./useTrackTableState.js');
-var components_Table_utils = require('./utils.js');
-var Table_module = require('./Table.module.scss.js');
-var export_module = require('../../styles/constants/export.module.scss.js');
-var hooks_useRefValue = require('../../hooks/useRefValue.js');
-
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useRef, useMemo, useState, } from 'react';
+import cn from 'classnames';
+import HotKeys from 'react-hot-keys';
+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 { EnhancedCellRenderer, EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
+import { Header } from './Header';
+import { HeaderRow, Row } from './Row';
+import { Loader } from '../Loader';
+import { EmptyState } from '../EmptyState';
+import { usePrevious } from '../../hooks/usePrevious';
+import { Icon } from '../Icon';
+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';
+export * from './tableTypes';
 /**
  * ### Purpose
  * Table component allows to arrange data in rows and columns.
@@ -36,436 +33,228 @@ var hooks_useRefValue = require('../../hooks/useRefValue.js');
  * - Is able to resize columns out of the box
  */
 // Inspiration here: https://react-table.tanstack.com/docs/examples/basic
-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 = hooks_useRefValue.useRefValue(onCopy);
-  const getCanExpand = hooks_useRefValue.useRefValue(canExpand);
-  const getRenderRowSubComponent = hooks_useRefValue.useRefValue(renderRowSubComponent);
-  const [contextMenuAnchorEl, setContextMenuAnchorEl] = React.useState(null);
-  const draggedColumnRef = React.useRef(null);
-  const previousIncomingPageIndex = hooks_usePrevious.usePrevious(incomingPageIndex);
-  const columns = React.useMemo(() => {
-    if (renderRowSubComponent || data.some(item => 'subRows' in item)) {
-      const expander = {
-        width: 60,
-        disableResizing: true,
-        id: components_Table_constants.ROW_EXPANDER_COLUMN_ID,
-        Header: () => /*#__PURE__*/React.createElement("span", {
-          role: "contentinfo",
-          "aria-label": "row-expander-column-header"
-        }),
-        Cell: ({
-          row
-        }) => {
-          if (row.getCanExpand()) {
-            return /*#__PURE__*/React.createElement("div", {
-              tabIndex: 0,
-              role: "button",
-              "data-test": "row-expander",
-              "aria-expanded": row.getIsExpanded(),
-              className: Table_module.default.expander,
-              onClick: e => {
-                e.preventDefault();
-                row.getToggleExpandedHandler()();
-              }
-            }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-              icon: row.getIsExpanded() ? reactFeather.ChevronUp : reactFeather.ChevronDown,
-              ariaLabel: "row-expander"
-            }));
-          }
-          return /*#__PURE__*/React.createElement(React.Fragment, null, null);
+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);
+    const columns = useMemo(() => {
+        if (renderRowSubComponent || data.some((item) => 'subRows' in item)) {
+            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 (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);
+                },
+            };
+            return [expander, ...propColumns].map(getColumnDef);
         }
-      };
-      return [expander, ...propColumns].map(components_Table_utils.getColumnDef);
-    }
-    return propColumns.map(components_Table_utils.getColumnDef);
-  }, [propColumns, data, renderRowSubComponent]);
-  const defaultColumn = React.useMemo(() => ({
-    cell: props => /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedCellRenderer, {
-      cell: props.cell,
-      columnResizing: props.column.getIsResizing()
-    }),
-    minSize: Number(export_module.default.tableColumnMinWidth),
-    // minWidth is only used as a limit for resizing
-    size: Number(export_module.default.tableColumnWidth),
-    // width is used for both the flex-basis and flex-grow
-    maxSize: Number(export_module.default.tableColumnMaxWidth) // maxWidth is only used as a limit for resizing
-  }), []);
-  const tableInitialState = React.useMemo(() => components_Table_utils.getTableInitialState(initialState), [initialState]);
-  const tableInstance = reactTable.useReactTable({
-    columns,
-    data,
-    enableSorting: !disableSortBy,
-    enableMultiSort: false,
-    // Pass our hoisted table state
-    initialState: tableInitialState,
-    // Tell the usePagination hook that we'll handle our own data fetching
-    manualPagination: manualPagination,
-    // This means we'll also have to provide our own pageCount
-    pageCount: controlledPageCount,
-    defaultColumn,
-    columnResizeMode: 'onChange',
-    paginateExpandedRows: false,
-    autoResetPageIndex: false,
-    getSubRows: React.useCallback(row => row.subRows, []),
-    getRowCanExpand: React.useCallback(row => {
-      var _a;
-      const cb = getCanExpand();
-      if (cb) {
-        return cb(components_Table_utils.prepareRow(row));
-      }
-      if (getRenderRowSubComponent()) {
-        return true;
-      }
-      return ((_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }, [getCanExpand, getRenderRowSubComponent]),
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getPaginationRowModel: reactTable.getPaginationRowModel(),
-    getSortedRowModel: reactTable.getSortedRowModel(),
-    getExpandedRowModel: reactTable.getExpandedRowModel(),
-    getFilteredRowModel: reactTable.getFilteredRowModel()
-  });
-  const {
-    getVisibleFlatColumns,
-    nextPage,
-    setPageIndex: goToPage,
-    getRowCount,
-    getState,
-    previousPage,
-    setPageSize,
-    setGlobalFilter,
-    setColumnOrder,
-    getPageCount,
-    getCanNextPage,
-    getCanPreviousPage,
-    getFooterGroups
-  } = tableInstance;
-  components_Table_useTrackTableState.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 = hooks_useRefValue.useRefValue(columnOrder);
-  // drag and drop
-  const onDragStart = React.useCallback(e => {
-    draggedColumnRef.current = Number(e.dataTransfer.getData('text/plain'));
-  }, []);
-  const onDrop = React.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];
-      setColumnOrder(newColumns);
-    }
-  }, [getColumnOrder, getVisibleFlatColumns, setColumnOrder]);
-  const columnsSelectionProps = components_Table_features_columnsSelection_columnsSelection.useColumnsSelection({
-    rowsPerPage,
-    columnsPerRow: columns.length
-  });
-  const {
-    onEndSelection,
-    getSelectedColumns,
-    selectedColumnValuesRef
-  } = columnsSelectionProps;
-  const onPaginationChangeDebounced = React.useMemo(() => onPaginationChange ? debounce(onPaginationChange, 200) : undefined, [onPaginationChange]);
-  const onKeyUp = React.useCallback(() => {
-    const callback = getOncopy();
-    if (callback) {
-      const {
+        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), // minWidth is only used as a limit for resizing
+        size: Number(styleConsts.tableColumnWidth), // width is used for both the flex-basis and flex-grow
+        maxSize: Number(styleConsts.tableColumnMaxWidth), // maxWidth is only used as a limit for resizing
+    }), []);
+    const tableInitialState = useMemo(() => getTableInitialState(initialState), [initialState]);
+    const tableInstance = useReactTable({
         columns,
-        range
-      } = getSelectedColumns();
-      if (columns.size || range[0] !== undefined && range[0] !== undefined) {
-        callback(selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current);
-      }
-    }
-  }, [getOncopy, getSelectedColumns, selectedColumnValuesRef]);
-  React.useEffect(() => {
-    return () => {
-      document.body.removeEventListener('mouseup', onEndSelection);
-      document.body.removeEventListener('contextmenu', onEndSelection);
-      document.body.removeEventListener('keyup', onKeyUp);
-    };
-  }, [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
-  React.useEffect(() => {
-    if (onPaginationChangeDebounced) {
-      onPaginationChangeDebounced({
-        pageIndex,
-        pageSize
-      });
-    }
-  }, [onPaginationChangeDebounced, pageIndex, pageSize]);
-  React.useEffect(() => {
-    if (onSortingChange) {
-      onSortingChange(sortBy);
-    }
-  }, [sortBy, onSortingChange]);
-  // Debounce our `fetchData` call for 200ms.
-  const onRenderedContentChangeDebounced = React.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
-  React.useEffect(() => {
-    if (onRenderedContentChangeDebounced) {
-      onRenderedContentChangeDebounced(page.map(components_Table_utils.prepareRow));
-    }
-  }, [onRenderedContentChangeDebounced, page]);
-  // Apply global filter when searchValue changes
-  React.useEffect(() => {
-    if (searchValue !== undefined) {
-      setGlobalFilter(searchValue);
-    }
-  }, [searchValue, setGlobalFilter]);
-  React.useEffect(() => {
-    if (pageCount < pageIndex + 1) {
-      goToPage(pageCount - 1);
-    }
-  }, [pageIndex, pageCount, goToPage]);
-  React.useEffect(() => {
-    if (incomingPageIndex !== undefined && incomingPageIndex !== previousIncomingPageIndex) {
-      goToPage(incomingPageIndex);
-    }
-  }, [goToPage, incomingPageIndex, previousIncomingPageIndex]);
-  React.useEffect(() => {
-    if (onRowSelect) {
-      onRowSelect(Object.keys(selectedRowIds));
+        data,
+        enableSorting: !disableSortBy,
+        enableMultiSort: false,
+        // Pass our hoisted table state
+        initialState: tableInitialState,
+        // Tell the usePagination hook that we'll handle our own data fetching
+        manualPagination: manualPagination,
+        // This means we'll also have to provide our own pageCount
+        pageCount: controlledPageCount,
+        defaultColumn,
+        columnResizeMode: 'onChange',
+        paginateExpandedRows: false,
+        autoResetPageIndex: false,
+        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((_, 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];
+            setColumnOrder(newColumns);
+        }
+    }, [getColumnOrder, getVisibleFlatColumns, setColumnOrder]);
+    const columnsSelectionProps = useColumnsSelection({
+        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) {
+            const { columns, range } = getSelectedColumns();
+            if (columns.size || (range[0] !== undefined && range[0] !== undefined)) {
+                callback(selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current);
+            }
+        }
+    }, [getOncopy, getSelectedColumns, selectedColumnValuesRef]);
+    useEffect(() => {
+        return () => {
+            document.body.removeEventListener('mouseup', onEndSelection);
+            document.body.removeEventListener('contextmenu', onEndSelection);
+            document.body.removeEventListener('keyup', onKeyUp);
+        };
+    }, [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 (onPaginationChangeDebounced) {
+            onPaginationChangeDebounced({ pageIndex, pageSize });
+        }
+    }, [onPaginationChangeDebounced, pageIndex, pageSize]);
+    useEffect(() => {
+        if (onSortingChange) {
+            onSortingChange(sortBy);
+        }
+    }, [sortBy, onSortingChange]);
+    // Debounce our `fetchData` call for 200ms.
+    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 (onRenderedContentChangeDebounced) {
+            onRenderedContentChangeDebounced(page.map(prepareRow));
+        }
+    }, [onRenderedContentChangeDebounced, page]);
+    // Apply global filter when searchValue changes
+    useEffect(() => {
+        if (searchValue !== undefined) {
+            ;
+            setGlobalFilter(searchValue);
+        }
+    }, [searchValue, setGlobalFilter]);
+    useEffect(() => {
+        if (pageCount < pageIndex + 1) {
+            goToPage(pageCount - 1);
+        }
+    }, [pageIndex, pageCount, goToPage]);
+    useEffect(() => {
+        if (incomingPageIndex !== undefined && incomingPageIndex !== previousIncomingPageIndex) {
+            goToPage(incomingPageIndex);
+        }
+    }, [goToPage, incomingPageIndex, previousIncomingPageIndex]);
+    useEffect(() => {
+        if (onRowSelect) {
+            onRowSelect(Object.keys(selectedRowIds));
+        }
+    }, [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);
+    // 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 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", 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, { keyName: "ctrl+c, command+c", onKeyUp: onKeyUp },
+                        React.createElement("div", { "data-test": "table-cell-row-group", className: styles.hotKeys },
+                            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 { id: footerGroupKey } = group;
+                        return (
+                        // Footer props getters do not provide role attributes
+                        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, 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: getCanPreviousPage(), canNextPage: getCanNextPage(), goToPage: (p) => {
+                    if (onPageChange) {
+                        onPageChange(p - 1);
+                    }
+                    else {
+                        goToPage(p - 1);
+                    }
+                }, nextPage: () => {
+                    if (onPageChange) {
+                        onPageChange(pageIndex + 1);
+                    }
+                    else {
+                        nextPage();
+                    }
+                }, previousPage: () => {
+                    if (onPageChange) {
+                        onPageChange(pageIndex - 1);
+                    }
+                    else {
+                        previousPage();
+                    }
+                }, 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);
     }
-  }, [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);
-  // 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 content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper',
-    className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(Table_module.default.container, {
-      [Table_module.default.spaceBottom]: !hidePagination
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "table",
-    role: "table",
-    "aria-rowcount": rowCount
-  }, !hideHeader && (/*#__PURE__*/React.createElement("div", {
-    "data-test": "table-header-row-group",
-    role: "rowgroup",
-    className: headerClassName
-  }, tableInstance.getHeaderGroups().map(headerGroup => (/*#__PURE__*/React.createElement(components_Table_Row.HeaderRow, {
-    key: headerGroup.id,
-    role: "row",
-    ariaRowIndex: headerIndex,
-    style: components_Table_utils.getRowStyle({
-      totalSize: tableInstance.getTotalSize()
-    })
-  }, headerGroup.headers.map((header, i) => {
-    var _a, _b;
-    const canSort = header.column.getCanSort();
-    const isDraggable = columnsOrdering && header.id !== 'expander';
-    return /*#__PURE__*/React.createElement(components_Table_Header.Header, {
-      index: i,
-      colSpan: 1,
-      key: header.id,
-      role: "columnheader",
-      onDragStart: onDragStart,
-      style: components_Table_utils.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
-    }, /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedHeaderFooterRenderer, {
-      type: "header",
-      context: header.getContext()
-    }));
-  })))))), !overlayLoading && loading ? (/*#__PURE__*/React.createElement(components_Table_Row.Row, {
-    role: "row"
-  }, /*#__PURE__*/React.createElement(components_Table_Cell.Cell, {
-    role: "cell",
-    align: "center",
-    colSpan: columns.length,
-    "data-test": "table-loader-cell"
-  }, /*#__PURE__*/React.createElement(components_Loader.Loader, null)))) : hasData ? (/*#__PURE__*/React.createElement(HotKeys, {
-    keyName: "ctrl+c, command+c",
-    onKeyUp: onKeyUp
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "table-cell-row-group",
-    className: Table_module.default.hotKeys
-  }, /*#__PURE__*/React.createElement(components_Table_TableContent.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
-  })))) : (/*#__PURE__*/React.createElement("div", {
-    role: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "cell"
-  }, /*#__PURE__*/React.createElement(components_EmptyState.EmptyState, {
-    "data-test": "table-no-data",
-    className: Table_module.default.empty,
-    title: noDataTitle,
-    icon: reactFeather.AlertTriangle,
-    iconLabel: "Alert"
-  })))), hasFooter && (/*#__PURE__*/React.createElement("div", {
-    "data-test": "table-footer-row-group",
-    role: "rowgroup",
-    className: footerClassName
-  }, footerGroups.map(group => {
-    const {
-      id: footerGroupKey
-    } = group;
-    return (
-      /*#__PURE__*/
-      // Footer props getters do not provide role attributes
-      React.createElement(components_Table_Row.Row, {
-        key: footerGroupKey,
-        ariaRowIndex: rowCount,
-        style: components_Table_utils.getRowStyle({
-          totalSize: tableInstance.getTotalSize()
-        }),
-        role: "row"
-      }, group.headers.map(column => {
-        var _a;
-        const {
-          id: footerKey,
-          column: {
-            columnDef
-          }
-        } = column;
-        return (
-          /*#__PURE__*/
-          // Footer props getters do not provide role attributes
-          React.createElement(components_Table_Cell.Cell, {
-            key: footerKey,
-            colSpan: 1,
-            align: (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.align,
-            style: components_Table_utils.getCellStyle({
-              size: column.getSize(),
-              maxSize: columnDef.maxSize,
-              minSize: columnDef.minSize
-            }),
-            role: "cell"
-          }, /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedHeaderFooterRenderer, {
-            context: column.getContext(),
-            type: "footer"
-          }))
-        );
-      }))
-    );
-  }))))), !hidePagination && hasData && (/*#__PURE__*/React.createElement(components_Pagination.Pagination, {
-    pageCount: pageCount,
-    currentPage: pageIndex + 1,
-    canPreviousPage: getCanPreviousPage(),
-    canNextPage: getCanNextPage(),
-    goToPage: p => {
-      if (onPageChange) {
-        onPageChange(p - 1);
-      } else {
-        goToPage(p - 1);
-      }
-    },
-    nextPage: () => {
-      if (onPageChange) {
-        onPageChange(pageIndex + 1);
-      } else {
-        nextPage();
-      }
-    },
-    previousPage: () => {
-      if (onPageChange) {
-        onPageChange(pageIndex - 1);
-      } else {
-        previousPage();
-      }
-    },
-    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 && /*#__PURE__*/React.createElement(components_Table_features_columnsSelection_ContextMenu_ContextMenu.ContextMenu, {
-    anchorElement: contextMenuAnchorEl,
-    onCopy: onKeyUp
-  }));
-  if (children) {
-    return children(content);
-  }
-  return content;
+    return content;
 };
-
-exports.Table = Table;
-//# sourceMappingURL=Table.js.map
+//# sourceMappingURL=Table.js.map