@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
153 lines (152 loc) • 11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnPinningControl = ColumnPinningControl;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const react_1 = __importStar(require("react"));
const menu_dropdown_1 = require("../droupdown/menu-dropdown");
const data_table_context_1 = require("../../contexts/data-table-context");
const icons_1 = require("../../icons");
const slot_helpers_1 = require("../../utils/slot-helpers");
function ColumnPinningControl(props = {}) {
var _a, _b, _c;
// Use context if no props provided (MUI DataGrid style)
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const pinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pinIcon');
const unpinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'unpinIcon');
const leftIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'leftIcon');
const rightIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'rightIcon');
const PinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pinIcon', icons_material_1.PushPinOutlined);
const UnpinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'unpinIcon', icons_1.UnpinIcon);
const LeftIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'leftIcon', icons_material_1.ArrowLeftOutlined);
const RightIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'rightIcon', icons_material_1.ArrowRightOutlined);
const columnPinning = (table === null || table === void 0 ? void 0 : table.getState().columnPinning) || {};
const allColumns = (0, react_1.useMemo)(() => {
var _a, _b, _c;
if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getPinnableColumns) {
return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getPinnableColumns((table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) || []);
}
return ((_c = table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) === null || _c === void 0 ? void 0 : _c.filter(column => column.getCanPin())) || [];
}, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
const handlePinColumn = (columnId, position) => {
const currentPinning = (table === null || table === void 0 ? void 0 : table.getState().columnPinning) || {};
const newPinning = { ...currentPinning };
// Remove from current position
newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
// Add to new position
if (position === 'left') {
// Left-pinned: append to end (appears leftmost to rightmost)
newPinning.left = [...(newPinning.left || []), columnId];
}
else if (position === 'right') {
// Right-pinned: prepend to beginning (appears rightmost to leftmost)
// First column pinned appears rightmost, second appears to its left, etc.
newPinning.right = [columnId, ...(newPinning.right || [])];
}
table === null || table === void 0 ? void 0 : table.setColumnPinning(newPinning);
};
const getColumnPinStatus = (columnId) => {
var _a, _b;
if ((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.includes(columnId))
return 'left';
if ((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.includes(columnId))
return 'right';
return 'none';
};
const getColumnDisplayName = (column) => {
if (typeof column.columnDef.header === 'string') {
return column.columnDef.header;
}
return column.id;
};
const handleUnpinAll = (0, react_1.useCallback)(() => {
var _a;
table === null || table === void 0 ? void 0 : table.setColumnPinning(((_a = table === null || table === void 0 ? void 0 : table.initialState) === null || _a === void 0 ? void 0 : _a.columnPinning) || {});
}, [table]);
// Count only user-pinned columns (exclude system columns like select and action)
const userPinnedLeft = (((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.filter((id) => allColumns.some((column) => column.id === id))) || []);
const userPinnedRight = (((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.filter((id) => allColumns.some((column) => column.id === id))) || []);
const totalPinned = userPinnedLeft.length + userPinnedRight.length;
// Merge all props for maximum flexibility
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
sx: { flexShrink: 0 },
}, pinIconSlotProps, props.iconButtonProps || {});
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin columns", ...props.tooltipProps, children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, { ...mergedIconButtonProps, children: [(0, jsx_runtime_1.jsx)(PinIconSlot, { ...pinIconSlotProps }), totalPinned > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
position: 'absolute',
top: -2,
right: -2,
backgroundColor: 'primary.main',
color: 'white',
borderRadius: '50%',
width: 16,
height: 16,
fontSize: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...(_c = props.badgeProps) === null || _c === void 0 ? void 0 : _c.sx,
}, ...props.badgeProps, children: totalPinned }))] }) })), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
p: 2,
minWidth: 300,
maxWidth: 400,
...props.menuSx,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
mb: 1,
...props.titleSx,
}, children: props.title || 'Pin Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), totalPinned > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleUnpinAll, color: "warning", ...props.clearButtonProps, children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, { ...unpinIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { ml: 1 }, children: "Unpin all columns" })] })), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
const pinStatus = getColumnPinStatus(column.id);
const displayName = getColumnDisplayName(column);
return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: { py: 0.25 }, secondaryAction: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
display: 'flex',
gap: 0.5,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, { fontSize: "small", ...leftIconSlotProps }) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin right", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: (0, jsx_runtime_1.jsx)(RightIconSlot, { fontSize: "small", ...rightIconSlotProps }) }) }), pinStatus !== 'none' && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, { fontSize: "small", ...unpinIconSlotProps }) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus === 'left' ? 'Pinned left' :
pinStatus === 'right' ? 'Pinned right' :
'Not pinned', slotProps: {
primary: {
variant: 'body2',
fontWeight: pinStatus !== 'none' ? 600 : 400,
},
secondary: {
variant: 'caption',
color: pinStatus !== 'none' ? 'primary.main' : 'text.secondary',
},
} }) }, column.id));
}) })] }) }));
}