@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
68 lines (67 loc) • 4.67 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingRows = LoadingRows;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const material_1 = 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(props) {
const { rowCount = 5, rowProps, cellProps, skeletonProps, containerSx, slots, slotProps, } = props;
const { table } = (0, data_table_context_1.useDataTableContext)();
const visibleColumns = table.getVisibleLeafColumns();
// Extract slot-specific props with enhanced merging
const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
// Merge all props for maximum flexibility
const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
sx: containerSx,
}, rowSlotProps, rowProps || {});
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, { ...mergedRowProps, 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;
// Determine skeleton type based on column meta or content
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';
const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
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'),
}),
},
}, cellSlotProps, cellProps || {});
const getSkeletonContent = () => {
if (isSelectionColumn) {
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 20, height: 20, animation: "wave", ...skeletonProps }));
}
if (isBooleanColumn) {
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 16, height: 16, animation: "wave", ...skeletonProps }));
}
if (isDateColumn) {
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave", ...skeletonProps }));
}
if (isNumberColumn) {
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave", ...skeletonProps }));
}
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave", ...skeletonProps }));
};
return ((0, jsx_runtime_1.jsx)(CellSlot, { ...mergedCellProps, children: getSkeletonContent() }, `skeleton-${column.id || colIndex}-${rowIndex}`));
}) }, `skeleton-row-${rowIndex}`))) }));
}