material-react-table 1.7.4 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +5 -13
  2. package/dist/cjs/index.js +84 -38
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/MaterialReactTable.d.ts +16 -8
  5. package/dist/cjs/types/body/MRT_TableBody.d.ts +3 -4
  6. package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +2 -3
  7. package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +4 -5
  8. package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts +2 -3
  9. package/dist/cjs/types/column.utils.d.ts +4 -4
  10. package/dist/cjs/types/footer/MRT_TableFooter.d.ts +2 -3
  11. package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts +2 -3
  12. package/dist/cjs/types/head/MRT_TableHead.d.ts +2 -3
  13. package/dist/cjs/types/head/MRT_TableHeadRow.d.ts +2 -3
  14. package/dist/cjs/types/table/MRT_TableRoot.d.ts +1 -272
  15. package/dist/esm/material-react-table.esm.js +82 -39
  16. package/dist/esm/material-react-table.esm.js.map +1 -1
  17. package/dist/esm/types/MaterialReactTable.d.ts +16 -8
  18. package/dist/esm/types/body/MRT_TableBody.d.ts +3 -4
  19. package/dist/esm/types/body/MRT_TableBodyCell.d.ts +2 -3
  20. package/dist/esm/types/body/MRT_TableBodyRow.d.ts +4 -5
  21. package/dist/esm/types/body/MRT_TableDetailPanel.d.ts +2 -3
  22. package/dist/esm/types/column.utils.d.ts +4 -4
  23. package/dist/esm/types/footer/MRT_TableFooter.d.ts +2 -3
  24. package/dist/esm/types/footer/MRT_TableFooterRow.d.ts +2 -3
  25. package/dist/esm/types/head/MRT_TableHead.d.ts +2 -3
  26. package/dist/esm/types/head/MRT_TableHeadRow.d.ts +2 -3
  27. package/dist/esm/types/table/MRT_TableRoot.d.ts +1 -272
  28. package/dist/index.d.ts +16 -7
  29. package/package.json +2 -2
  30. package/src/MaterialReactTable.tsx +44 -7
  31. package/src/body/MRT_TableBody.tsx +11 -10
  32. package/src/body/MRT_TableBodyCell.tsx +8 -12
  33. package/src/body/MRT_TableBodyCellValue.tsx +1 -0
  34. package/src/body/MRT_TableBodyRow.tsx +14 -7
  35. package/src/body/MRT_TableDetailPanel.tsx +2 -3
  36. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +4 -1
  37. package/src/column.utils.ts +12 -9
  38. package/src/footer/MRT_TableFooter.tsx +2 -3
  39. package/src/footer/MRT_TableFooterRow.tsx +7 -3
  40. package/src/head/MRT_TableHead.tsx +2 -3
  41. package/src/head/MRT_TableHeadCellSortLabel.tsx +4 -0
  42. package/src/head/MRT_TableHeadRow.tsx +7 -3
  43. package/src/inputs/MRT_EditCellTextField.tsx +38 -2
  44. package/src/menus/MRT_FilterOptionMenu.tsx +14 -5
  45. package/src/menus/MRT_RowActionMenu.tsx +12 -10
  46. package/src/table/MRT_Table.tsx +2 -3
  47. package/src/table/MRT_TableRoot.tsx +33 -19
@@ -288,7 +288,12 @@ const MRT_DefaultDisplayColumn = {
288
288
  enableResizing: false,
289
289
  enableSorting: false,
290
290
  };
291
- const parseCSSVarId = (id) => id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
291
+ const parseCSSVarId = (id) => id
292
+ .replaceAll('.', '_')
293
+ .replaceAll(' ', '_')
294
+ .replaceAll('+', '_')
295
+ .replaceAll('(', '_')
296
+ .replaceAll(')', '_');
292
297
 
293
298
  const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
