@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
54 lines (53 loc) • 3.7 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnResetControl = ColumnResetControl;
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 data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
function ColumnResetControl(props = {}) {
const { apiRef, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const resetIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'resetIcon');
const ResetIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetIcon', icons_material_1.Autorenew);
const handleResetLayout = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
return;
// Reset based on specified actions
if (actions.includes('columnOrder')) {
(_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.columnOrdering) === null || _b === void 0 ? void 0 : _b.resetColumnOrder();
}
if (actions.includes('columnPinning')) {
(_d = (_c = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _c === void 0 ? void 0 : _c.columnPinning) === null || _d === void 0 ? void 0 : _d.resetColumnPinning();
}
if (actions.includes('columnSizing')) {
(_f = (_e = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _e === void 0 ? void 0 : _e.columnResizing) === null || _f === void 0 ? void 0 : _f.resetColumnSizing();
}
if (actions.includes('columnVisibility')) {
(_h = (_g = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _g === void 0 ? void 0 : _g.columnVisibility) === null || _h === void 0 ? void 0 : _h.resetColumnVisibility();
}
if (actions.includes('filters')) {
(_k = (_j = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _j === void 0 ? void 0 : _j.filtering) === null || _k === void 0 ? void 0 : _k.clearAllFilters();
}
if (actions.includes('sorting')) {
(_m = (_l = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _l === void 0 ? void 0 : _l.sorting) === null || _m === void 0 ? void 0 : _m.resetSorting();
}
if (actions.includes('pagination')) {
(_p = (_o = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _o === void 0 ? void 0 : _o.pagination) === null || _p === void 0 ? void 0 : _p.resetPagination();
}
};
// Merge all props for maximum flexibility
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
onClick: handleResetLayout,
sx: { flexShrink: 0 },
}, resetIconSlotProps, props.iconButtonProps || {});
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reset layout", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(ResetIconSlot, { ...resetIconSlotProps }) }) }));
}