@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
91 lines (90 loc) • 5.14 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableHeader = TableHeader;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* TableHeader Component
*
* Unified header component that combines:
* - Sortable functionality
* - Draggable column reordering
* - Column resizing
* - Pinning support
*/
const react_1 = __importDefault(require("react"));
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");
/**
* Renders table headers with sorting, dragging, and resizing capabilities
*/
function TableHeader(props) {
const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps, ...otherProps } = props;
const theme = (0, material_1.useTheme)();
const { table } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const headerCellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerCell');
const headerRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerRow');
const headerSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'header');
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);
// Merge all props for maximum flexibility
const mergedHeaderProps = (0, slot_helpers_1.mergeSlotProps)({
sx: containerSx,
}, headerSlotProps, otherProps);
const mergedHeaderRowProps = (0, slot_helpers_1.mergeSlotProps)({}, headerRowSlotProps, headerRowProps || {});
const renderHeaderCell = (header) => {
var _a;
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();
const wrapText = (_a = header.column.columnDef.wrapText) !== null && _a !== void 0 ? _a : false;
const canResize = enableColumnResizing && header.column.getCanResize();
const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
align: alignment,
sx: {
...(0, utils_1.getPinnedColumnStyle)({
width: fitToScreen ? '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,
wrapText,
}),
},
}, headerCellSlotProps, headerCellProps || {});
const mergedResizeHandleProps = (0, slot_helpers_1.mergeSlotProps)({
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,
},
...resizeHandleSx,
},
});
return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, { ...mergedHeaderCellProps, children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), canResize ? ((0, jsx_runtime_1.jsx)(material_1.Box, { ...mergedResizeHandleProps })) : null] }, header.id));
};
return ((0, jsx_runtime_1.jsx)(HeaderSlot, { ...mergedHeaderProps, children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, { ...mergedHeaderRowProps, children: headerGroup.headers.map(renderHeaderCell) }, headerGroup.id))) }));
}