material-react-table 2.11.3 → 2.12.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 (37) hide show
  1. package/README.md +29 -22
  2. package/dist/index.d.ts +19 -2
  3. package/dist/index.esm.js +136 -105
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +137 -104
  6. package/dist/index.js.map +1 -1
  7. package/locales/hr/index.d.ts +3 -0
  8. package/locales/hr/index.esm.d.ts +3 -0
  9. package/locales/hr/index.esm.js +95 -0
  10. package/locales/hr/index.js +99 -0
  11. package/locales/hr/package.json +6 -0
  12. package/package.json +25 -25
  13. package/src/components/body/MRT_TableBodyCell.tsx +7 -0
  14. package/src/components/body/MRT_TableBodyRow.tsx +5 -0
  15. package/src/components/body/MRT_TableDetailPanel.tsx +2 -5
  16. package/src/components/head/MRT_TableHead.tsx +11 -11
  17. package/src/components/head/MRT_TableHeadCell.tsx +7 -0
  18. package/src/components/head/MRT_TableHeadCellFilterContainer.tsx +3 -4
  19. package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +61 -37
  20. package/src/components/inputs/MRT_FilterRangeFields.tsx +8 -2
  21. package/src/components/inputs/MRT_FilterTextField.tsx +41 -63
  22. package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -4
  23. package/src/components/table/MRT_TablePaper.tsx +4 -4
  24. package/src/components/toolbar/MRT_TablePagination.tsx +10 -12
  25. package/src/components/toolbar/MRT_ToolbarDropZone.tsx +5 -0
  26. package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -1
  27. package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -1
  28. package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +1 -1
  29. package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -1
  30. package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -1
  31. package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +1 -1
  32. package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -1
  33. package/src/hooks/useMRT_ColumnVirtualizer.ts +6 -8
  34. package/src/locales/hr.ts +96 -0
  35. package/src/types.ts +0 -1
  36. package/src/utils/column.utils.ts +86 -0
  37. package/src/utils/utils.ts +1 -1
package/dist/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  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';
2
+ import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
2
3
  import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
3
- import { useState, useMemo, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
5
  import IconButton from '@mui/material/IconButton';
6
6
  import Tooltip from '@mui/material/Tooltip';
@@ -169,6 +169,54 @@ const getDefaultColumnFilterFn = (columnDef) => {
169
169
  return 'equals';
170
170
  return 'fuzzy';
171
171
  };
172
+ const getColumnFilterInfo = ({ header, table, }) => {
173
+ var _a;
174
+ const { options: { columnFilterModeOptions }, } = table;
175
+ const { column } = header;
176
+ const { columnDef } = column;
177
+ const { filterVariant } = columnDef;
178
+ const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
179
+ const isAutocompleteFilter = filterVariant === 'autocomplete';
180
+ const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
181
+ ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
182
+ const isSelectFilter = filterVariant === 'select';
183
+ const isMultiSelectFilter = filterVariant === 'multi-select';
184
+ const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
185
+ (!isSelectFilter && !isMultiSelectFilter);
186
+ const currentFilterOption = columnDef._filterFn;
187
+ const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
188
+ const facetedUniqueValues = column.getFacetedUniqueValues();
189
+ return {
190
+ allowedColumnFilterOptions,
191
+ currentFilterOption,
192
+ facetedUniqueValues,
193
+ isAutocompleteFilter,
194
+ isDateFilter,
195
+ isMultiSelectFilter,
196
+ isRangeFilter,
197
+ isSelectFilter,
198
+ isTextboxFilter,
199
+ };
200
+ };
201
+ const useDropdownOptions = ({ header, table, }) => {
202
+ const { column } = header;
203
+ const { columnDef } = column;
204
+ const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
205
+ return useMemo(() => {
206
+ var _a;
207
+ return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
208
+ facetedUniqueValues
209
+ ? Array.from(facetedUniqueValues.keys())
210
+ .filter((value) => value !== null && value !== undefined)
211
+ .sort((a, b) => a.localeCompare(b))
212
+ : undefined);
213
+ }, [
214
+ columnDef.filterSelectOptions,
215
+ facetedUniqueValues,
216
+ isMultiSelectFilter,
217
+ isSelectFilter,
218
+ ]);
219
+ };
172
220
 
