@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
49 lines (48 loc) • 3.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableHeader = TableHeader;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const draggable_header_1 = require("./draggable-header");
const data_table_context_1 = require("../../contexts/data-table-context");
const utils_1 = require("../../utils");
const slot_helpers_1 = require("../../utils/slot-helpers");
function TableHeader({ draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, slots, slotProps, }) {
const theme = (0, material_1.useTheme)();
const { table } = (0, data_table_context_1.useDataTableContext)();
const HeaderCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerCell', material_1.TableCell);
const HeaderRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerRow', material_1.TableRow);
const HeaderSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'header', material_1.TableHead);
const renderHeaderCell = (header) => {
const isPinned = header.column.getIsPinned();
const pinnedPosition = isPinned ? header.column.getStart('left') : undefined;
const pinnedRightPosition = isPinned === 'right' ? header.column.getAfter('right') : undefined;
const alignment = (0, utils_1.getColumnAlignment)(header.column.columnDef);
const enableSorting = header.column.getCanSort();
return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
isPinned,
pinnedPosition,
isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
isFirstRightPinnedColumn: isPinned === 'right' && header.column.getIsFirstColumn('right'),
pinnedRightPosition,
zIndex: isPinned ? 10 : 1,
disableStickyHeader: enableStickyHeader,
})) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
position: 'absolute',
right: 0,
top: '25%',
height: '50%',
width: '3px',
cursor: 'col-resize',
userSelect: 'none',
touchAction: 'none',
borderRadius: '4px',
backgroundColor: header.column.getIsResizing() ? 'primary.main' : theme.palette.grey[300],
'&:hover': {
backgroundColor: theme.palette.primary.main,
},
} })) : null] }), header.id));
};
return ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerRow, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
}