294
299
  const itemRank = rankItem(row.getValue(columnId), filterValue, {
@@ -558,6 +563,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
558
563
  const { globalFilterFn, density } = getState();
559
564
  const { column } = header !== null && header !== void 0 ? header : {};
560
565
  const { columnDef } = column !== null && column !== void 0 ? column : {};
566
+ const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
561
567
  const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
562
568
  const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
563
569
  ? allowedColumnFilterOptions === undefined ||
@@ -569,12 +575,16 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
569
575
  if (header && column) {
570
576
  setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
571
577
  if (['empty', 'notEmpty'].includes(option)) {
572
- column.setFilterValue(' ');
578
+ if (currentFilterValue !== ' ') {
579
+ column.setFilterValue(' ');
580
+ }
573
581
  }
574
582
  else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
575
583
  ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
576
- column.setFilterValue([]);
577
- setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
584
+ if (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length) {
585
+ column.setFilterValue([]);
586
+ setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
587
+ }
578
588
  }
579
589
  else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
580
590
  ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
@@ -582,8 +592,10 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
582
592
  setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
583
593
  }
584
594
  else {
585
- column.setFilterValue('');
586
- setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
595
+ if (!['', undefined].includes(currentFilterValue)) {
596
+ column.setFilterValue('');
597
+ setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
598
+ }
587
599
  }
588
600
  }
589
601
  else {
@@ -962,11 +974,13 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
962
974
  return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
963
975
  dense: density === 'compact',
964
976
  } },
965
- enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
966
- React.createElement(Box, { sx: commonListItemStyles },
967
- React.createElement(ListItemIcon, null,
968
- React.createElement(EditIcon, null)),
969
- localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
977
+ enableEditing instanceof Function
978
+ ? enableEditing(row)
979
+ : enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
980
+ React.createElement(Box, { sx: commonListItemStyles },
981
+ React.createElement(ListItemIcon, null,
982
+ React.createElement(EditIcon, null)),
983
+ localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
970
984
  renderRowActionMenuItems({
971
985
  row,
972
986
  table,
@@ -1033,7 +1047,10 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
1033
1047
  setEditingRow(Object.assign({}, row));
1034
1048
  setAnchorEl(null);
1035
1049
  };
1036
- return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
1050
+ return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
1051
+ (enableEditing instanceof Function
1052
+ ? enableEditing(row)
1053
+ : enableEditing) ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
1037
1054
  React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
1038
1055
  React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
1039
1056
  React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -1862,7 +1879,11 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
1862
1879
  transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
1863
1880
  ? 'translateX(-0.5ch)'
1864
1881
  : undefined,
1865
- }, IconComponent: ArrowDownwardIcon })));
1882
+ }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
1883
+ var _a;
1884
+ e.stopPropagation();
1885
+ (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
1886
+ } })));
1866
1887
  };
1867
1888
 
1868
1889
  const MRT_TableHeadCell = ({ header, table }) => {
@@ -2028,7 +2049,7 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
2028
2049
  };
2029
2050
 
2030
2051
  const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
2031
- var _a;
2052
+ var _a, _b;
2032
2053
  const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
2033
2054
  const { column, row } = cell;
2034
2055
  const { columnDef } = column;
@@ -2046,6 +2067,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
2046
2067
  })
2047
2068
  : columnDef.muiTableBodyCellEditTextFieldProps;
2048
2069
  const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
2070
+ const isSelectEdit = columnDef.editVariant === 'select';
2049
2071
  const saveRow = (newValue) => {
2050
2072
  if (editingRow) {
2051
2073
  setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: newValue }) }));
@@ -2075,18 +2097,37 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
2075
2097
  if (columnDef.Edit) {
2076
2098
  return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
2077
2099
  }
2078
- return (React.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
2100
+ return (React.createElement(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
2101
+ ? columnDef.enableEditing(row)
2102
+ : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
2079
2103
  if (inputRef) {
2080
2104
  editInputRefs.current[column.id] = inputRef;
2081
2105
  if (textFieldProps.inputRef) {
2082
2106
  textFieldProps.inputRef = inputRef;
2083
2107
  }
2084
2108
  }
2085
- }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
2109
+ }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
2086
2110
  var _a;
2087
2111
  e.stopPropagation();
2088
2112
  (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
2089
- }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
2113
+ }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown }), (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _b === void 0 ? void 0 : _b.map((option) => {
2114
+ let value;
2115
+ let text;
2116
+ if (typeof option !== 'object') {
2117
+ value = option;
2118
+ text = option;
2119
+ }
2120
+ else {
2121
+ value = option.value;
2122
+ text = option.text;
2123
+ }
2124
+ return (React.createElement(MenuItem, { key: value, sx: {
2125
+ display: 'flex',
2126
+ m: 0,
2127
+ alignItems: 'center',
2128
+ gap: '0.5rem',
2129
+ }, value: value }, text));
2130
+ })));
2090
2131
  };
