@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
62 lines (61 loc) • 2.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.tableRowStyles = exports.tableCellStyles = void 0;
exports.getPinnedColumnStyle = getPinnedColumnStyle;
exports.getColumnAlignment = getColumnAlignment;
const getBoxShadow = (isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn) => {
if (isPinned === 'left' && isLastLeftPinnedColumn) {
return '1px 0 3px rgba(0, 0, 0, 0.12)';
}
if (isPinned === 'right' && isFirstRightPinnedColumn) {
return '-1px 0 3px rgba(0, 0, 0, 0.12)';
}
return 'none';
};
function getPinnedColumnStyle(options) {
const { width = 'auto', isPinned, pinnedPosition, pinnedRightPosition, isLastLeftPinnedColumn, isFirstRightPinnedColumn, zIndex = 1, disableStickyHeader = false, } = options;
const needsPinnedPositioning = isPinned;
const shouldBeSticky = isPinned;
let positionStyle = {};
if (shouldBeSticky) {
positionStyle = { position: 'sticky' };
}
else if (!disableStickyHeader) {
positionStyle = { position: 'relative' };
}
return Object.assign(Object.assign(Object.assign(Object.assign({ width, maxWidth: width, overflow: 'hidden', whiteSpace: 'nowrap' }, positionStyle), (needsPinnedPositioning ? {
left: isPinned === 'left' ? pinnedPosition : undefined,
right: isPinned === 'right' ? pinnedRightPosition : undefined,
zIndex,
} : {})), (isPinned && {
backgroundColor: 'background.paper',
})), { boxShadow: getBoxShadow(isPinned, !!isLastLeftPinnedColumn, !!isFirstRightPinnedColumn) });
}
exports.tableCellStyles = {
sticky: {
position: 'sticky',
zIndex: 10,
backgroundColor: 'background.paper',
},
pinned: {
borderRight: '1px solid',
borderColor: 'divider',
},
};
exports.tableRowStyles = {
hover: {
'&:hover': {
backgroundColor: 'action.hover',
},
},
striped: {
'&:nth-of-type(odd)': {
backgroundColor: 'action.selected',
},
},
};
function getColumnAlignment(column) {
if (!column)
return 'left';
return column.align || 'left';
}