@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
50 lines (49 loc) • 3.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingRows = LoadingRows;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const material_2 = require("@mui/material");
const data_table_context_1 = require("../../contexts/data-table-context");
const utils_1 = require("../../utils");
const slot_helpers_1 = require("../../utils/slot-helpers");
function LoadingRows({ rowCount = 5, slots, slotProps, }) {
const { table } = (0, data_table_context_1.useDataTableContext)();
const visibleColumns = table.getVisibleLeafColumns();
const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.row, { children: visibleColumns.map((column, colIndex) => {
var _a;
const isPinned = column.getIsPinned();
const pinnedPosition = isPinned ? column.getStart('left') : undefined;
const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
const columnMeta = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.meta;
const isDateColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'date';
const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
const isSelectionColumn = column.id === 'select';
return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ sx: (0, utils_1.getPinnedColumnStyle)({
width: column.getSize() || 'auto',
isPinned,
pinnedPosition,
pinnedRightPosition,
zIndex: isPinned ? 9 : 1,
isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
}) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (() => {
if (isSelectionColumn) {
return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "rectangular", width: 20, height: 20 }));
}
if (isBooleanColumn) {
return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "circular", width: 20, height: 20 }));
}
if (isDateColumn) {
return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave" }));
}
if (isNumberColumn) {
return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave" }));
}
return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }));
})() }), `skeleton-${column.id || colIndex}-${rowIndex}`));
}) }), `skeleton-row-${rowIndex}`))) }));
}