@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
32 lines (31 loc) • 2.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableRow = DataTableRow;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_table_1 = require("@tanstack/react-table");
const utils_1 = require("../../utils");
const slot_helpers_1 = require("../../utils/slot-helpers");
function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, slots, slotProps, }) {
const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, { hover: enableHover, sx: {
backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent',
}, children: row.getVisibleCells().map(cell => {
const isPinned = cell.column.getIsPinned();
const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
width: cell.column.getSize() || 'auto',
isPinned,
pinnedPosition,
pinnedRightPosition,
zIndex: isPinned ? 9 : 1,
disableStickyHeader,
isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
})) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
}) }), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, { children: (0, jsx_runtime_1.jsx)(CellSlot, { colSpan: row.getVisibleCells().length + 1, sx: { py: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
}