173
221
  const flexRender = flexRender$1;
174
222
  function createMRTColumnHelper() {
@@ -1597,22 +1645,23 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
1597
1645
 
1598
1646
  const useMRT_ColumnVirtualizer = (table) => {
1599
1647
  var _a, _b, _c, _d;
1600
- const { getLeftLeafColumns, getRightLeafColumns, getState, getVisibleLeafColumns, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
1601
- const { columnPinning, draggingColumn } = getState();
1648
+ const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
1649
+ const { columnPinning, columnVisibility, draggingColumn } = getState();
1602
1650
  if (!enableColumnVirtualization)
1603
1651
  return undefined;
1604
1652
  const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
1605
1653
  table,
1606
1654
  });
1607
- const visibleColumns = getVisibleLeafColumns();
1655
+ const visibleColumns = table.getVisibleLeafColumns();
1608
1656
  const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning
1609
1657
  ? [
1610
- getLeftLeafColumns().map((c) => c.getPinnedIndex()),
1611
- getRightLeafColumns()
1658
+ table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
1659
+ table
1660
+ .getRightVisibleLeafColumns()
1612
1661
  .map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
1613
1662
  .sort((a, b) => a - b),
1614
1663
  ]
1615
- : [[], []], [columnPinning, enableColumnPinning]);
1664
+ : [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
1616
1665
  const numPinnedLeft = leftPinnedIndexes.length;
1617
1666
  const numPinnedRight = rightPinnedIndexes.length;
1618
1667
  const draggingColumnIndex = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
@@ -2008,6 +2057,11 @@ const MRT_TableBodyCell = (_a) => {
2008
2057
  setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
2009
2058
  }
2010
2059
  };
2060
+ const handleDragOver = (e) => {
2061
+ if (columnDef.enableColumnOrdering !== false) {
2062
+ e.preventDefault();
2063
+ }
2064
+ };
2011
2065
  const handleContextMenu = (e) => {
2012
2066
  var _a;
2013
2067
  (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
@@ -2017,7 +2071,7 @@ const MRT_TableBodyCell = (_a) => {
2017
2071
  table.refs.actionCellRef.current = e.currentTarget;
2018
2072
  }
2019
2073
  };
2020
- return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
2074
+ return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
2021
2075
  outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
2022
2076
  (editDisplayMode === 'cell' && isEditable) ||
2023
2077
  (editDisplayMode === 'table' && (isCreating || isEditing))
@@ -2062,7 +2116,7 @@ const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell
2062
2116
 
2063
2117
  const MRT_TableDetailPanel = (_a) => {
2064
2118
  var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
2065
- const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
2119
+ const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
2066
2120
  const { isLoading } = getState();
2067
2121
  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
2068
2122
  isDetailPanel: true,
@@ -2087,9 +2141,7 @@ const MRT_TableDetailPanel = (_a) => {
2087
2141
  : undefined, transform: virtualRow
2088
2142
  ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
2089
2143
  : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
2090
- }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
2091
- ? 'all 150ms ease-in-out'
2092
- : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
2144
+ }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !virtualRow ? 'all 150ms ease-in-out' : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: virtualRow ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
2093
2145
  };
2094
2146
 
2095
2147
  const MRT_TableBodyRow = (_a) => {
@@ -2135,6 +2187,9 @@ const MRT_TableBodyRow = (_a) => {
2135
2187
  setHoveredRow(row);
2136
2188
  }
2137
2189
  };
