@cloudscape-design/components-themeable 3.0.1309 → 3.0.1311

package/lib/internal/template/table/internal.js

@@ -23,6 +23,8 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { isDevelopment } from '../internal/is-development';
 import InternalLiveRegion from '../live-region/internal';
 import { TableBodyCell } from './body-cell';
+import { TableColGroup } from './column-groups/col-group';
+import { useColumnGroups } from './column-groups/use-column-groups';
 import { checkColumnWidths } from './column-widths-utils';
 import { useExpandableTableProps } from './expandable-rows/expandable-rows-utils';
 import { NoDataCell } from './no-data-cell';
@@ -33,6 +35,7 @@ import { ResizeTracker } from './resizer';
 import { focusMarkers, useSelection, useSelectionFocusMove } from './selection';
 import { TableBodySelectionCell } from './selection/selection-cell';
 import { useGroupSelection } from './selection/use-group-selection';
+import { SkeletonRows } from './skeleton-rows';
 import { useStickyColumns } from './sticky-columns';
 import StickyHeader from './sticky-header';
 import { StickyScrollbar } from './sticky-scrollbar';
@@ -59,8 +62,8 @@ export const InternalTableAsSubstep = React.forwardRef((props, ref) => {
     };
     return React.createElement(InternalTable, { ...tableProps, ref: ref });
 });