2091
2132
 
2092
2133
  const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -2170,6 +2211,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
2170
2211
  renderedCellValue = cell.renderValue();
2171
2212
  }
2172
2213
  if (enableFilterMatchHighlighting &&
2214
+ columnDef.enableFilterMatchHighlighting !== false &&
2173
2215
  renderedCellValue &&
2174
2216
  allowedTypes.includes(typeof renderedCellValue) &&
2175
2217
  ((filterValue &&
@@ -2262,8 +2304,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
2262
2304
  }
2263
2305
  : undefined;
2264
2306
  }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
2265
- const isEditable = (enableEditing || columnDef.enableEditing) &&
2266
- columnDef.enableEditing !== false;
2307
+ const isEditable = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
2308
+ (columnDef.enableEditing instanceof Function
2309
+ ? columnDef.enableEditing(row)
2310
+ : columnDef.enableEditing) !== false;
2267
2311
  const isEditing = isEditable &&
2268
2312
  editingMode !== 'modal' &&
2269
2313
  (editingMode === 'table' ||
@@ -2273,9 +2317,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
2273
2317
  const handleDoubleClick = (event) => {
2274
2318
  var _a;
2275
2319
  (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
2276
- if ((enableEditing || columnDef.enableEditing) &&
2277
- columnDef.enableEditing !== false &&
2278
- editingMode === 'cell') {
2320
+ if (isEditable && editingMode === 'cell') {
2279
2321
  setEditingCell(cell);
2280
2322
  queueMicrotask(() => {
2281
2323
  var _a;
@@ -2320,8 +2362,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
2320
2362
  : 1.25)}rem`
2321
2363
  : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
2322
2364
  backgroundColor: enableHover &&
2323
- enableEditing &&
2324
- columnDef.enableEditing !== false &&
2365
+ isEditable &&
2325
2366
  ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
2326
2367
  ? theme.palette.mode === 'dark'
2327
2368
  ? `${lighten(theme.palette.background.default, 0.2)} !important`
@@ -2780,7 +2821,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
2780
2821
  };
2781
2822
 
2782
2823
  const MRT_TableRoot = (props) => {
2783
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
2824
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
2784
2825
  const bottomToolbarRef = useRef(null);
2785
2826
  const editInputRefs = useRef({});
2786
2827
  const filterInputRefs = useRef({});
@@ -2821,18 +2862,18 @@ const MRT_TableRoot = (props) => {
2821
2862
  const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
2822
2863
  const [showToolbarDropZone, setShowToolbarDropZone] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
2823
2864
  const displayColumns = useMemo(() => {
2824
- var _a, _b, _c, _d, _e;
2865
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
2825
2866
  return [
2826
- columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
2827
- columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
2828
- columnOrder.includes('mrt-row-expand') &&
2829
- showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
2867
+ ((_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
2868
+ ((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
2869
+ ((_h = (_g = props.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
2870
+ showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
2830
2871
  ? () => React.createElement(MRT_ExpandAllButton, { table: table })
2831
- : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
2832
- columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
2872
+ : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_l = props.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
2873
+ ((_o = (_m = props.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
2833
2874
  ? () => React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
2834
- : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
2835
- columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
2875
+ : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_p = props.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
2876
+ ((_r = (_q = props.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_s = props.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
2836
2877
  ].filter(Boolean);
2837
2878
  }, [
2838
2879
  columnOrder,
@@ -2855,6 +2896,8 @@ const MRT_TableRoot = (props) => {
2855
2896
  props.localization,
2856
2897
  props.positionActionsColumn,
2857
2898
  props.renderDetailPanel,
2899
+ (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnOrder,
2900
+ (_t = props.state) === null || _t === void 0 ? void 0 : _t.grouping,
2858
2901
  ]);
2859
2902
  const columnDefs = useMemo(() => {
2860
2903
  var _a, _b, _c;
@@ -2870,7 +2913,7 @@ const MRT_TableRoot = (props) => {
2870
2913
  columnFilterFns,
2871
2914
  displayColumns,
2872
2915
  props.columns,
2873
- (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnFilterFns,
2916
+ (_u = props.state) === null || _u === void 0 ? void 0 : _u.columnFilterFns,
2874
2917
  ]);
2875
2918
  const data = useMemo(() => {
2876
2919
  var _a, _b, _c, _d, _e;
@@ -2884,11 +2927,11 @@ const MRT_TableRoot = (props) => {
2884
2927
  [getColumnId(col)]: null,
2885
2928
  }))))
2886
2929
  : props.data;
2887
- }, [props.data, (_t = props.state) === null || _t === void 0 ? void 0 : _t.isLoading, (_u = props.state) === null || _u === void 0 ? void 0 : _u.showSkeletons]);
2930
+ }, [props.data, (_v = props.state) === null || _v === void 0 ? void 0 : _v.isLoading, (_w = props.state) === null || _w === void 0 ? void 0 : _w.showSkeletons]);
2888
2931
  //@ts-ignore
2889
2932
  const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), {
2890
2933
  //@ts-ignore
2891
- columns: columnDefs, data, globalFilterFn: (_w = (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn]) !== null && _w !== void 0 ? _w : (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x.fuzzy, initialState, state: Object.assign({ columnFilterFns,
2934
+ columns: columnDefs, data, globalFilterFn: (_y = (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn]) !== null && _y !== void 0 ? _y : (_z = props.filterFns) === null || _z === void 0 ? void 0 : _z.fuzzy, initialState, state: Object.assign({ columnFilterFns,
2892
2935
  columnOrder,
2893
2936
  density,
2894
2937
  draggingColumn,
@@ -2912,7 +2955,7 @@ const MRT_TableRoot = (props) => {
2912
2955
  tableHeadCellRefs,
2913
2956
  tablePaperRef,
2914
2957
  topToolbarRef,
2915
- }, setColumnFilterFns: (_y = props.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns, setDensity: (_z = props.onDensityChange) !== null && _z !== void 0 ? _z : setDensity, setDraggingColumn: (_0 = props.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn, setDraggingRow: (_1 = props.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow, setEditingCell: (_2 = props.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell, setEditingRow: (_3 = props.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow, setGlobalFilterFn: (_4 = props.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn, setHoveredColumn: (_5 = props.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn, setHoveredRow: (_6 = props.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow, setIsFullScreen: (_7 = props.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen, setShowAlertBanner: (_8 = props.onShowAlertBannerChange) !== null && _8 !== void 0 ? _8 : setShowAlertBanner, setShowFilters: (_9 = props.onShowFiltersChange) !== null && _9 !== void 0 ? _9 : setShowFilters, setShowGlobalFilter: (_10 = props.onShowGlobalFilterChange) !== null && _10 !== void 0 ? _10 : setShowGlobalFilter, setShowToolbarDropZone: (_11 = props.onShowToolbarDropZoneChange) !== null && _11 !== void 0 ? _11 : setShowToolbarDropZone });
2958
+ }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowFilters: (_11 = props.onShowFiltersChange) !== null && _11 !== void 0 ? _11 : setShowFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
2916
2959
  if (props.tableInstanceRef) {
2917
2960
  props.tableInstanceRef.current = table;
2918
2961
  }
@@ -3059,5 +3102,5 @@ const MaterialReactTable = (_a) => {
3059
3102
  return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
3060
3103
  };
3061
3104
 
3062
- export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
3105
+ export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
3063
3106
  //# sourceMappingURL=material-react-table.esm.js.map