@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/Table/Table.d.ts

@@ -220,30 +220,25 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
  * const columns = React.useMemo(() => [
- *  {
- *    Header: 'Header name',
- *    columns: [
- *      {
- *        id: 'name',
- *        Header: 'Name',
- *        accessor: 'name',
- *        width: 90,
- *      },
- *      {
- *        id: 'description',
- *        Header: 'description',
- *        accessor: 'description',
- *        maxWidth: 200,
- *      },
- *      {
- *        id: 'view',
- *        Header: 'view',
- *        Cell: () => {
- *          return <span onClick={onViewClick}>View</span>
- *        },
- *      },
- *    ],
- *  },
+ *   {
+ *     id: 'name',
+ *     Header: 'Name',
+ *     accessor: 'name',
+ *     width: 90,
+ *   },
+ *   {
+ *     id: 'description',
+ *     Header: 'description',
+ *     accessor: 'description',
+ *     maxWidth: 200,
+ *   },
+ *   {
+ *     id: 'view',
+ *     Header: 'view',
+ *     Cell: () => {
+ *       return <span onClick={onViewClick}>View</span>
+ *     },
+ *   },
  * ], [onViewClick])
  * const data = [
  *  { name: 'Name1', description: 'Description1' },

package/cjs/core/Table/Table.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,30 +8,30 @@ exports.Table = exports.tableResizeStartAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var react_table_1 = require("react-table");
-var ProgressIndicators_1 = require("../ProgressIndicators");
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_table_1 = require("react-table");
+const ProgressIndicators_1 = require("../ProgressIndicators");
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/table.css");
-var utils_2 = require("./utils");
-var TableRowMemoized_1 = require("./TableRowMemoized");
-var filters_1 = require("./filters");
-var customFilterFunctions_1 = require("./filters/customFilterFunctions");
-var hooks_1 = require("./hooks");
-var actionHandlers_1 = require("./actionHandlers");
-var VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
-var columns_1 = require("./columns");
-var singleRowSelectedAction = 'singleRowSelected';
-var shiftRowSelectedAction = 'shiftRowSelected';
+const utils_2 = require("./utils");
+const TableRowMemoized_1 = require("./TableRowMemoized");
+const filters_1 = require("./filters");
+const customFilterFunctions_1 = require("./filters/customFilterFunctions");
+const hooks_1 = require("./hooks");
+const actionHandlers_1 = require("./actionHandlers");
+const VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
+const columns_1 = require("./columns");
+const singleRowSelectedAction = 'singleRowSelected';
+const shiftRowSelectedAction = 'shiftRowSelected';
 exports.tableResizeStartAction = 'tableResizeStart';
-var tableResizeEndAction = 'tableResizeEnd';
-var flattenColumns = function (columns) {
-    var flatColumns = [];
-    columns.forEach(function (column) {
+const tableResizeEndAction = 'tableResizeEnd';
+const flattenColumns = (columns) => {
+    const flatColumns = [];
+    columns.forEach((column) => {
         flatColumns.push(column);
         if (column.columns) {
-            flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
+            flatColumns.push(...flattenColumns(column.columns));
         }
     });
     return flatColumns;
@@ -62,30 +40,25 @@ var flattenColumns = function (columns) {
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
  * const columns = React.useMemo(() => [
- *  {
- *    Header: 'Header name',
- *    columns: [
- *      {
- *        id: 'name',
- *        Header: 'Name',
- *        accessor: 'name',
- *        width: 90,
- *      },
- *      {
- *        id: 'description',
- *        Header: 'description',
- *        accessor: 'description',
- *        maxWidth: 200,
- *      },
- *      {
- *        id: 'view',
- *        Header: 'view',
- *        Cell: () => {
- *          return <span onClick={onViewClick}>View</span>
- *        },
- *      },
- *    ],
- *  },
+ *   {
+ *     id: 'name',
+ *     Header: 'Name',
+ *     accessor: 'name',
+ *     width: 90,
+ *   },
+ *   {
+ *     id: 'description',
+ *     Header: 'description',
+ *     accessor: 'description',
+ *     maxWidth: 200,
+ *   },
+ *   {
+ *     id: 'view',
+ *     Header: 'view',
+ *     Cell: () => {
+ *       return <span onClick={onViewClick}>View</span>
+ *     },
+ *   },
  * ], [onViewClick])
  * const data = [
  *  { name: 'Name1', description: 'Description1' },
@@ -100,46 +73,46 @@ var flattenColumns = function (columns) {
  *   isSortable={true}
  * />
  */
-var Table = function (props) {
-    var data = props.data, columns = props.columns, _a = props.isLoading, isLoading = _a === void 0 ? false : _a, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _b = props.isSelectable, isSelectable = _b === void 0 ? false : _b, onSelect = props.onSelect, onRowClick = props.onRowClick, _c = props.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.columnResizeMode, columnResizeMode = _l === void 0 ? 'fit' : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
+const Table = (props) => {
+    const { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var ownerDocument = react_1.default.useRef();
-    var defaultColumn = react_1.default.useMemo(function () { return ({
+    const ownerDocument = react_1.default.useRef();
+    const defaultColumn = react_1.default.useMemo(() => ({
         maxWidth: 0,
         minWidth: 0,
         width: 0,
-    }); }, []);
+    }), []);
     // useRef prevents from rerendering when one of these callbacks changes
-    var onBottomReachedRef = react_1.default.useRef(onBottomReached);
-    var onRowInViewportRef = react_1.default.useRef(onRowInViewport);
-    react_1.default.useEffect(function () {
+    const onBottomReachedRef = react_1.default.useRef(onBottomReached);
+    const onRowInViewportRef = react_1.default.useRef(onRowInViewport);
+    react_1.default.useEffect(() => {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
-    var hasManualSelectionColumn = react_1.default.useMemo(function () {
-        var flatColumns = flattenColumns(columns);
-        return flatColumns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
+    const hasManualSelectionColumn = react_1.default.useMemo(() => {
+        const flatColumns = flattenColumns(columns);
+        return flatColumns.some((column) => column.id === columns_1.SELECTION_CELL_ID);
     }, [columns]);
-    var disableUserSelect = react_1.default.useCallback(function (e) {
+    const disableUserSelect = react_1.default.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = 'none');
         }
     }, []);
-    var enableUserSelect = react_1.default.useCallback(function (e) {
+    const enableUserSelect = react_1.default.useCallback((e) => {
         if (e.key === 'Shift') {
             ownerDocument.current &&
                 (ownerDocument.current.documentElement.style.userSelect = '');
         }
     }, []);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (!isSelectable || selectionMode !== 'multi') {
             return;
         }
-        var ownerDoc = ownerDocument.current;
+        const ownerDoc = ownerDocument.current;
         ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
         ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
-        return function () {
+        return () => {
             ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
             ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
         };
@@ -150,7 +123,7 @@ var Table = function (props) {
         disableUserSelect,
         enableUserSelect,
     ]);
-    var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
+    const tableStateReducer = react_1.default.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
@@ -205,30 +178,37 @@ var Table = function (props) {
         onSort,
         stateReducer,
     ]);
-    var filterTypes = react_1.default.useMemo(function () { return (__assign(__assign({}, customFilterFunctions_1.customFilterFunctions), filterFunctions)); }, [filterFunctions]);
-    var hasAnySubRows = react_1.default.useMemo(function () {
-        return data.some(function (item, index) {
-            return getSubRows ? getSubRows(item, index) : item.subRows;
-        });
+    const filterTypes = react_1.default.useMemo(() => ({ ...customFilterFunctions_1.customFilterFunctions, ...filterFunctions }), [filterFunctions]);
+    const hasAnySubRows = react_1.default.useMemo(() => {
+        return data.some((item, index) => getSubRows ? getSubRows(item, index) : item.subRows);
     }, [data, getSubRows]);
-    var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState), columnResizeMode: columnResizeMode }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
-    var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders, visibleColumns = instance.visibleColumns, setGlobalFilter = instance.setGlobalFilter;
-    var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
-        var key = _a[0], value = _a[1];
+    const instance = (0, react_table_1.useTable)({
+        manualPagination: !paginatorRenderer,
+        paginateExpandedRows: false,
+        ...props,
+        columns,
+        defaultColumn,
+        disableSortBy: !isSortable,
+        stateReducer: tableStateReducer,
+        filterTypes,
+        selectSubRows,
+        data,
+        getSubRows,
+        initialState: { pageSize, ...props.initialState },
+        columnResizeMode,
+    }, react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
+    const { getTableProps, rows, headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
+    const ariaDataAttributes = Object.entries(rest).reduce((result, [key, value]) => {
         if (key.startsWith('data-') || key.startsWith('aria-')) {
             result[key] = value;
         }
         return result;
     }, {});
-    var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; }) || !!globalFilterValue;
-    var showFilterButton = function (column) {
-        return (data.length !== 0 || areFiltersSet) && column.canFilter;
-    };
-    var showSortButton = function (column) {
-        return data.length !== 0 && column.canSort;
-    };
-    var onRowClickHandler = react_1.default.useCallback(function (event, row) {
-        var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+    const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
+    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter;
+    const showSortButton = (column) => data.length !== 0 && column.canSort;
+    const onRowClickHandler = react_1.default.useCallback((event, row) => {
+        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
             onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
         }
@@ -261,22 +241,22 @@ var Table = function (props) {
         dispatch,
         onRowClick,
     ]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         setGlobalFilter(globalFilterValue);
     }, [globalFilterValue, setGlobalFilter]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
-    var paginatorRendererProps = react_1.default.useMemo(function () { return ({
+    const paginatorRendererProps = react_1.default.useMemo(() => ({
         currentPage: state.pageIndex,
         pageSize: state.pageSize,
         totalRowsCount: rows.length,
         size: density !== 'default' ? 'small' : 'default',
-        isLoading: isLoading,
+        isLoading,
         onPageChange: gotoPage,
         onPageSizeChange: setPageSize,
         totalSelectedRowsCount: selectionMode === 'single' ? 0 : instance.selectedFlatRows.length, // 0 when selectionMode = 'single' since totalSelectedRowCount is for multi-selection mode only
-    }); }, [
+    }), [
         density,
         gotoPage,
         isLoading,
@@ -287,18 +267,17 @@ var Table = function (props) {
         instance.selectedFlatRows,
         selectionMode,
     ]);
-    var _q = (0, hooks_1.useScrollToRow)(__assign(__assign({}, props), { page: page })), scrollToIndex = _q.scrollToIndex, tableRowRef = _q.tableRowRef;
-    var columnRefs = react_1.default.useRef({});
-    var previousTableWidth = react_1.default.useRef(0);
-    var onTableResize = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
+    const { scrollToIndex, tableRowRef } = (0, hooks_1.useScrollToRow)({ ...props, page });
+    const columnRefs = react_1.default.useRef({});
+    const previousTableWidth = react_1.default.useRef(0);
+    const onTableResize = react_1.default.useCallback(({ width }) => {
         instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
         }
         previousTableWidth.current = width;
         // Update column widths when table was resized
-        flatHeaders.forEach(function (header) {
+        flatHeaders.forEach((header) => {
             if (columnRefs.current[header.id]) {
                 header.resizeWidth =
                     columnRefs.current[header.id].getBoundingClientRect().width;
@@ -310,24 +289,24 @@ var Table = function (props) {
         }
         dispatch({ type: exports.tableResizeStartAction });
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
-    var resizeRef = (0, utils_1.useResizeObserver)(onTableResize)[0];
+    const [resizeRef] = (0, utils_1.useResizeObserver)(onTableResize);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         if (state.isTableResizing) {
-            var newColumnWidths_1 = {};
-            flatHeaders.forEach(function (column) {
+            const newColumnWidths = {};
+            flatHeaders.forEach((column) => {
                 if (columnRefs.current[column.id]) {
-                    newColumnWidths_1[column.id] =
+                    newColumnWidths[column.id] =
                         columnRefs.current[column.id].getBoundingClientRect().width;
                 }
             });
-            dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths_1 });
+            dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
         }
     });
-    var headerRef = react_1.default.useRef(null);
-    var bodyRef = react_1.default.useRef(null);
-    var getPreparedRow = react_1.default.useCallback(function (index) {
-        var row = page[index];
+    const headerRef = react_1.default.useRef(null);
+    const bodyRef = react_1.default.useRef(null);
+    const getPreparedRow = react_1.default.useCallback((index) => {
+        const row = page[index];
         prepareRow(row);
         return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
     }, [
@@ -345,9 +324,9 @@ var Table = function (props) {
         enableVirtualization,
         tableRowRef,
     ]);
-    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
-    var updateStickyState = function () {
-        if (!bodyRef.current || flatHeaders.every(function (header) { return !header.sticky; })) {
+    const virtualizedItemRenderer = react_1.default.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
+    const updateStickyState = () => {
+        if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
             return;
         }
         if (bodyRef.current.scrollLeft !== 0) {
@@ -365,89 +344,104 @@ var Table = function (props) {
             dispatch({ type: react_table_1.actions.setScrolledLeft, value: false });
         }
     };
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         updateStickyState();
         // Call only on init
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var isHeaderDirectClick = react_1.default.useRef(false);
+    const isHeaderDirectClick = react_1.default.useRef(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ ref: function (element) {
+        react_1.default.createElement("div", { ref: (element) => {
                 ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
-            }, id: id }, getTableProps({
-            className: (0, classnames_1.default)('iui-table', className),
-            style: __assign({ minWidth: 0 }, style),
-        }), { "data-iui-size": density === 'default' ? undefined : density }, ariaDataAttributes),
-            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
-                    if (headerRef.current && bodyRef.current) {
-                        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
-                        updateStickyState();
-                    }
-                } },
-                react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
-                    var headerGroupProps = headerGroup.getHeaderGroupProps({
-                        className: 'iui-table-row',
-                    });
-                    return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                        var _a = column.getSortByToggleProps(), onClick = _a.onClick, restSortProps = __rest(_a, ["onClick"]);
-                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: (0, classnames_1.default)('iui-table-cell', {
-                                'iui-actionable': column.canSort,
-                                'iui-sorted': column.isSorted,
-                                'iui-table-cell-sticky': !!column.sticky,
-                            }, column.columnClassName), style: __assign(__assign(__assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)), (0, utils_2.getStickyStyle)(column, visibleColumns)), { flexWrap: 'unset' }) }));
-                        return (react_1.default.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
-                                if (el) {
-                                    columnRefs.current[column.id] = el;
-                                    column.resizeWidth =
-                                        el.getBoundingClientRect().width;
-                                }
-                            }, onMouseDown: function () {
-                                isHeaderDirectClick.current = true;
-                            }, onClick: function (e) {
-                                // Prevents from triggering sort when resizing and mouse is released in the middle of header
-                                if (isHeaderDirectClick.current) {
-                                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                                    isHeaderDirectClick.current = false;
-                                }
-                            }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: function (e) {
-                                if (e.key == 'Enter' && showSortButton(column)) {
-                                    column.toggleSortBy();
-                                }
-                            } }),
-                            column.render('Header'),
-                            (showFilterButton(column) ||
-                                showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
-                                showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column })),
-                                showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(utils_1.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
-                            isResizable &&
-                                column.isResizerVisible &&
-                                (index !== headerGroup.headers.length - 1 ||
-                                    columnResizeMode === 'expand') && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-table-resizer' }),
-                                react_1.default.createElement("div", { className: 'iui-table-resizer-bar' }))),
-                            enableColumnReordering &&
-                                !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-table-reorder-bar' })),
-                            column.sticky === 'left' &&
-                                state.sticky.isScrolledToRight && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-right' })),
-                            column.sticky === 'right' &&
-                                state.sticky.isScrolledToLeft && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
-                    })));
-                }))),
-            react_1.default.createElement("div", __assign({}, getTableBodyProps({
-                className: (0, classnames_1.default)('iui-table-body', {
-                    'iui-zebra-striping': styleType === 'zebra-rows',
-                }),
-                style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }, id: id, ...getTableProps({
+                className: (0, classnames_1.default)('iui-table', className),
+                style: {
+                    minWidth: 0,
+                    ...style,
+                },
+            }), "data-iui-size": density === 'default' ? undefined : density, ...ariaDataAttributes },
+            headerGroups.map((headerGroup) => {
+                // There may be a better solution for this, but for now I'm filtering out the placeholder cells using header.id
+                headerGroup.headers = headerGroup.headers.filter((header) => !header.id.includes('iui-table-checkbox-selector_placeholder') &&
+                    !header.id.includes('iui-table-expander_placeholder'));
+                const headerGroupProps = headerGroup.getHeaderGroupProps({
+                    className: 'iui-table-row',
+                });
+                return (react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
+                        if (headerRef.current && bodyRef.current) {
+                            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+                            updateStickyState();
+                        }
+                    }, key: headerGroupProps.key },
+                    react_1.default.createElement("div", { className: 'iui-table-header' },
+                        react_1.default.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
+                            const { onClick, ...restSortProps } = column.getSortByToggleProps();
+                            const columnProps = column.getHeaderProps({
+                                ...restSortProps,
+                                className: (0, classnames_1.default)('iui-table-cell', {
+                                    'iui-actionable': column.canSort,
+                                    'iui-sorted': column.isSorted,
+                                    'iui-table-cell-sticky': !!column.sticky,
+                                }, column.columnClassName),
+                                style: {
+                                    ...(0, utils_2.getCellStyle)(column, !!state.isTableResizing),
+                                    ...(0, utils_2.getStickyStyle)(column, visibleColumns),
+                                    flexWrap: 'unset',
+                                },
+                            });
+                            return (react_1.default.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                                    if (el) {
+                                        columnRefs.current[column.id] = el;
+                                        column.resizeWidth =
+                                            el.getBoundingClientRect().width;
+                                    }
+                                }, onMouseDown: () => {
+                                    isHeaderDirectClick.current = true;
+                                }, onClick: (e) => {
+                                    // Prevents from triggering sort when resizing and mouse is released in the middle of header
+                                    if (isHeaderDirectClick.current) {
+                                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                        isHeaderDirectClick.current = false;
+                                    }
+                                }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
+                                    if (e.key == 'Enter' && showSortButton(column)) {
+                                        column.toggleSortBy();
+                                    }
+                                } },
+                                column.render('Header'),
+                                (showFilterButton(column) ||
+                                    showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column })),
+                                    showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                        (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(utils_1.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
+                                isResizable &&
+                                    column.isResizerVisible &&
+                                    (index !== headerGroup.headers.length - 1 ||
+                                        columnResizeMode === 'expand') && (react_1.default.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    react_1.default.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                enableColumnReordering &&
+                                    !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                column.sticky === 'left' &&
+                                    state.sticky.isScrolledToRight && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                column.sticky === 'right' &&
+                                    state.sticky.isScrolledToLeft && (react_1.default.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                        })))));
+            }),
+            react_1.default.createElement("div", { ...getTableBodyProps({
+                    className: (0, classnames_1.default)('iui-table-body', {
+                        'iui-zebra-striping': styleType === 'zebra-rows',
+                    }),
+                    style: { outline: 0 },
+                }), ref: bodyRef, onScroll: () => {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
-                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined }),
-                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
+                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
+                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-table-row' },