@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
32 lines (31 loc) • 2.82 kB
JavaScript
;
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 = 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() {
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
const columns = (0, react_1.useMemo)(() => {
var _a, _b;
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.getAllLeafColumns());
}
return table.getAllLeafColumns().filter(column => column.getCanHide());
}, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
const handleColumnVisibilityChange = ((columnId, visible) => {
var _a;
(_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
});
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, { size: "small", sx: {
flexShrink: 0,
}, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
p: 2,
minWidth: 200,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "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" })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] })) }));
}