@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
37 lines (36 loc) • 2.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableSizeControl = TableSizeControl;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
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 TableSizeControl() {
const { tableSize, onTableSizeChange, slotProps, slots } = (0, data_table_context_1.useDataTableContext)();
const TableSizeIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeIcon', icons_material_1.LineWeightOutlined);
const TableSizeSmallIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeSmallIcon', icons_1.ViewCompactIcon);
const TableSizeMediumIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeMediumIcon', icons_1.ViewComfortableIcon);
const SIZE_OPTIONS = [
{
value: 'small',
label: 'Compact',
description: 'Small padding, compact rows',
icon: (0, jsx_runtime_1.jsx)(TableSizeSmallIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeSmallIcon)),
},
{
value: 'medium',
label: 'Standard',
description: 'Default padding and spacing',
icon: (0, jsx_runtime_1.jsx)(TableSizeMediumIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeMediumIcon)),
},
];
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Table size", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", sx: {
flexShrink: 0,
}, children: (0, jsx_runtime_1.jsx)(TableSizeIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SIZE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { selected: tableSize === option.value, onClick: () => {
onTableSizeChange === null || onTableSizeChange === void 0 ? void 0 : onTableSizeChange(option.value);
handleClose();
}, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: option.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label, secondary: option.description })] }, option.value))) })) }));
}