@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
57 lines (56 loc) • 3.61 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableSizeControl = TableSizeControl;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
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(props = {}) {
const { tableSize, onTableSizeChange, slotProps, slots } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const tableSizeIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeIcon');
const tableSizeSmallIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeSmallIcon');
const tableSizeMediumIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeMediumIcon');
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, { ...tableSizeSmallIconSlotProps }),
},
{
value: 'medium',
label: 'Standard',
description: 'Default padding and spacing',
icon: (0, jsx_runtime_1.jsx)(TableSizeMediumIconSlot, { ...tableSizeMediumIconSlotProps }),
},
];
// Merge all props for maximum flexibility
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
sx: { flexShrink: 0 },
}, tableSizeIconSlotProps, props.iconButtonProps || {});
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Table size", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(TableSizeIconSlot, { ...tableSizeIconSlotProps }) }) })), children: SIZE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { selected: tableSize === option.value, onClick: () => onTableSizeChange(option.value), sx: {
minWidth: 200,
...props.containerSx,
}, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { sx: { minWidth: 36 }, children: option.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label, secondary: option.description, slotProps: {
primary: {
variant: 'body2',
fontWeight: tableSize === option.value ? 600 : 400,
},
secondary: {
variant: 'caption',
color: 'text.secondary',
},
} })] }, option.value))) }));
}