@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
78 lines (77 loc) • 5.09 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.ColumnVisibilityControl = ColumnVisibilityControl;
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 slot_helpers_1 = require("../../utils/slot-helpers");
function ColumnVisibilityControl(props = {}) {
// 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 iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnIcon');
const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
const columns = (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.getTogglableColumns) {
return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns((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.getCanHide())) || [];
}, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
const handleColumnVisibilityChange = ((columnId, visible) => {
var _a;
(_a = table === null || table === void 0 ? void 0 : table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
});
// Merge all props for maximum flexibility
const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
// Default props
size: 'small',
sx: { flexShrink: 0 },
}, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnVisibilityControl) || {}, props);
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedProps, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, { ...iconSlotProps }) }) })), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
p: 2,
minWidth: 200,
// Allow user to override these styles
...mergedProps.menuSx,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
mb: 1,
// Allow user to override title styles
...mergedProps.titleSx,
}, children: mergedProps.title || 'Show/Hide Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small", ...mergedProps.checkboxProps })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id, ...mergedProps.labelProps }, column.id))) })] }) }));
}