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 (894 loc) • 265 kB
JavaScript
import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
import Menu from '@mui/material/Menu';
import ListItemIcon from '@mui/material/ListItemIcon';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import Checkbox from '@mui/material/Checkbox';
import Radio from '@mui/material/Radio';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import CancelIcon from '@mui/icons-material/Cancel';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ClearAllIcon from '@mui/icons-material/ClearAll';
import CloseIcon from '@mui/icons-material/Close';
import ContentCopy from '@mui/icons-material/ContentCopy';
import DensityLargeIcon from '@mui/icons-material/DensityLarge';
import DensityMediumIcon from '@mui/icons-material/DensityMedium';
import DensitySmallIcon from '@mui/icons-material/DensitySmall';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
import EditIcon from '@mui/icons-material/Edit';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import FilterListIcon from '@mui/icons-material/FilterList';
import FilterListOffIcon from '@mui/icons-material/FilterListOff';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import FullscreenIcon from '@mui/icons-material/Fullscreen';
import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
import LastPageIcon from '@mui/icons-material/LastPage';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import PushPinIcon from '@mui/icons-material/PushPin';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import SaveIcon from '@mui/icons-material/Save';
import SearchIcon from '@mui/icons-material/Search';
import SearchOffIcon from '@mui/icons-material/SearchOff';
import SortIcon from '@mui/icons-material/Sort';
import SyncAltIcon from '@mui/icons-material/SyncAlt';
import ViewColumnIcon from '@mui/icons-material/ViewColumn';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
import Paper from '@mui/material/Paper';
import { useTheme as useTheme$1 } from '@mui/material';
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import Typography from '@mui/material/Typography';
import TableRow from '@mui/material/TableRow';
import Skeleton from '@mui/material/Skeleton';
import TableCell from '@mui/material/TableCell';
import highlightWords from 'highlight-words';
import TextField from '@mui/material/TextField';
import Collapse from '@mui/material/Collapse';
import TableFooter from '@mui/material/TableFooter';
import TableHead from '@mui/material/TableHead';
import FormControlLabel from '@mui/material/FormControlLabel';
import Autocomplete from '@mui/material/Autocomplete';
import Chip from '@mui/material/Chip';
import InputAdornment from '@mui/material/InputAdornment';
import { debounce } from '@mui/material/utils';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import FormHelperText from '@mui/material/FormHelperText';
import Slider from '@mui/material/Slider';
import Grow from '@mui/material/Grow';
import Popover from '@mui/material/Popover';
import Divider from '@mui/material/Divider';
import Badge from '@mui/material/Badge';
import TableSortLabel from '@mui/material/TableSortLabel';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import useMediaQuery from '@mui/material/useMediaQuery';
import LinearProgress from '@mui/material/LinearProgress';
import InputLabel from '@mui/material/InputLabel';
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';
import Select from '@mui/material/Select';
import Fade from '@mui/material/Fade';
import Switch from '@mui/material/Switch';
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, tableOptions, }) => {
const { aggregationFns = {}, defaultDisplayColumn, filterFns = {}, sortingFns = {}, state: { columnFilterFns = {} } = {}, } = tableOptions;
return columnDefs.map((columnDef) => {
var _a, _b;
//assign columnId
if (!columnDef.id)
columnDef.id = getColumnId(columnDef);
//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({
columnDefs: columnDef.columns,
tableOptions,
});
}
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());
}
const newColumnOrder = [...columnOrder];
newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
return newColumnOrder;
};
const getDefaultColumnFilterFn = (columnDef) => {
const { filterVariant } = columnDef;
if (filterVariant === 'multi-select')
return 'arrIncludesSome';
if (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range'))
return 'betweenInclusive';
if (filterVariant === 'select' || filterVariant === 'checkbox')
return 'equals';
return 'fuzzy';
};
const getColumnFilterInfo = ({ header, table, }) => {
var _a;
const { options: { columnFilterModeOptions }, } = table;
const { column } = header;
const { columnDef } = column;
const { filterVariant } = columnDef;
const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
const isAutocompleteFilter = filterVariant === 'autocomplete';
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
const isSelectFilter = filterVariant === 'select';
const isMultiSelectFilter = filterVariant === 'multi-select';
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
(!isSelectFilter && !isMultiSelectFilter);
const currentFilterOption = columnDef._filterFn;
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
const facetedUniqueValues = column.getFacetedUniqueValues();
return {
allowedColumnFilterOptions,
currentFilterOption,
facetedUniqueValues,
isAutocompleteFilter,
isDateFilter,
isMultiSelectFilter,
isRangeFilter,
isSelectFilter,
isTextboxFilter,
};
};
const useDropdownOptions = ({ header, table, }) => {
const { column } = header;
const { columnDef } = column;
const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
return useMemo(() => {
var _a;
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
facetedUniqueValues
? Array.from(facetedUniqueValues.keys())
.filter((value) => value !== null && value !== undefined)
.sort((a, b) => a.localeCompare(b))
: undefined);
}, [
columnDef.filterSelectOptions,
facetedUniqueValues,
isMultiSelectFilter,
isSelectFilter,
]);
};
const flexRender = flexRender$1;
function createMRTColumnHelper() {
return {
accessor: (accessor, column) => {
return typeof accessor === 'function'
? Object.assign(Object.assign({}, column), { accessorFn: accessor })
: Object.assign(Object.assign({}, column), { accessorKey: accessor });
},
display: (column) => column,
group: (column) => column,
};
}
const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
[getColumnId(col)]: '',
}))), rowIndex, depth, subRows, parentId);
const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
const getValueAndLabel = (option) => {
var _a, _b, _c;
let label = '';
let value = '';
if (option) {
if (typeof option !== 'object') {
label = option;
value = option;
}
else {
label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
}
}
return { label, value };
};
const isCellEditable = ({ cell, table, }) => {
const { enableEditing } = table.options;
const { column: { columnDef }, row, } = cell;
return (!cell.getIsPlaceholder() &&
parseFromValuesOrFunc(enableEditing, row) &&
parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
};
const openEditingCell = ({ cell, table, }) => {
const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
const { column } = cell;
if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
table.setEditingCell(cell);
queueMicrotask(() => {
var _a;
const textField = editInputRefs.current[column.id];
if (textField) {
textField.focus();
(_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
}
});
}
};
function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
}
const showRowPinningColumn = (tableOptions) => {
const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
};
const showRowDragColumn = (tableOptions) => {
const { enableRowDragging, enableRowOrdering } = tableOptions;
return !!(enableRowDragging || enableRowOrdering);
};
const showRowExpandColumn = (tableOptions) => {
const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
return !!(enableExpanding ||
(enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
renderDetailPanel);
};
const showRowActionsColumn = (tableOptions) => {
const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
return !!(enableRowActions ||
(creatingRow && createDisplayMode === 'row') ||
(enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
};
const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
const getLeadingDisplayColumnIds = (tableOptions) => [
showRowPinningColumn(tableOptions) && 'mrt-row-pin',
showRowDragColumn(tableOptions) && 'mrt-row-drag',
tableOptions.positionActionsColumn === 'first' &&
showRowActionsColumn(tableOptions) &&
'mrt-row-actions',
tableOptions.positionExpandColumn === 'first' &&
showRowExpandColumn(tableOptions) &&
'mrt-row-expand',
showRowSelectionColumn(tableOptions) && 'mrt-row-select',
showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
].filter(Boolean);
const getTrailingDisplayColumnIds = (tableOptions) => [
tableOptions.positionActionsColumn === 'last' &&
showRowActionsColumn(tableOptions) &&
'mrt-row-actions',
tableOptions.positionExpandColumn === 'last' &&
showRowExpandColumn(tableOptions) &&
'mrt-row-expand',
showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
].filter(Boolean);
const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
let allLeafColumnDefIds = reset
? defaultColumnDefIds
: Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
!trailingDisplayColIds.includes(colId));
return [
...leadingDisplayColIds,
...allLeafColumnDefIds,
...trailingDisplayColIds,
];
};
const fuzzy$1 = (rowA, rowB, columnId) => {
let dir = 0;
if (rowA.columnFiltersMeta[columnId]) {
dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
}
// Provide a fallback for when the item ranks are equal
return dir === 0
? sortingFns.alphanumeric(rowA, rowB, columnId)
: dir;
};
const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuzzy$1 });
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 getMRT_Rows = (table, all) => {
const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
const { creatingRow, pagination } = getState();
const isRankingRows = getIsRankingRows(table);
let rows = [];
if (!isRankingRows) {
rows =
!enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
? all
? getPrePaginationRowModel().rows
: getRowModel().rows
: getCenterRows();
}
else {
// fuzzy ranking adjustments
rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
if (enablePagination && !manualPagination && !all) {
const start = pagination.pageIndex * pagination.pageSize;
rows = rows.slice(start, start + pagination.pageSize);
}
if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
// "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
rows = rows.filter((row) => !row.getIsPinned());
}
}
// row pinning adjustments
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
const centerPinnedRowIds = rows
.filter((row) => row.getIsPinned())
.map((r) => r.id);
rows = [
...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
...rows,
];
}
// blank inserted creating row adjustments
if (positionCreatingRow !== undefined &&
creatingRow &&
createDisplayMode === 'row') {
const creatingRowIndex = !isNaN(+positionCreatingRow)
? +positionCreatingRow
: positionCreatingRow === 'top'
? 0
: rows.length;
rows = [
...rows.slice(0, creatingRowIndex),
creatingRow,
...rows.slice(creatingRowIndex),
];
}
return rows;
};
const getCanRankRows = (table) => {
const { getState, options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, }, } = table;
const { expanded, globalFilterFn } = getState();
return (!manualExpanding &&
!manualFiltering &&
!manualGrouping &&
!manualSorting &&
enableGlobalFilterRankedResults &&
globalFilterFn === 'fuzzy' &&
expanded !== true &&
!Object.values(expanded).some(Boolean));
};
const getIsRankingRows = (table) => {
const { globalFilter, sorting } = table.getState();
return (getCanRankRows(table) &&
globalFilter &&
!Object.values(sorting).some(Boolean));
};
const getIsRowSelected = ({ row, table, }) => {
const { options: { enableRowSelection }, } = table;
return (row.getIsSelected() ||
(parseFromValuesOrFunc(enableRowSelection, row) &&
row.getCanSelectSubRows() &&
row.getIsAllSubRowsSelected()));
};
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
var _a;
const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
const { pagination: { pageIndex, pageSize }, } = getState();
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
const wasCurrentRowChecked = getIsRowSelected({ row, table });
// toggle selection of this row
row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
const changedRowIds = new Set([row.id]);
// if shift key is pressed, select all rows between last selected and this one
if (enableBatchRowSelection &&
enableMultiRowSelection &&
event.nativeEvent.shiftKey &&
lastSelectedRowId.current !== null) {
const rows = getMRT_Rows(table, true);
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
if (lastIndex !== -1) {
const isLastIndexChecked = getIsRowSelected({
row: rows === null || rows === void 0 ? void 0 : rows[lastIndex],
table,
});
const currentIndex = staticRowIndex + paginationOffset;
const [start, end] = lastIndex < currentIndex
? [lastIndex, currentIndex]
: [currentIndex, lastIndex];
// toggle selection of all rows between last selected and this one
// but only if the last selected row is not the same as the current one
if (wasCurrentRowChecked !== isLastIndexChecked) {
for (let i = start; i <= end; i++) {
rows[i].toggleSelected(!wasCurrentRowChecked);
changedRowIds.add(rows[i].id);
}
}
}
}
// record the last selected row id
lastSelectedRowId.current = row.id;
// if all sub rows were selected, unselect them
if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
(_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
}
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
changedRowIds.forEach((rowId) => {
const rowToTogglePin = table.getRow(rowId);
rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
? 'bottom'
: 'top'
: false);
});
}
};
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
selectAllMode === 'all' || forceAll
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
table.setRowPinning({ bottom: [], top: [] });
}
lastSelectedRowId.current = null;
};
const MRT_AggregationFns = Object.assign({}, aggregationFns);
const fuzzy = (row, columnId, filterValue, addMeta) => {
const itemRank = rankItem(row.getValue(columnId), filterValue, {
threshold: rankings.MATCHES,
});
addMeta(itemRank);
return itemRank.passed;
};
fuzzy.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 === null || filterValue === void 0 ? void 0 : 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 === null || filterValue === void 0 ? void 0 : 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 === null || filterValue === void 0 ? void 0 : 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({}, filterFns), { between,
betweenInclusive,
contains,
empty,
endsWith,
equals,
fuzzy,
greaterThan,
greaterThanOrEqualTo,
lessThan,
lessThanOrEqualTo,
notEmpty,
notEquals,
startsWith });
/******************************************************************************
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;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
const MRT_EditActionButtons = (_a) => {
var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
const { creatingRow, editingRow, isSaving } = getState();
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
const handleCancel = () => {
if (isCreating) {
onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
setCreatingRow(null);
}
else if (isEditing) {
onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
setEditingRow(null);
}
row._valuesCache = {}; //reset values cache
};
const handleSubmitRow = () => {
var _a;
//look for auto-filled input values
(_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
.filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
if (input.value !== undefined &&
Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
// @ts-ignore
row._valuesCache[input.name] = input.value;
}
});
if (isCreating)
onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
exitCreatingMode: () => setCreatingRow(null),
row,
table,
values: row._valuesCache,
});
else if (isEditing) {
onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
exitEditingMode: () => setEditingRow(null),
row,
table,
values: row === null || row === void 0 ? void 0 : row._valuesCache,
});
}
};
return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
(isEditing && onEditingRowSave)) && (jsx(Tooltip, { title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", disabled: isSaving, onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) }))] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { disabled: isSaving, onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
};
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
const getMRTTheme = (mrtTheme, muiTheme) => {
var _a;
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
? lighten(muiTheme.palette.background.default, 0.05)
: muiTheme.palette.background.default);
return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
? darken(muiTheme.palette.warning.dark, 0.25)
: lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
};
const commonCellBeforeAfterStyles = {
content: '""',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
zIndex: -1,
};
const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
const { baseBackgroundColor } = table.options.mrtTheme;
const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
return {
'&[data-pinned="true"]': {
'&:before': Object.assign({ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
? isPinned === 'left' && column.getIsLastColumn(isPinned)
? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
: undefined
: undefined }, commonCellBeforeAfterStyles),
},
};
};
const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
var _a, _b, _c, _d, _e, _f;
const { getState, options: { enableColumnVirtualization, layoutMode }, } = table;
const { draggingColumn } = getState();
const { columnDef } = column;
const { columnDefType } = columnDef;
const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
const widthStyles = {
minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
};
if (layoutMode === 'grid') {
widthStyles.flex = `${[0, false].includes(columnDef.grow)
? 0
: `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size)`} 0 auto`;
}
else if (layoutMode === 'grid-no-grow') {
widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
}
const pinnedStyles = isColumnPinned
? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
? `${column.getStart('left')}px`
: undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
? `${column.getAfter('right')}px`
: undefined }) : {};
return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, justifyContent: columnDefType === 'group'
? 'center'
: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
? tableCellProps.align
: undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
? 0.5
: 1, position: 'relative', transition: enableColumnVirtualization
? 'none'
: `padding 150ms ease-in-out`, zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
? 2
: columnDefType !== 'group' && isColumnPinned
? 1
: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
};
const getCommonToolbarStyles = ({ table, }) => ({
alignItems: 'flex-start',
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
display: 'grid',
flexWrap: 'wrap-reverse',
minHeight: '3.5rem',
overflow: 'hidden',
position: 'relative',
transition: 'all 150ms ease-in-out',
zIndex: 1,
});
const flipIconStyles = (theme) => theme.direction === 'rtl'
? { style: { transform: 'scaleX(-1)' } }
: undefined;
const getCommonTooltipProps = (placement) => ({
disableInteractive: true,
enterDelay: 1000,
enterNextDelay: 1000,
placement,
});
const MRT_ActionMenuItem = (_a) => {
var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
const { options: { icons: { ArrowRightIcon }, }, } = table;
return (jsxs(MenuItem, Object.assign({ sx: {
alignItems: 'center',
justifyContent: 'space-between',
minWidth: '120px',
my: 0,
py: '6px',
} }, rest, { children: [jsxs(Box, { sx: {
alignItems: 'center',
display: 'flex',
}, children: [jsx(ListItemIcon, { children: icon }), label] }), onOpenSubMenu && (jsx(IconButton, { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] })));
};
const MRT_RowActionMenu = (_a) => {
var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
const { density } = getState();
return (jsxs(Menu, Object.assign({ MenuListProps: {
dense: density === 'compact',
sx: {
backgroundColor: menuBackgroundColor,
},
}, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
closeMenu: () => setAnchorEl(null),
row,
staticRowIndex,
table,
})] })));
};
const commonIconButtonStyles = {
'&:hover': {
opacity: 1,
},
height: '2rem',
ml: '10px',
opacity: 0.5,
transition: 'opacity 150ms',
width: '2rem',
};
const MRT_ToggleRowActionMenuButton = (_a) => {
var { cell, row, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "row", "staticRowIndex", "table"]);
const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
const { creatingRow, editingRow } = getState();
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
(isEditing && editDisplayMode === 'row');
const [anchorEl, setAnchorEl] = useState(null);
const handleOpenRowActionMenu = (event) => {
event.stopPropagation();
event.preventDefault();
setAnchorEl(event.currentTarget);
};
const handleStartEditMode = (event) => {
event.stopPropagation();
setEditingRow(Object.assign({}, row));
setAnchorEl(null);
};
return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, staticRowIndex, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
parseFromValuesOrFunc(enableEditing, row) &&
['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) })), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
};
const getMRT_RowActionsColumnDef = (tableOptions) => {
return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
header: 'actions',
id: 'mrt-row-actions',
size: 70,
tableOptions,
}));
};
const MRT_GrabHandleButton = (_a) => {
var _b, _c;
var { location, table } = _a, rest = __rest(_a, ["location", "table"]);
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, rest, { onClick: (e) => {
var _a;
e.stopPropagation();
(_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
}, sx: (theme) => (Object.assign({ '&:active': {
cursor: 'grabbing',
}, '&:hover': {
backgroundColor: 'transparent',
opacity: 1,
}, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) })));
};
const MRT_TableBodyRowGrabHandle = (_a) => {
var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
const { options: { muiRowDragHandleProps }, } = table;
const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
row,
table,
})), rest);
const handleDragStart = (event) => {
var _a;
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
try {
event.dataTransfer.setDragImage(rowRef.current, 0, 0);
}
catch (e) {
console.error(e);
}
table.setDraggingRow(row);
};
const handleDragEnd = (event) => {
var _a;
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
table.setDraggingRow(null);
table.setHoveredRow(null);
};
return (jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
};
const getMRT_RowDragColumnDef = (tableOptions) => {
return Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
header: 'move',
id: 'mrt-row-drag',
size: 60,
tableOptions,
}));
};
const MRT_ExpandAllButton = (_a) => {
var _b, _c;
var { table } = _a, rest = __rest(_a, ["table"]);
const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
const { density, isLoading } = getState();
const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
table,
})), rest);
const isAllRowsExpanded = getIsAllRowsExpanded();
return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsx("span", { children: jsx(IconButton, 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', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(KeyboardDoubleArrowDownIcon, { style: {
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
transition: 'transform 150ms',
} })) })) }) })));
};
const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
var _a, _b;
const theme = useTheme();
const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel, }, } = table;
const { density } = getState();
const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
row,
staticRowIndex,
table,
});
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) ===