@dbcdk/react-components 0.0.43 → 0.0.44

package/dist/components/table/Table.js

@@ -17,7 +17,7 @@ export function Table({ data, dataKey, columns, selectedRows, selectionMode = 's
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
+    const paginationEl = onPageChange && (loading || data.length > 0) ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
     const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {

package/dist/components/table/components/TableLoadingBody.js

@@ -2,9 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
+function getColumnWidth(column) {
+    // If column.width is defined and less than 150px, use 100%
+    if (typeof column.width === 'number' && column.width < 150) {
+        return '100%';
+    }
+    if (typeof column.width === 'string' && column.width.endsWith('px')) {
+        const px = parseInt(column.width, 10);
+        if (!isNaN(px) && px < 150) {
+            return '100%';
+        }
+    }
+    // Otherwise, random between 50% and 90%
+    const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+    return `${percent}%`;
+}
 export function TableLoadingBody({ rows, columns, hasSelection }) {
-    return (_jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: styles.row, children: [hasSelection ? _jsx("td", { className: cx(styles.cell, styles.selectionCell) }) : null, columns.map(column => {
+    const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
+    return (_jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: styles.row, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), children: _jsx("div", { className: styles.cellContent, children: _jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) })) : null, columns.map((column, columnIndex) => {
                     var _a;
-                    return (_jsx("td", { className: cx(styles.cell, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) }) }, column.id));
+                    return (_jsx("td", { className: cx(styles.cell, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) }) }, column.id));
                 })] }, `loading-row-${rowIndex}`))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",