2190
+ const handleDragOver = (e) => {
2191
+ e.preventDefault();
2192
+ };
2138
2193
  const rowRef = useRef(null);
2139
2194
  const cellHighlightColor = isRowSelected
2140
2195
  ? selectedRowBackgroundColor
@@ -2148,7 +2203,7 @@ const MRT_TableBodyRow = (_a) => {
2148
2203
  ? `${lighten(baseBackgroundColor, 0.3)}`
2149
2204
  : `${darken(baseBackgroundColor, 0.3)}`
2150
2205
  : undefined;
2151
- return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, ref: (node) => {
2206
+ return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
2152
2207
  if (node) {
2153
2208
  rowRef.current = node;
2154
2209
  rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
@@ -2743,40 +2798,20 @@ const MRT_FilterCheckbox = (_a) => {
2743
2798
  };
2744
2799
 
2745
2800
  const MRT_FilterTextField = (_a) => {
2746
- var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
2801
+ var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
2747
2802
  var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
2748
- const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
2803
+ const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
2749
2804
  const { column } = header;
2750
2805
  const { columnDef } = column;
2751
2806
  const { filterVariant } = columnDef;
2752
- const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
2753
- column,
2754
- table,
2755
- })), rest);
2756
- const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
2757
- column,
2758
- table,
2759
- }));
2760
- const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
2761
- column,
2762
- table,
2763
- }));
2764
- const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
2765
- column,
2766
- table,
2767
- }));
2768
- const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
2769
- column,
2770
- table,
2771
- }));
2772
- const isDateFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time'));
2773
- const isAutocompleteFilter = filterVariant === 'autocomplete';
2774
- const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
2775
- const isSelectFilter = filterVariant === 'select';
2776
- const isMultiSelectFilter = filterVariant === 'multi-select';
2777
- const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
2778
- (!isSelectFilter && !isMultiSelectFilter);
2779
- const currentFilterOption = columnDef._filterFn;
2807
+ const args = { column, rangeFilterIndex, table };
2808
+ const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
2809
+ const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
2810
+ const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
2811
+ const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
2812
+ const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
2813
+ const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
2814
+ const dropdownOptions = useDropdownOptions({ header, table });
2780
2815
  const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
2781
2816
  ? //@ts-ignore
2782
2817
  localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