-const InternalTable = React.forwardRef(({ header, footer, empty, filter, pagination, preferences, items, columnDefinitions, trackBy, loading, loadingText, selectionType: externalSelectionType, selectedItems, isItemDisabled, ariaLabels, onSelectionChange, onSortingChange, sortingColumn, sortingDescending, sortingDisabled, visibleColumns, stickyHeader, stickyHeaderVerticalOffset, onRowClick, onRowContextMenu, wrapLines, stripedRows, contentDensity, submitEdit, onEditCancel, resizableColumns, onColumnWidthsChange, variant, __internalRootRef, totalItemsCount, firstIndex, renderAriaLive, stickyColumns, columnDisplay, enableKeyboardNavigation, expandableRows: externalExpandableRows, getLoadingStatus, renderLoaderPending, renderLoaderLoading, renderLoaderError, renderLoaderEmpty, renderLoaderCounter, cellVerticalAlign, __funnelSubStepProps, ...rest }, ref) => {
-    var _a, _b, _c;
+const InternalTable = React.forwardRef(({ header, footer, empty, filter, pagination, preferences, items, columnDefinitions, groupDefinitions, trackBy, loading, loadingText, skeleton, selectionType: externalSelectionType, selectedItems, isItemDisabled, ariaLabels, onSelectionChange, onSortingChange, sortingColumn, sortingDescending, sortingDisabled, visibleColumns, stickyHeader, stickyHeaderVerticalOffset, onRowClick, onRowContextMenu, wrapLines, stripedRows, contentDensity, submitEdit, onEditCancel, resizableColumns, onColumnWidthsChange, variant, __internalRootRef, totalItemsCount, firstIndex, renderAriaLive, stickyColumns, columnDisplay, enableKeyboardNavigation, expandableRows: externalExpandableRows, getLoadingStatus, renderLoaderPending, renderLoaderLoading, renderLoaderError, renderLoaderEmpty, renderLoaderCounter, cellVerticalAlign, __funnelSubStepProps, ...rest }, ref) => {
+    var _a, _b, _c, _d, _e;
     // Keyboard navigation defaults to `true` for tables with expandable rows.
     if (externalExpandableRows && enableKeyboardNavigation === undefined) {
         enableKeyboardNavigation = true;
@@ -182,6 +185,8 @@ const InternalTable = React.forwardRef(({ header, footer, empty, filter, paginat
         columnDisplay,
         visibleColumns,
     });
+    const visibleColumnIds = visibleColumnDefinitions.map((col, idx) => getColumnKey(col, idx).toString());
+    const { groupColumnMap, ...columnGroupsLayout } = useColumnGroups(columnDefinitions, visibleColumnIds, groupDefinitions, columnDisplay);
     const selectionProps = {
         items: allItems,
         rootItems: items,
@@ -270,6 +275,8 @@ const InternalTable = React.forwardRef(({ header, footer, empty, filter, paginat
         selectionType,
         getSelectAllProps: selection.getSelectAllProps,
         columnDefinitions: visibleColumnDefinitions,
+        groupDefinitions,
+        columnGroupsLayout,
         variant: computedVariant,
         tableVariant: computedVariant,
         wrapLines,
@@ -291,6 +298,8 @@ const InternalTable = React.forwardRef(({ header, footer, empty, filter, paginat
         resizerTooltipText: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.resizerTooltipText,
         stripedRows,
         stickyState,
+        stickyColumnsFirst: (_d = stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.first) !== null && _d !== void 0 ? _d : 0,
+        stickyColumnsLast: (_e = stickyColumns === null || stickyColumns === void 0 ? void 0 : stickyColumns.last) !== null && _e !== void 0 ? _e : 0,
         selectionColumnId,
         tableRole,
         isExpandable,
@@ -319,15 +328,16 @@ const InternalTable = React.forwardRef(({ header, footer, empty, filter, paginat
     const toolsHeaderWrapper = useMergeRefs(toolsHeaderPerformanceMarkRef, toolsHeaderWrapperMeasureRef);
     const colIndexOffset = selectionType ? 1 : 0;
     const totalColumnsCount = visibleColumnDefinitions.length + colIndexOffset;
+    const headerRowCount = (columnGroupsLayout === null || columnGroupsLayout === void 0 ? void 0 : columnGroupsLayout.rows.length) || 1;
     return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
         React.createElement(TableComponentsContextProvider, { value: { paginationRef, filterRef, preferencesRef, headerRef } },
-            React.createElement(ColumnWidthsProvider, { visibleColumns: visibleColumnWidthsWithSelection, resizableColumns: resizableColumns, containerRef: wrapperMeasureRefObject },
+            React.createElement(ColumnWidthsProvider, { visibleColumns: visibleColumnWidthsWithSelection, resizableColumns: resizableColumns, containerRef: wrapperMeasureRefObject, groupColumnMap: groupColumnMap },
                 React.createElement(InternalContainer, { ...baseProps, ...tableInteractionAttributes, __internalRootRef: __internalRootRef, className: clsx(baseProps.className, styles.root), __funnelSubStepProps: __funnelSubStepProps, __fullPage: variant === 'full-page', header: React.createElement(React.Fragment, null,
                         hasHeader && (React.createElement("div", null,
                             React.createElement("div", { ref: toolsHeaderWrapper, className: clsx(styles['header-controls'], styles[`variant-${computedVariant}`]) },
                                 React.createElement(CollectionLabelContext.Provider, { value: { assignId: setHeaderRef } },
                                     React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences, setLastUserAction: setLastUserAction }))))),
-                        stickyHeader && (React.createElement(StickyHeader, { ref: stickyHeaderRef, variant: computedVariant, theadProps: theadProps, wrapperRef: wrapperRefObject, theadRef: theadRef, secondaryWrapperRef: secondaryWrapperRef, tableRef: tableRefObject, onScroll: handleScroll, tableHasHeader: hasHeader, contentDensity: contentDensity, tableRole: tableRole }))), disableHeaderPaddings: true, disableContentPaddings: true, disableFooterPaddings: true, variant: toContainerVariant(computedVariant), __disableFooterDivider: true, __disableStickyMobile: false, footer: hasFooter ? (React.createElement("div", { className: clsx(styles['footer-wrapper'], styles[`variant-${computedVariant}`]) },
+                        stickyHeader && (React.createElement(StickyHeader, { ref: stickyHeaderRef, variant: computedVariant, theadProps: theadProps, wrapperRef: wrapperRefObject, theadRef: theadRef, secondaryWrapperRef: secondaryWrapperRef, tableRef: tableRefObject, onScroll: handleScroll, tableHasHeader: hasHeader, contentDensity: contentDensity, tableRole: tableRole, hasGroupedColumns: !!columnGroupsLayout && columnGroupsLayout.rows.length > 1, columnDefinitions: visibleColumnDefinitions, hasSelection: hasSelection }))), disableHeaderPaddings: true, disableContentPaddings: true, disableFooterPaddings: true, variant: toContainerVariant(computedVariant), __disableFooterDivider: true, __disableStickyMobile: false, footer: hasFooter ? (React.createElement("div", { className: clsx(styles['footer-wrapper'], styles[`variant-${computedVariant}`]) },
                         React.createElement("div", { className: clsx(styles.footer, hasFooterPagination && styles['footer-with-pagination']) },
                             footer && React.createElement("span", null, footer),
                             hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination)))) : null, __stickyHeader: stickyHeader, __mobileStickyOffset: toolsHeaderHeight !== null && toolsHeaderHeight !== void 0 ? toolsHeaderHeight : 0, __stickyOffset: stickyHeaderVerticalOffset, ...focusMarkers.root },
@@ -344,113 +354,120 @@ const InternalTable = React.forwardRef(({ header, footer, empty, filter, paginat
                                 totalItemsCount,
                             })))),
                         React.createElement(GridNavigationProvider, { keyboardNavigation: !!enableKeyboardNavigation, pageSize: GRID_NAVIGATION_PAGE_SIZE, getTable: () => tableRefObject.current },
-                            React.createElement("table", { ...performanceMarkAttributes, ref: tableRef, className: clsx(styles.table, resizableColumns && styles['table-layout-fixed'], contentDensity === 'compact' && getVisualContextClassname('compact-table')), ...getTableRoleProps({
+                            React.createElement("table", { ...performanceMarkAttributes, ref: tableRef, className: clsx(styles.table, resizableColumns && styles['table-layout-fixed'], columnGroupsLayout && columnGroupsLayout.rows.length > 1 && styles['has-grouped-header'], contentDensity === 'compact' && getVisualContextClassname('compact-table')), ...getTableRoleProps({
                                     tableRole,
                                     totalItemsCount,
                                     totalColumnsCount: totalColumnsCount,
+                                    headerRowCount,
                                     ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tableLabel,
                                     ariaLabelledby,
                                 }) },
+                                resizableColumns && columnGroupsLayout && columnGroupsLayout.rows.length > 1 && (React.createElement(TableColGroup, { visibleColumnDefinitions: visibleColumnDefinitions, hasSelection: hasSelection })),
                                 React.createElement(Thead, { ref: theadRef, hidden: stickyHeader, onFocusedComponentChange: focusId => { var _a; return (_a = stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.setFocus(focusId); }, ...theadProps }),
-                                React.createElement("tbody", null, loading || allItems.length === 0 ? (React.createElement("tr", null,
-                                    React.createElement(NoDataCell, { totalColumnsCount: totalColumnsCount, hasFooter: hasFooter, loading: loading, loadingText: loadingText, empty: empty, tableRef: tableRefObject, containerRef: wrapperMeasureRefObject }))) : (allRows.map((row, rowIndex) => {
-                                    const isFirstRow = rowIndex === 0;
-                                    const isLastRow = rowIndex === allRows.length - 1;
-                                    const rowExpandableProps = row.type === 'data' ? expandableRows.getExpandableItemProps(row.item) : undefined;
-                                    const rowRoleProps = getTableRowRoleProps({
-                                        tableRole,
-                                        firstIndex,
-                                        rowIndex,
-                                        level: row.type === 'loader' ? row.level : undefined,
-                                        ...rowExpandableProps,
-                                    });
-                                    const getTableItemKey = (item) => getItemKey(trackBy, item, rowIndex);
-                                    const sharedCellProps = {
-                                        isFirstRow,
-                                        isLastRow,
-                                        isSelected: hasSelection && isRowSelected(row),
-                                        isPrevSelected: hasSelection && !isFirstRow && isRowSelected(allRows[rowIndex - 1]),
-                                        isNextSelected: hasSelection && !isLastRow && isRowSelected(allRows[rowIndex + 1]),
-                                        isEvenRow: rowIndex % 2 === 0,
-                                        stripedRows,
-                                        hasSelection,
-                                        hasFooter,
-                                        stickyState,
-                                        tableRole,
-                                    };
-                                    if (row.type === 'data') {
-                                        const rowId = `${getTableItemKey(row.item)}`;
-                                        return (React.createElement("tr", { key: rowId, className: clsx(styles.row, sharedCellProps.isSelected && styles['row-selected']), onFocus: ({ currentTarget }) => {
-                                                var _a;
-                                                // When an element inside table row receives focus we want to adjust the scroll.
-                                                // However, that behavior is unwanted when the focus is received as result of a click
-                                                // as it causes the click to never reach the target element.
-                                                if (!currentTarget.contains(getMouseDownTarget())) {
-                                                    (_a = stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.scrollToRow(currentTarget);
-                                                }
-                                            }, ...focusMarkers.item, onClick: onRowClickHandler && onRowClickHandler.bind(null, rowIndex, row.item), onContextMenu: onRowContextMenuHandler && onRowContextMenuHandler.bind(null, rowIndex, row.item), ...rowRoleProps },
-                                            selection.getItemSelectionProps && (React.createElement(TableBodySelectionCell, { ...sharedCellProps, columnId: selectionColumnId, selectionControlProps: {
-                                                    ...selection.getItemSelectionProps(row.item),
-                                                    onFocusDown: moveFocusDown,
-                                                    onFocusUp: moveFocusUp,
-                                                    rowIndex,
-                                                    itemKey: rowId,
-                                                }, verticalAlign: cellVerticalAlign, tableVariant: computedVariant })),
-                                            visibleColumnDefinitions.map((column, colIndex) => {
-                                                var _a, _b, _c;
-                                                const colId = `${getColumnKey(column, colIndex)}`;
-                                                const cellId = { row: rowId, col: colId };
-                                                const isEditing = cellEditing.checkEditing(cellId);
-                                                const successfulEdit = cellEditing.checkLastSuccessfulEdit(cellId);
-                                                const isEditable = !!column.editConfig && !cellEditing.isLoading;
-                                                const cellExpandableProps = isExpandable && colIndex === 0 ? rowExpandableProps : undefined;
-                                                const counter = (_a = column.counter) === null || _a === void 0 ? void 0 : _a.call(column, {
-                                                    item: row.item,
-                                                    itemsCount: rowExpandableProps === null || rowExpandableProps === void 0 ? void 0 : rowExpandableProps.itemsCount,
-                                                    selectedItemsCount: rowExpandableProps === null || rowExpandableProps === void 0 ? void 0 : rowExpandableProps.selectedItemsCount,
-                                                });
-                                                const analyticsMetadata = {
-                                                    component: {
-                                                        innerContext: {
-                                                            position: `${rowIndex + 1},${colIndex + 1}`,
-                                                            columnId: column.id ? `${column.id}` : '',
-                                                            columnLabel: {
-                                                                selector: `table thead tr th:nth-child(${colIndex + (selectionType ? 2 : 1)})`,
-                                                                root: 'component',
+                                React.createElement("tbody", null,
+                                    skeleton && allItems.length === 0 && loading ? (React.createElement(SkeletonRows, { count: skeleton.totalRows, hasDataRows: false, totalColumnsCount: totalColumnsCount, loadingText: loadingText, hasSelection: hasSelection, hasFooter: hasFooter, stickyState: stickyState, tableRole: tableRole, ariaLabels: ariaLabels, cellVerticalAlign: cellVerticalAlign, computedVariant: computedVariant, visibleColumnDefinitions: visibleColumnDefinitions, wrapLines: wrapLines, resizableColumns: resizableColumns, colIndexOffset: colIndexOffset })) : !skeleton && (loading || allItems.length === 0) ? (React.createElement("tr", null,
+                                        React.createElement(NoDataCell, { totalColumnsCount: totalColumnsCount, hasFooter: hasFooter, loading: loading, loadingText: loadingText, empty: empty, tableRef: tableRefObject, containerRef: wrapperMeasureRefObject }))) : (allRows.map((row, rowIndex) => {
+                                        const isFirstRow = rowIndex === 0;
+                                        const hasSkeletonBelow = loading && skeleton && allItems.length > 0 && skeleton.totalRows - allItems.length > 0;
+                                        const isLastDataRow = rowIndex === allRows.length - 1;
+                                        const isLastRow = isLastDataRow && !hasSkeletonBelow;
+                                        const rowExpandableProps = row.type === 'data' ? expandableRows.getExpandableItemProps(row.item) : undefined;
+                                        const rowRoleProps = getTableRowRoleProps({
+                                            tableRole,
+                                            firstIndex,
+                                            rowIndex,
+                                            headerRowCount,
+                                            level: row.type === 'loader' ? row.level : undefined,
+                                            ...rowExpandableProps,
+                                        });
+                                        const getTableItemKey = (item) => getItemKey(trackBy, item, rowIndex);
+                                        const sharedCellProps = {
+                                            isFirstRow,
+                                            isLastRow,
+                                            isSelected: hasSelection && isRowSelected(row),
+                                            isPrevSelected: hasSelection && !isFirstRow && isRowSelected(allRows[rowIndex - 1]),
+                                            isNextSelected: hasSelection && !isLastDataRow && isRowSelected(allRows[rowIndex + 1]),
+                                            isEvenRow: rowIndex % 2 === 0,
+                                            stripedRows,
+                                            hasSelection,
+                                            hasFooter,
+                                            stickyState,
+                                            tableRole,
+                                        };
+                                        if (row.type === 'data') {
+                                            const rowId = `${getTableItemKey(row.item)}`;
+                                            return (React.createElement("tr", { key: rowId, className: clsx(styles.row, sharedCellProps.isSelected && styles['row-selected']), onFocus: ({ currentTarget }) => {
+                                                    var _a;
+                                                    // When an element inside table row receives focus we want to adjust the scroll.
+                                                    // However, that behavior is unwanted when the focus is received as result of a click
+                                                    // as it causes the click to never reach the target element.
+                                                    if (!currentTarget.contains(getMouseDownTarget())) {
+                                                        (_a = stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.scrollToRow(currentTarget);
+                                                    }
+                                                }, ...focusMarkers.item, onClick: onRowClickHandler && onRowClickHandler.bind(null, rowIndex, row.item), onContextMenu: onRowContextMenuHandler && onRowContextMenuHandler.bind(null, rowIndex, row.item), ...rowRoleProps },
+                                                selection.getItemSelectionProps && (React.createElement(TableBodySelectionCell, { ...sharedCellProps, columnId: selectionColumnId, selectionControlProps: {
+                                                        ...selection.getItemSelectionProps(row.item),
+                                                        onFocusDown: moveFocusDown,
+                                                        onFocusUp: moveFocusUp,
+                                                        rowIndex,
+                                                        itemKey: rowId,
+                                                    }, verticalAlign: cellVerticalAlign, tableVariant: computedVariant })),
+                                                visibleColumnDefinitions.map((column, colIndex) => {
+                                                    var _a, _b, _c;
+                                                    const colId = `${getColumnKey(column, colIndex)}`;
+                                                    const cellId = { row: rowId, col: colId };
+                                                    const isEditing = cellEditing.checkEditing(cellId);
+                                                    const successfulEdit = cellEditing.checkLastSuccessfulEdit(cellId);
+                                                    const isEditable = !!column.editConfig && !cellEditing.isLoading;
+                                                    const cellExpandableProps = isExpandable && colIndex === 0 ? rowExpandableProps : undefined;
+                                                    const counter = (_a = column.counter) === null || _a === void 0 ? void 0 : _a.call(column, {
+                                                        item: row.item,
+                                                        itemsCount: rowExpandableProps === null || rowExpandableProps === void 0 ? void 0 : rowExpandableProps.itemsCount,
+                                                        selectedItemsCount: rowExpandableProps === null || rowExpandableProps === void 0 ? void 0 : rowExpandableProps.selectedItemsCount,
+                                                    });
+                                                    const analyticsMetadata = {
+                                                        component: {
+                                                            innerContext: {
+                                                                position: `${rowIndex + 1},${colIndex + 1}`,
+                                                                columnId: column.id ? `${column.id}` : '',
+                                                                columnLabel: {
+                                                                    selector: `table thead tr th:nth-child(${colIndex + (selectionType ? 2 : 1)})`,
+                                                                    root: 'component',
+                                                                },
+                                                                item: rowId,
                                                             },
-                                                            item: rowId,
                                                         },
-                                                    },
-                                                };
-                                                return (React.createElement(TableBodyCell, { key: colId, ...sharedCellProps, resizableStyle: {
-                                                        width: column.width,
-                                                        minWidth: column.minWidth,
-                                                        maxWidth: column.maxWidth,
-                                                    }, ariaLabels: ariaLabels, column: column, item: row.item, wrapLines: wrapLines, isEditable: isEditable, isEditing: isEditing, isRowHeader: column.isRowHeader, successfulEdit: successfulEdit, resizableColumns: resizableColumns, onEditStart: () => cellEditing.startEdit(cellId), onEditEnd: editCancelled => cellEditing.completeEdit(cellId, editCancelled), submitEdit: cellEditing.submitEdit, columnId: (_b = column.id) !== null && _b !== void 0 ? _b : colIndex, colIndex: colIndex + colIndexOffset, verticalAlign: (_c = column.verticalAlign) !== null && _c !== void 0 ? _c : cellVerticalAlign, tableVariant: computedVariant, counter: counter, ...cellExpandableProps, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
-                                            })));
-                                    }
-                                    const loaderSelectionProps = selection.getLoaderSelectionProps && selection.getLoaderSelectionProps(row.item);
-                                    const rowSelection = selectionType === 'group' ? loaderSelectionProps : undefined;
-                                    const loaderContent = getLoaderContent({
-                                        item: row.item,
-                                        loadingStatus: row.status,
-                                        renderLoaderPending,
-                                        renderLoaderLoading,
-                                        renderLoaderError,
-                                        renderLoaderEmpty,
-                                    });
-                                    const loaderCounter = renderLoaderCounter === null || renderLoaderCounter === void 0 ? void 0 : renderLoaderCounter({
-                                        item: row.item,
-                                        loadingStatus: row.status,
-                                        selected: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.checked),
-                                    });
-                                    return (loaderContent && (React.createElement("tr", { key: (row.item ? getTableItemKey(row.item) : 'root-' + rowIndex) + '-' + row.from, className: styles.row, ...rowRoleProps },
-                                        selectionType ? (React.createElement(TableBodySelectionCell, { ...sharedCellProps, columnId: selectionColumnId, verticalAlign: cellVerticalAlign, tableVariant: computedVariant, selectionControlProps: selectionType === 'group' ? loaderSelectionProps : undefined, isSelected: selectionType === 'group' && !!(loaderSelectionProps === null || loaderSelectionProps === void 0 ? void 0 : loaderSelectionProps.checked) })) : null,
-                                        visibleColumnDefinitions.map((column, colIndex) => {
-                                            var _a;
-                                            return (React.createElement(TableLoaderCell, { key: getColumnKey(column, colIndex), ...sharedCellProps, wrapLines: false, columnId: (_a = column.id) !== null && _a !== void 0 ? _a : colIndex, colIndex: colIndex + colIndexOffset, isSelected: selectionType === 'group' && !!(loaderSelectionProps === null || loaderSelectionProps === void 0 ? void 0 : loaderSelectionProps.checked), isRowHeader: colIndex === 0, level: row.level, item: row.item, trackBy: trackBy, counter: loaderCounter }, loaderContent));
-                                        }))));
-                                }))))),
+                                                    };
+                                                    return (React.createElement(TableBodyCell, { key: colId, ...sharedCellProps, resizableStyle: {
+                                                            width: column.width,
+                                                            minWidth: column.minWidth,
+                                                            maxWidth: column.maxWidth,
+                                                        }, ariaLabels: ariaLabels, column: column, item: row.item, wrapLines: wrapLines, isEditable: isEditable, isEditing: isEditing, isRowHeader: column.isRowHeader, successfulEdit: successfulEdit, resizableColumns: resizableColumns, onEditStart: () => cellEditing.startEdit(cellId), onEditEnd: editCancelled => cellEditing.completeEdit(cellId, editCancelled), submitEdit: cellEditing.submitEdit, columnId: (_b = column.id) !== null && _b !== void 0 ? _b : colIndex, colIndex: colIndex + colIndexOffset, verticalAlign: (_c = column.verticalAlign) !== null && _c !== void 0 ? _c : cellVerticalAlign, tableVariant: computedVariant, counter: counter, ...cellExpandableProps, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
+                                                })));
+                                        }
+                                        const loaderSelectionProps = selection.getLoaderSelectionProps && selection.getLoaderSelectionProps(row.item);
+                                        const rowSelection = selectionType === 'group' ? loaderSelectionProps : undefined;
+                                        const loaderContent = getLoaderContent({
+                                            item: row.item,
+                                            loadingStatus: row.status,
+                                            renderLoaderPending,
+                                            renderLoaderLoading,
+                                            renderLoaderError,
+                                            renderLoaderEmpty,
+                                        });
+                                        const loaderCounter = renderLoaderCounter === null || renderLoaderCounter === void 0 ? void 0 : renderLoaderCounter({
+                                            item: row.item,
+                                            loadingStatus: row.status,
+                                            selected: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.checked),
+                                        });
+                                        return (loaderContent && (React.createElement("tr", { key: (row.item ? getTableItemKey(row.item) : 'root-' + rowIndex) + '-' + row.from, className: styles.row, ...rowRoleProps },
+                                            selectionType ? (React.createElement(TableBodySelectionCell, { ...sharedCellProps, columnId: selectionColumnId, verticalAlign: cellVerticalAlign, tableVariant: computedVariant, selectionControlProps: selectionType === 'group' ? loaderSelectionProps : undefined, isSelected: selectionType === 'group' && !!(loaderSelectionProps === null || loaderSelectionProps === void 0 ? void 0 : loaderSelectionProps.checked) })) : null,
+                                            visibleColumnDefinitions.map((column, colIndex) => {
+                                                var _a;
+                                                return (React.createElement(TableLoaderCell, { key: getColumnKey(column, colIndex), ...sharedCellProps, wrapLines: false, columnId: (_a = column.id) !== null && _a !== void 0 ? _a : colIndex, colIndex: colIndex + colIndexOffset, isSelected: selectionType === 'group' && !!(loaderSelectionProps === null || loaderSelectionProps === void 0 ? void 0 : loaderSelectionProps.checked), isRowHeader: colIndex === 0, level: row.level, item: row.item, trackBy: trackBy, counter: loaderCounter }, loaderContent));
+                                            }))));
+                                    })),
+                                    loading && skeleton && allItems.length > 0 && skeleton.totalRows - allItems.length > 0 && (React.createElement(SkeletonRows, { count: skeleton.totalRows - allItems.length, hasDataRows: true, totalColumnsCount: totalColumnsCount, loadingText: loadingText, hasSelection: hasSelection, hasFooter: hasFooter, stickyState: stickyState, tableRole: tableRole, ariaLabels: ariaLabels, cellVerticalAlign: cellVerticalAlign, computedVariant: computedVariant, visibleColumnDefinitions: visibleColumnDefinitions, wrapLines: wrapLines, resizableColumns: resizableColumns, colIndexOffset: colIndexOffset }))))),
                         resizableColumns && React.createElement(ResizeTracker, null)),
                     React.createElement(StickyScrollbar, { ref: scrollbarRef, wrapperRef: wrapperRefObject, tableRef: tableRefObject, onScroll: handleScroll, hasStickyColumns: hasStickyColumns }))))));
 });