@inbuild/material-react-table
Version:
A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.
919 lines (899 loc) • 271 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 ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
var CancelIcon = require('@mui/icons-material/Cancel');
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 ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
var FilterAltIcon = require('@mui/icons-material/FilterAlt');
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 utils = require('@mui/material/utils');
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 reactVirtual = require('@tanstack/react-virtual');
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 Badge = require('@mui/material/Badge');
var TableSortLabel = require('@mui/material/TableSortLabel');
var TableBody = require('@mui/material/TableBody');
var Skeleton = require('@mui/material/Skeleton');
var material = require('@mui/material');
var reactNumberFormat = require('react-number-format');
var Autocomplete = require('@mui/material/Autocomplete');
var highlightWords = require('highlight-words');
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 }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
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 ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
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 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 Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete);
var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
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 = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
var _a, _b;
//assign columnId
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');
}
//assign columnDefType
if (!columnDef.columnDefType)
columnDef.columnDefType = 'data';
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
columnDef.columnDefType = 'group';
//recursively prepare columns if this is a group column
columnDef.columns = prepareColumns({
aggregationFns,
columnDefs: columnDef.columns,
columnFilterFns,
defaultDisplayColumn,
filterFns,
sortingFns,
});
}
else if (columnDef.columnDefType === 'data') {
//assign aggregationFns if multiple aggregationFns are provided
if (Array.isArray(columnDef.aggregationFn)) {
const aggFns = columnDef.aggregationFn;
columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
}
//assign filterFns
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];
}
//assign sortingFns
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 getIsFirstColumn = (column, table) => {
return table.getVisibleLeafColumns()[0].id === column.id;
};
const getIsLastColumn = (column, table) => {
const columns = table.getVisibleLeafColumns();
return columns[columns.length - 1].id === column.id;
};
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()) * 200);
};
const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
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, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
: undefined, left: column.getIsPinned() === 'left'
? `${column.getStart('left')}px`
: undefined, ml: table.options.enableColumnVirtualization &&
column.getIsPinned() === 'left' &&
column.getPinnedIndex() === 0
? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
: undefined, mr: table.options.enableColumnVirtualization &&
column.getIsPinned() === 'right' &&
column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
? `-${column.getSize() *
((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
1.2}px`
: undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.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: table.options.enableColumnVirtualization
? 'none'
: `padding 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)), { minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
};
const MRT_DefaultColumn = {
filterVariant: 'text',
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 parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
const padZero = (str, len) => {
len = len || 2;
const zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
};
const invertColor = (hex, bw, alp) => {
let alpha = 'FF';
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length === 8) {
alpha = hex.slice(6, 8);
hex = hex.slice(0, 6);
}
else if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
let r = parseInt(hex.slice(0, 2), 16);
let g = parseInt(hex.slice(2, 4), 16);
let b = parseInt(hex.slice(4, 6), 16);
if (bw) {
// https://stackoverflow.com/a/3943023/112731
return r * 0.299 + g * 0.587 + b * 0.114 > 186
? `#000000${alp ? alpha : ''}`
: `#FFFFFF${alp ? alpha : ''}`;
}
// invert color components
r = (255 - r).toString(16);
g = (255 - g).toString(16);
b = (255 - b).toString(16);
// pad each with zeros and return
return `#${padZero(r)}${padZero(g)}${padZero(b)}${alp ? alpha : ''}`;
};
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 = {
ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
ArrowRightIcon: ArrowRightIcon__default["default"],
CancelIcon: CancelIcon__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"],
ExpandMoreIcon: ExpandMoreIcon__default["default"],
FilterAltIcon: FilterAltIcon__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, _b;
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;
const isAllRowsExpanded = getIsAllRowsExpanded();
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 : isAllRowsExpanded)
? localization.collapseAll
: 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(!isAllRowsExpanded) }, 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 }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
transition: 'transform 150ms',
} }))))));
};
const MRT_ExpandButton = ({ row, table, }) => {
var _a, _b;
const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
const { density } = getState();
const iconButtonProps = muiExpandButtonProps instanceof Function
? muiExpandButtonProps({ table, row })
: muiExpandButtonProps;
const canExpand = row.getCanExpand();
const isExpanded = row.getIsExpanded();
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, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
? localization.collapse
: localization.expand },
React__default["default"].createElement("span", null,
React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !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 }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(ExpandMoreIcon, { style: {
transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -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 rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
const emptyModes = ['empty', 'notEmpty'];
const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
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 currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
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) => {
var _a;
const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
if (!header || !column) {
// global filter mode
setGlobalFilterFn(option);
}
else if (option !== prevFilterMode) {
// column filter mode
setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
// reset filter value and/or perform new filter render
if (emptyModes.includes(option)) {
// will now be empty/notEmpty filter mode
if (currentFilterValue !== ' ' &&
!emptyModes.includes(prevFilterMode)) {
column.setFilterValue(' ');
}
else if (currentFilterValue) {
column.setFilterValue(currentFilterValue); // perform new filter render
}
}
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
arrModes.includes(option)) {
// will now be array filter mode
if (currentFilterValue instanceof String ||
(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
column.setFilterValue([]);
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
}
else if (currentFilterValue) {
column.setFilterValue(currentFilterValue); // perform new filter render
}
}
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
rangeModes.includes(option)) {
// will now be range filter mode
if (!Array.isArray(currentFilterValue) ||
(!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
!rangeModes.includes(prevFilterMode))) {
column.setFilterValue(['', '']);
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
}
else {
column.setFilterValue(currentFilterValue); // perform new filter render
}
}
else {
// will now be single value filter mode
if (Array.isArray(currentFilterValue)) {
column.setFilterValue('');
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
}
else {
column.setFilterValue(currentFilterValue); // perform new filter render
}
}
}
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,
outlineOffset: '-2px',
outline: isDragging
? `2px 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(), 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, getLeft