@@ -2789,13 +2824,11 @@ const MRT_FilterTextField = (_a) => {
2789
2824
  : rangeFilterIndex === 1
2790
2825
  ? localization.max
2791
2826
  : '';
2792
- const allowedColumnFilterOptions = (_g = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _g !== void 0 ? _g : columnFilterModeOptions;
2793
- const showChangeModeButton = enableColumnFilterModes &&
2827
+ const showChangeModeButton = !!(enableColumnFilterModes &&
2794
2828
  columnDef.enableColumnFilterModes !== false &&
2795
2829
  !rangeFilterIndex &&
2796
2830
  (allowedColumnFilterOptions === undefined ||
2797
- !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
2798
- const facetedUniqueValues = column.getFacetedUniqueValues();
2831
+ !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
2799
2832
  const [anchorEl, setAnchorEl] = useState(null);
2800
2833
  const [filterValue, setFilterValue] = useState(() => {
2801
2834
  var _a, _b;
@@ -2882,23 +2915,9 @@ const MRT_FilterTextField = (_a) => {
2882
2915
  isMounted.current = true;
2883
2916
  }, [column.getFilterValue()]);
2884
2917
  if (columnDef.Filter) {
2885
- return (jsx(Fragment, { children: (_h = columnDef.Filter) === null || _h === void 0 ? void 0 : _h.call(columnDef, { column, header, rangeFilterIndex, table }) }));
2918
+ return (jsx(Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
2886
2919
  }
2887
- const dropdownOptions = useMemo(() => {
2888
- var _a;
2889
- return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
2890
- facetedUniqueValues
2891
- ? Array.from(facetedUniqueValues.keys())
2892
- .filter((value) => value !== null && value !== undefined)
2893
- .sort((a, b) => a.localeCompare(b))
2894
- : undefined);
2895
- }, [
2896
- columnDef.filterSelectOptions,
2897
- facetedUniqueValues,
2898
- isMultiSelectFilter,
2899
- isSelectFilter,
2900
- ]);
2901
- const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
2920
+ const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
2902
2921
  height: '2rem',
2903
2922
  transform: 'scale(0.9)',
2904
2923
  width: '2rem',
@@ -2914,7 +2933,7 @@ const MRT_FilterTextField = (_a) => {
2914
2933
  ? { endAdornment, startAdornment }
2915
2934
  : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}',
2916
2935
  // @ts-ignore
2917
- localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
2936
+ localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
2918
2937
  (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
2919
2938
  'aria-label': filterPlaceholder,
2920
2939
  autoComplete: 'new-password', // disable autocomplete and autofill
@@ -2948,15 +2967,15 @@ const MRT_FilterTextField = (_a) => {
2948
2967
  value: filterValue || null,
2949
2968
  };
2950
2969
  return (jsxs(Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsx(TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
2951
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
2952
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
2970
+ field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
2971
+ textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
2953
2972
  } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsx(DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
2954
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
2955
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
2973
+ field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
2974
+ textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
2956
2975
  } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
2957
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
2958
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
2959
- } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
2976
+ field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
2977
+ textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
2978
+ } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
2960
2979
  var _a;
2961
2980
  return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
2962
2981
  }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
@@ -2967,7 +2986,7 @@ const MRT_FilterTextField = (_a) => {
2967
2986
  : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
2968
2987
  jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
2969
2988
  ...[
2970
- (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
2989
+ (_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
2971
2990
  var _a;
2972
2991
  const { label, value } = getValueAndLabel(option);
2973
2992
  return (jsxs(MenuItem, { sx: {
@@ -2984,7 +3003,7 @@ const MRT_FilterTextField = (_a) => {
2984
3003
 
2985
3004
  const MRT_FilterRangeFields = (_a) => {
2986
3005
  var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
2987
- return (jsxs(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
3006
+ return (jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [0, 1].map((rangeFilterIndex) => (jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
2988
3007
  };
2989
3008
 
2990
3009
  const MRT_FilterRangeSlider = (_a) => {
@@ -3060,41 +3079,45 @@ const MRT_FilterRangeSlider = (_a) => {
3060
3079
  };
3061
3080
 
3062
3081
  const MRT_TableHeadCellFilterContainer = (_a) => {
3063
- var _b;
3064
3082
  var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3065
3083
  const { getState, options: { columnFilterDisplayMode }, } = table;
3066
3084
  const { showColumnFilters } = getState();
3067
3085
  const { column } = header;
3068
3086
  const { columnDef } = column;
3069
- return (jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
3070
- ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
3087
+ const { isRangeFilter } = getColumnFilterInfo({ header, table });
3088
+ return (jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
3071
3089
  };
3072
3090
 
3073
3091
  const MRT_TableHeadCellFilterLabel = (_a) => {
3074
- var _b, _c, _d;
3092
+ var _b, _c;
3075
3093
  var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3076
3094
  const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
3077
3095
  const { column } = header;
3078
3096
  const { columnDef } = column;
3079
3097
  const filterValue = column.getFilterValue();
3080
3098
  const [anchorEl, setAnchorEl] = useState(null);
3099
+ const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
3100
+ const dropdownOptions = useDropdownOptions({ header, table });
3101
+ const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
3102
+ (index !== undefined ? filterValue[index] : filterValue))).label;
3081
3103
  const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
3082
3104
  (!!filterValue && !Array.isArray(filterValue));
3083
- const isRangeFilter = ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
3084
- ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
3085
- const currentFilterOption = columnDef._filterFn;
3086
3105
  const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
3087
- ? (_c = localization.filterByColumn) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))
3106
+ ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
3088
3107
  : localization.filteringByColumn
3089
3108
  .replace('{column}', String(columnDef.header))
3090
3109
  .replace('{filterType}', currentFilterOption
3091
3110
  ? // @ts-ignore
3092
- localization[`filter${((_d = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) +
3111
+ localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
3093
3112
  (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
3094
3113
  : '')
3095
3114
  .replace('{filterValue}', `"${Array.isArray(filterValue)
3096
- ? filterValue.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
3097
- : filterValue}"`)
3115
+ ? filterValue
3116
+ .map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
3117
+ .join(`" ${isRangeFilter ? localization.and : localization.or} "`)
3118
+ : isSelectFilter
3119
+ ? getSelectLabel()
3120
+ : filterValue}"`)
3098
3121
  .replace('" "', '');
3099
3122
  return (jsxs(Fragment, { children: [jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
3100
3123
  (!!filterValue && !isRangeFilter) ||
@@ -3112,7 +3135,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
3112
3135
  (_d = (_c = filterInputRefs.current[`${column.id}-0`]) === null || _c === void 0 ? void 0 : _c.select) === null || _d === void 0 ? void 0 : _d.call(_c);
3113
3136
  });
3114
3137
  event.stopPropagation();
3115
- }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(FilterAltIcon, {}) })) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
3138
+ }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
3116
3139
  horizontal: 'center',
3117
3140
  vertical: 'top',
3118
3141
  }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
@@ -3122,7 +3145,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
3122
3145
  }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
3123
3146
  horizontal: 'center',
3124
3147
  vertical: 'bottom',
3125
- }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
3148
+ }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
3126
3149
  };
3127
3150
 
3128
3151
  const MRT_TableHeadCellGrabHandle = (_a) => {
@@ -3302,6 +3325,11 @@ const MRT_TableHeadCell = (_a) => {
3302
3325
  setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
3303
3326
  }
3304
3327
  };
3328
+ const handleDragOver = (e) => {
3329
+ if (columnDef.enableColumnOrdering !== false) {
3330
+ e.preventDefault();
3331
+ }
3332
+ };
3305
3333
  const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
3306
3334
  column,
3307
3335
  header,
@@ -3311,7 +3339,7 @@ const MRT_TableHeadCell = (_a) => {
3311
3339
  ? 'center'
3312
3340
  : theme.direction === 'rtl'
3313
3341
  ? 'right'
3314
- : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
3342
+ : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
3315
3343
  var _a;
3316
3344
  if (node) {
3317
3345
  tableHeadCellRefs.current[column.id] = node;
@@ -3454,7 +3482,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
3454
3482
 
3455
3483
  const MRT_TableHead = (_a) => {
3456
3484
  var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
3457
- const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
3485
+ const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
3458
3486
  const { isFullScreen, showAlertBanner } = getState();
3459
3487
  const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
3460
3488
  const stickyHeader = enableStickyHeader || isFullScreen;
@@ -3465,12 +3493,14 @@ const MRT_TableHead = (_a) => {
3465
3493
  tableHeadProps.ref.current = ref;
3466
3494
  }
3467
3495
  }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
3468
- (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
3496
+ (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
3469
3497
  display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
3470
3498
  }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
3471
3499
  display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
3472
3500
  padding: 0,
3473
- }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
3501
+ }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
3502
+ .getHeaderGroups()
3503
+ .map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
3474
3504
  };
3475
3505
 
3476
3506
  const MRT_Table = (_a) => {
@@ -3662,13 +3692,13 @@ const MRT_TablePagination = (_a) => {
3662
3692
  var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
3663
3693
  const theme = useTheme();
3664
3694
  const isMobile = useMediaQuery('(max-width: 720px)');
3665
- const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
3695
+ const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
3666
3696
  const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
3667
3697
  const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
3668
3698
  table,
3669
3699
  })), rest);
3670
- const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
3671
- const numberOfPages = Math.ceil(totalRowCount / pageSize);
3700
+ const totalRowCount = table.getRowCount();
3701
+ const numberOfPages = table.getPageCount();
3672
3702
  const showFirstLastPageButtons = numberOfPages > 2;
3673
3703
  const firstRowIndex = pageIndex * pageSize;
3674
3704
  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
@@ -3698,17 +3728,17 @@ const MRT_TablePagination = (_a) => {
3698
3728
  }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
3699
3729
  'aria-label': localization.rowsPerPage,
3700
3730
  id: 'mrt-rows-per-page',
3701
- }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
3731
+ }, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
3702
3732
  var _a;
3703
3733
  const value = typeof option !== 'number' ? option.value : option;
3704
3734
  const label = typeof option !== 'number' ? option.label : `${option}`;
3705
3735
  return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
3706
- }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
3736
+ }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
3707
3737
  first: FirstPageIcon,
3708
3738
  last: LastPageIcon,
3709
3739
  next: ChevronRightIcon,
3710
3740
  previous: ChevronLeftIcon,
3711
- } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
3741
+ } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
3712
3742
  };
3713
3743
 
3714
3744
  const MRT_ToolbarDropZone = (_a) => {
@@ -3719,6 +3749,9 @@ const MRT_ToolbarDropZone = (_a) => {
3719
3749
  const handleDragEnter = (_event) => {
3720
3750
  setHoveredColumn({ id: 'drop-zone' });
3721
3751
  };
3752
+ const handleDragOver = (e) => {
3753
+ e.preventDefault();
3754
+ };
3722
3755
  useEffect(() => {
3723
3756
  var _a;
3724
3757
  if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
@@ -3728,7 +3761,7 @@ const MRT_ToolbarDropZone = (_a) => {
3728
3761
  !grouping.includes(draggingColumn.id));
3729
3762
  }
3730
3763
  }, [enableGrouping, draggingColumn, grouping]);
3731
- return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
3764
+ return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
3732
3765
  };
3733
3766
 
3734
3767
  const MRT_BottomToolbar = (_a) => {
@@ -3783,9 +3816,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
3783
3816
  const { columnOrder } = getState();
3784
3817
  const { columnDef } = column;
3785
3818
  const { columnDefType } = columnDef;
3786
- const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
3787
- (columnDefType === 'group' &&
3788
- column.getLeafColumns().some((col) => col.getIsVisible()));
3819
+ const switchChecked = column.getIsVisible();
3789
3820
  const handleToggleColumnHidden = (column) => {
3790
3821
  var _a, _b;
3791
3822
  if (columnDefType === 'group') {
@@ -4073,16 +4104,16 @@ const MRT_TablePaper = (_a) => {
4073
4104
  }, style: Object.assign(Object.assign({}, (isFullScreen
4074
4105
  ? {
4075
4106
  bottom: 0,
4076
- height: '100vh',
4107
+ height: '100dvh',
4077
4108
  left: 0,
4078
4109
  margin: 0,
4079
- maxHeight: '100vh',
4080
- maxWidth: '100vw',
4110
+ maxHeight: '100dvh',
4111
+ maxWidth: '100dvw',
4081
4112
  padding: 0,
4082
4113
  position: 'fixed',
4083
4114
  right: 0,
4084
4115
  top: 0,
4085
- width: '100vw',
4116
+ width: '100dvw',
4086
4117
  zIndex: 999,
4087
4118
  }
4088
4119
  : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
@@ -4102,5 +4133,5 @@ const MaterialReactTable = (props) => {
4102
4133
  return jsx(MRT_TablePaper, { table: table });
4103
4134
  };
4104
4135
 
4105
- export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
4136
+ export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
4106
4137
  //# sourceMappingURL=index.esm.js.map