material-react-table
Version:
A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.
918 lines (897 loc) • 192 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var reactTable = require('@tanstack/react-table');
var styles = require('@mui/material/styles');
var matchSorterUtils = require('@tanstack/match-sorter-utils');
var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
var CancelIcon = require('@mui/icons-material/Cancel');
var CheckBoxIcon = require('@mui/icons-material/CheckBox');
var ClearAllIcon = require('@mui/icons-material/ClearAll');
var CloseIcon = require('@mui/icons-material/Close');
var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
var DragHandleIcon = require('@mui/icons-material/DragHandle');
var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
var EditIcon = require('@mui/icons-material/Edit');
var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
var FilterAltIcon = require('@mui/icons-material/FilterAlt');
var FilterAltOffIcon = require('@mui/icons-material/FilterAltOff');
var FilterListIcon = require('@mui/icons-material/FilterList');
var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
var FullscreenIcon = require('@mui/icons-material/Fullscreen');
var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
var MoreVertIcon = require('@mui/icons-material/MoreVert');
var PushPinIcon = require('@mui/icons-material/PushPin');
var RestartAltIcon = require('@mui/icons-material/RestartAlt');
var SaveIcon = require('@mui/icons-material/Save');
var SearchIcon = require('@mui/icons-material/Search');
var SearchOffIcon = require('@mui/icons-material/SearchOff');
var SortIcon = require('@mui/icons-material/Sort');
var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
var Box = require('@mui/material/Box');
var Dialog = require('@mui/material/Dialog');
var Grow = require('@mui/material/Grow');
var IconButton = require('@mui/material/IconButton');
var Tooltip = require('@mui/material/Tooltip');
var ListItemIcon = require('@mui/material/ListItemIcon');
var Menu = require('@mui/material/Menu');
var MenuItem = require('@mui/material/MenuItem');
var Button = require('@mui/material/Button');
var Divider = require('@mui/material/Divider');
var FormControlLabel = require('@mui/material/FormControlLabel');
var Switch = require('@mui/material/Switch');
var Typography = require('@mui/material/Typography');
var Checkbox = require('@mui/material/Checkbox');
var Radio = require('@mui/material/Radio');
var Paper = require('@mui/material/Paper');
var Toolbar = require('@mui/material/Toolbar');
var useMediaQuery = require('@mui/material/useMediaQuery');
var Collapse = require('@mui/material/Collapse');
var InputAdornment = require('@mui/material/InputAdornment');
var TextField = require('@mui/material/TextField');
var debounce = require('@mui/material/utils/debounce');
var LinearProgress = require('@mui/material/LinearProgress');
var TablePagination = require('@mui/material/TablePagination');
var Alert = require('@mui/material/Alert');
var AlertTitle = require('@mui/material/AlertTitle');
var Chip = require('@mui/material/Chip');
var Fade = require('@mui/material/Fade');
var TableContainer = require('@mui/material/TableContainer');
var Table = require('@mui/material/Table');
var TableHead = require('@mui/material/TableHead');
var TableRow = require('@mui/material/TableRow');
var TableCell = require('@mui/material/TableCell');
var TableSortLabel = require('@mui/material/TableSortLabel');
var reactVirtual = require('react-virtual');
var TableBody = require('@mui/material/TableBody');
var Skeleton = require('@mui/material/Skeleton');
var TableFooter = require('@mui/material/TableFooter');
var DialogActions = require('@mui/material/DialogActions');
var DialogContent = require('@mui/material/DialogContent');
var DialogTitle = require('@mui/material/DialogTitle');
var Stack = require('@mui/material/Stack');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
var CheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckBoxIcon);
var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
var FilterAltOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltOffIcon);
var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePagination);
var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
const getAllLeafColumnDefs = (columns) => {
const allLeafColumnDefs = [];
const getLeafColumns = (cols) => {
cols.forEach((col) => {
if (col.columns) {
getLeafColumns(col.columns);
}
else {
allLeafColumnDefs.push(col);
}
});
};
getLeafColumns(columns);
return allLeafColumnDefs;
};
const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
var _a, _b;
if (!columnDef.id)
columnDef.id = getColumnId(columnDef);
if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
console.error('Column definitions must have a valid `accessorKey` or `id` property');
}
if (!columnDef.columnDefType)
columnDef.columnDefType = 'data';
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
columnDef.columnDefType = 'group';
columnDef.columns = prepareColumns({
columnDefs: columnDef.columns,
columnFilterFns,
defaultDisplayColumn,
filterFns,
sortingFns,
});
}
else if (columnDef.columnDefType === 'data') {
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
columnDef.filterFn =
(_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
columnDef._filterFn =
columnFilterFns[columnDef.id];
}
if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
// @ts-ignore
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
}
}
else if (columnDef.columnDefType === 'display') {
columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
}
return columnDef;
});
const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
if (draggedColumn.getCanPin()) {
draggedColumn.pin(targetColumn.getIsPinned());
}
columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
return [...columnOrder];
};
const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
(props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
props.renderDetailPanel);
const getLeadingDisplayColumnIds = (props) => {
var _a;
return [
(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
props.positionActionsColumn === 'first' &&
(props.enableRowActions ||
(props.enableEditing &&
['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
'mrt-row-actions',
props.positionExpandColumn === 'first' &&
showExpandColumn(props) &&
'mrt-row-expand',
props.enableRowSelection && 'mrt-row-select',
props.enableRowNumbers && 'mrt-row-numbers',
].filter(Boolean);
};
const getTrailingDisplayColumnIds = (props) => {
var _a;
return [
props.positionActionsColumn === 'last' &&
(props.enableRowActions ||
(props.enableEditing &&
['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
'mrt-row-actions',
props.positionExpandColumn === 'last' &&
showExpandColumn(props) &&
'mrt-row-expand',
];
};
const getDefaultColumnOrderIds = (props) => [
...getLeadingDisplayColumnIds(props),
...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
...getTrailingDisplayColumnIds(props),
].filter(Boolean);
const getDefaultColumnFilterFn = (columnDef) => {
if (columnDef.filterVariant === 'multi-select')
return 'arrIncludesSome';
if (columnDef.filterVariant === 'range')
return 'betweenInclusive';
if (columnDef.filterVariant === 'select' ||
columnDef.filterVariant === 'checkbox')
return 'equals';
return 'fuzzy';
};
const getIsLastLeftPinnedColumn = (table, column) => {
return (column.getIsPinned() === 'left' &&
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
};
const getIsFirstRightPinnedColumn = (column) => {
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
};
const getTotalRight = (table, column) => {
return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160);
};
const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
var _a, _b, _c, _d;
return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
: 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
? `-4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
: getIsFirstRightPinnedColumn(column)
? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
: undefined, left: column.getIsPinned() === 'left'
? `${column.getStart('left')}px`
: undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
((_b = table.getState().hoveredColumn) === null || _b === void 0 ? void 0 : _b.id) === column.id
? 0.5
: 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
? 'sticky'
: undefined, right: column.getIsPinned() === 'right'
? `${getTotalRight(table, column)}px`
: undefined, transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
? tableCellProps.sx(theme)
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
};
const MRT_DefaultColumn = {
minSize: 40,
maxSize: 1000,
size: 180,
};
const MRT_DefaultDisplayColumn = {
columnDefType: 'display',
enableClickToCopy: false,
enableColumnActions: false,
enableColumnDragging: false,
enableColumnFilter: false,
enableColumnOrdering: false,
enableEditing: false,
enableGlobalFilter: false,
enableGrouping: false,
enableHiding: false,
enableResizing: false,
enableSorting: false,
};
const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
threshold: matchSorterUtils.rankings.MATCHES,
});
addMeta(itemRank);
return itemRank.passed;
};
fuzzy$1.autoRemove = (val) => !val;
const contains = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.includes(filterValue.toString().toLowerCase().trim());
contains.autoRemove = (val) => !val;
const startsWith = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.startsWith(filterValue.toString().toLowerCase().trim());
startsWith.autoRemove = (val) => !val;
const endsWith = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.endsWith(filterValue.toString().toLowerCase().trim());
endsWith.autoRemove = (val) => !val;
const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
filterValue.toString().toLowerCase().trim();
equals.autoRemove = (val) => !val;
const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
filterValue.toString().toLowerCase().trim();
notEquals.autoRemove = (val) => !val;
const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
? +row.getValue(id) > +filterValue
: row.getValue(id).toString().toLowerCase().trim() >
filterValue.toString().toLowerCase().trim();
greaterThan.autoRemove = (val) => !val;
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
greaterThanOrEqualTo.autoRemove = (val) => !val;
const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
? +row.getValue(id) < +filterValue
: row.getValue(id).toString().toLowerCase().trim() <
filterValue.toString().toLowerCase().trim();
lessThan.autoRemove = (val) => !val;
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
lessThanOrEqualTo.autoRemove = (val) => !val;
const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
greaterThan(row, id, filterValues[0])) &&
((!isNaN(+filterValues[0]) &&
!isNaN(+filterValues[1]) &&
+filterValues[0] > +filterValues[1]) ||
['', undefined].includes(filterValues[1]) ||
lessThan(row, id, filterValues[1]));
between.autoRemove = (val) => !val;
const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
greaterThanOrEqualTo(row, id, filterValues[0])) &&
((!isNaN(+filterValues[0]) &&
!isNaN(+filterValues[1]) &&
+filterValues[0] > +filterValues[1]) ||
['', undefined].includes(filterValues[1]) ||
lessThanOrEqualTo(row, id, filterValues[1]));
betweenInclusive.autoRemove = (val) => !val;
const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
empty.autoRemove = (val) => !val;
const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
notEmpty.autoRemove = (val) => !val;
const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { between,
betweenInclusive,
contains,
empty,
endsWith,
equals,
fuzzy: fuzzy$1,
greaterThan,
greaterThanOrEqualTo,
lessThan,
lessThanOrEqualTo,
notEmpty,
notEquals,
startsWith });
const MRT_Default_Icons = {
ArrowRightIcon: ArrowRightIcon__default["default"],
CancelIcon: CancelIcon__default["default"],
CheckBoxIcon: CheckBoxIcon__default["default"],
ClearAllIcon: ClearAllIcon__default["default"],
CloseIcon: CloseIcon__default["default"],
DensityLargeIcon: DensityLargeIcon__default["default"],
DensityMediumIcon: DensityMediumIcon__default["default"],
DensitySmallIcon: DensitySmallIcon__default["default"],
DragHandleIcon: DragHandleIcon__default["default"],
DynamicFeedIcon: DynamicFeedIcon__default["default"],
EditIcon: EditIcon__default["default"],
ExpandLessIcon: ExpandLessIcon__default["default"],
ExpandMoreIcon: ExpandMoreIcon__default["default"],
FilterAltIcon: FilterAltIcon__default["default"],
FilterAltOffIcon: FilterAltOffIcon__default["default"],
FilterListIcon: FilterListIcon__default["default"],
FilterListOffIcon: FilterListOffIcon__default["default"],
FullscreenExitIcon: FullscreenExitIcon__default["default"],
FullscreenIcon: FullscreenIcon__default["default"],
KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
MoreHorizIcon: MoreHorizIcon__default["default"],
MoreVertIcon: MoreVertIcon__default["default"],
PushPinIcon: PushPinIcon__default["default"],
RestartAltIcon: RestartAltIcon__default["default"],
SaveIcon: SaveIcon__default["default"],
SearchIcon: SearchIcon__default["default"],
SearchOffIcon: SearchOffIcon__default["default"],
SortIcon: SortIcon__default["default"],
ViewColumnIcon: ViewColumnIcon__default["default"],
VisibilityOffIcon: VisibilityOffIcon__default["default"],
};
const fuzzy = (rowA, rowB, columnId) => {
let dir = 0;
if (rowA.columnFiltersMeta[columnId]) {
dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
}
// Provide a fallback for when the item ranks are equal
return dir === 0
? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
: dir;
};
const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy });
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
const MRT_ExpandAllButton = ({ table }) => {
var _a;
const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
const { density, isLoading } = getState();
const iconButtonProps = muiExpandAllButtonProps instanceof Function
? muiExpandAllButtonProps({ table })
: muiExpandAllButtonProps;
return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
React__default["default"].createElement("span", null,
React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
transform: `rotate(${getIsAllRowsExpanded()
? -180
: getIsSomeRowsExpanded()
? -90
: 0}deg)`,
transition: 'transform 150ms',
} })))));
};
const MRT_ExpandButton = ({ row, table }) => {
var _a;
const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
const { density } = getState();
const iconButtonProps = muiExpandButtonProps instanceof Function
? muiExpandButtonProps({ table, row })
: muiExpandButtonProps;
const handleToggleExpand = (event) => {
var _a;
event.stopPropagation();
row.toggleExpanded();
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
};
return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
React__default["default"].createElement("span", null,
React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
? iconButtonProps.sx(theme)
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
React__default["default"].createElement(ExpandMoreIcon, { style: {
transform: `rotate(${!row.getCanExpand() && !renderDetailPanel
? -90
: row.getIsExpanded()
? -180
: 0}deg)`,
transition: 'transform 150ms',
} })))));
};
const mrtFilterOptions = (localization) => [
{
option: 'fuzzy',
symbol: '≈',
label: localization.filterFuzzy,
divider: false,
},
{
option: 'contains',
symbol: '*',
label: localization.filterContains,
divider: false,
},
{
option: 'startsWith',
symbol: 'a',
label: localization.filterStartsWith,
divider: false,
},
{
option: 'endsWith',
symbol: 'z',
label: localization.filterEndsWith,
divider: true,
},
{
option: 'equals',
symbol: '=',
label: localization.filterEquals,
divider: false,
},
{
option: 'notEquals',
symbol: '≠',
label: localization.filterNotEquals,
divider: true,
},
{
option: 'between',
symbol: '⇿',
label: localization.filterBetween,
divider: false,
},
{
option: 'betweenInclusive',
symbol: '⬌',
label: localization.filterBetweenInclusive,
divider: true,
},
{
option: 'greaterThan',
symbol: '>',
label: localization.filterGreaterThan,
divider: false,
},
{
option: 'greaterThanOrEqualTo',
symbol: '≥',
label: localization.filterGreaterThanOrEqualTo,
divider: false,
},
{
option: 'lessThan',
symbol: '<',
label: localization.filterLessThan,
divider: false,
},
{
option: 'lessThanOrEqualTo',
symbol: '≤',
label: localization.filterLessThanOrEqualTo,
divider: true,
},
{
option: 'empty',
symbol: '∅',
label: localization.filterEmpty,
divider: false,
},
{
option: 'notEmpty',
symbol: '!∅',
label: localization.filterNotEmpty,
divider: false,
},
];
const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
var _a, _b, _c, _d;
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
const { globalFilterFn, density } = getState();
const { column } = header !== null && header !== void 0 ? header : {};
const { columnDef } = column !== null && column !== void 0 ? column : {};
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
const internalFilterOptions = React.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
? allowedColumnFilterOptions === undefined ||
(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
: (!globalFilterModeOptions ||
globalFilterModeOptions.includes(filterOption.option)) &&
['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
const handleSelectFilterMode = (option) => {
if (header && column) {
setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
if (['empty', 'notEmpty'].includes(option)) {
column.setFilterValue(' ');
}
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
column.setFilterValue([]);
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
}
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
column.setFilterValue(['', '']);
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
}
else {
column.setFilterValue('');
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
}
}
else {
setGlobalFilterFn(option);
}
setAnchorEl(null);
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
};
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
dense: density === 'compact',
} }, (_d = (header && column && columnDef
? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
column: column,
internalFilterOptions,
onSelectFilterMode: handleSelectFilterMode,
table,
})) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
column: column,
internalFilterOptions,
onSelectFilterMode: handleSelectFilterMode,
table,
})
: renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
internalFilterOptions,
onSelectFilterMode: handleSelectFilterMode,
table,
}))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React__default["default"].createElement(MenuItem__default["default"], { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
alignItems: 'center',
display: 'flex',
gap: '2ch',
my: 0,
py: '6px',
}, value: option },
React__default["default"].createElement(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
label)))));
};
const MRT_ColumnPinningButtons = ({ column, table, }) => {
const { options: { icons: { PushPinIcon }, localization, }, } = table;
const handlePinColumn = (pinDirection) => {
column.pin(pinDirection);
};
return (React__default["default"].createElement(Box__default["default"], { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.unpin },
React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small" },
React__default["default"].createElement(PushPinIcon, null)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft },
React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small" },
React__default["default"].createElement(PushPinIcon, { style: {
transform: 'rotate(90deg)',
} }))),
React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToRight },
React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small" },
React__default["default"].createElement(PushPinIcon, { style: {
transform: 'rotate(-90deg)',
} })))))));
};
const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
var _a;
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
React__default["default"].createElement(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
var _a;
e.stopPropagation();
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
}, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
backgroundColor: 'transparent',
opacity: 1,
}, '&:active': {
cursor: 'grabbing',
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
React__default["default"].createElement(DragHandleIcon, null))));
};
const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
var _a;
const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
const { columnOrder } = getState();
const { columnDef } = column;
const { columnDefType } = columnDef;
const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
(columnDefType === 'group' &&
column.getLeafColumns().some((col) => col.getIsVisible()));
const handleToggleColumnHidden = (column) => {
var _a, _b;
if (columnDefType === 'group') {
(_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
childColumn.toggleVisibility(!switchChecked);
});
}
else {
column.toggleVisibility();
}
};
const menuItemRef = React.useRef(null);
const [isDragging, setIsDragging] = React.useState(false);
const handleDragStart = (e) => {
setIsDragging(true);
e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
};
const handleDragEnd = (_e) => {
setIsDragging(false);
setHoveredColumn(null);
if (hoveredColumn) {
setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
}
};
const handleDragEnter = (_e) => {
if (!isDragging && columnDef.enableColumnOrdering !== false) {
setHoveredColumn(column);
}
};
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(MenuItem__default["default"], { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
alignItems: 'center',
justifyContent: 'flex-start',
my: 0,
opacity: isDragging ? 0.5 : 1,
outline: isDragging
? `1px dashed ${theme.palette.divider}`
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
? `2px dashed ${theme.palette.primary.main}`
: 'none',
pl: `${(column.depth + 0.5) * 2}rem`,
py: '6px',
}) },
React__default["default"].createElement(Box__default["default"], { sx: {
display: 'flex',
flexWrap: 'nowrap',
gap: '8px',
} },
!isSubMenu &&
columnDefType !== 'group' &&
enableColumnOrdering &&
!allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
(columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '28px' } }))),
!isSubMenu &&
enablePinning &&
(column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '70px' } }))),
enableHiding ? (React__default["default"].createElement(FormControlLabel__default["default"], { componentsProps: {
typography: {
sx: {
mb: 0,
opacity: columnDefType !== 'display' ? 1 : 0.5,
},
},
}, checked: switchChecked, control: React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
React__default["default"].createElement(Switch__default["default"], null)), disabled: (isSubMenu && switchChecked) ||
!column.getCanHide() ||
column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(Typography__default["default"], { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
_a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
};
const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { localization, enablePinning, enableColumnOrdering }, } = table;
const { density, columnOrder, columnPinning } = getState();
const hideAllColumns = () => {
getAllLeafColumns()
.filter((col) => col.columnDef.enableHiding !== false)
.forEach((col) => col.toggleVisibility(false));
};
const allColumns = React.useMemo(() => {
const columns = getAllColumns();
if (columnOrder.length > 0 &&
!columns.some((col) => col.columnDef.columnDefType === 'group')) {
return [
...getLeftLeafColumns(),
...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
...getRightLeafColumns(),
].filter(Boolean);
}
return columns;
}, [
columnOrder,
columnPinning,
getAllColumns(),
getCenterLeafColumns(),
getLeftLeafColumns(),
getRightLeafColumns(),
]);
const [hoveredColumn, setHoveredColumn] = React.useState(null);
return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
dense: density === 'compact',
} },
React__default["default"].createElement(Box__default["default"], { sx: {
display: 'flex',
justifyContent: isSubMenu ? 'center' : 'space-between',
p: '0.5rem',
pt: 0,
} },
!isSubMenu && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
!isSubMenu && enableColumnOrdering && (React__default["default"].createElement(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
!isSubMenu && enablePinning && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
React__default["default"].createElement(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
React__default["default"].createElement(Divider__default["default"], null),
allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
};
const commonMenuItemStyles = {
py: '6px',
my: 0,
justifyContent: 'space-between',
alignItems: 'center',
};
const commonListItemStyles = {
display: 'flex',
alignItems: 'center',
};
const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setShowFilters, } = table;
const { column } = header;
const { columnDef } = column;
const { columnSizing, columnVisibility, density } = getState();
const [filterMenuAnchorEl, setFilterMenuAnchorEl] = React.useState(null);
const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] = React.useState(null);
const handleClearSort = () => {
column.clearSorting();
setAnchorEl(null);
};
const handleSortAsc = () => {
column.toggleSorting(false);
setAnchorEl(null);
};
const handleSortDesc = () => {
column.toggleSorting(true);
setAnchorEl(null);
};
const handleResetColumnSize = () => {
column.resetSize();
setAnchorEl(null);
};
const handleHideColumn = () => {
column.toggleVisibility(false);
setAnchorEl(null);
};
const handlePinColumn = (pinDirection) => {
column.pin(pinDirection);
setAnchorEl(null);
};
const handleGroupByColumn = () => {
column.toggleGrouping();
setColumnOrder((old) => ['mrt-row-expand', ...old]);
setAnchorEl(null);
};
const handleClearFilter = () => {
column.setFilterValue('');
setAnchorEl(null);
};
const handleFilterByColumn = () => {
setShowFilters(true);
queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
setAnchorEl(null);
};
const handleShowAllColumns = () => {
toggleAllColumnsVisible(true);
setAnchorEl(null);
};
const handleOpenFilterModeMenu = (event) => {
event.stopPropagation();
setFilterMenuAnchorEl(event.currentTarget);
};
const handleOpenShowHideColumnsMenu = (event) => {
event.stopPropagation();
setShowHideColumnsMenuAnchorEl(event.currentTarget);
};
const isSelectFilter = !!columnDef.filterSelectOptions;
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
const showFilterModeSubMenu = enableColumnFilterModes &&
columnDef.enableColumnFilterModes !== false &&
!isSelectFilter &&
(allowedColumnFilterOptions === undefined ||
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anc