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.
- package/README.md +29 -22
- package/dist/index.d.ts +19 -2
- package/dist/index.esm.js +136 -105
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +137 -104
- package/dist/index.js.map +1 -1
- package/locales/hr/index.d.ts +3 -0
- package/locales/hr/index.esm.d.ts +3 -0
- package/locales/hr/index.esm.js +95 -0
- package/locales/hr/index.js +99 -0
- package/locales/hr/package.json +6 -0
- package/package.json +25 -25
- package/src/components/body/MRT_TableBodyCell.tsx +7 -0
- package/src/components/body/MRT_TableBodyRow.tsx +5 -0
- package/src/components/body/MRT_TableDetailPanel.tsx +2 -5
- package/src/components/head/MRT_TableHead.tsx +11 -11
- package/src/components/head/MRT_TableHeadCell.tsx +7 -0
- package/src/components/head/MRT_TableHeadCellFilterContainer.tsx +3 -4
- package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +61 -37
- package/src/components/inputs/MRT_FilterRangeFields.tsx +8 -2
- package/src/components/inputs/MRT_FilterTextField.tsx +41 -63
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -4
- package/src/components/table/MRT_TablePaper.tsx +4 -4
- package/src/components/toolbar/MRT_TablePagination.tsx +10 -12
- package/src/components/toolbar/MRT_ToolbarDropZone.tsx +5 -0
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -1
- package/src/hooks/useMRT_ColumnVirtualizer.ts +6 -8
- package/src/locales/hr.ts +96 -0
- package/src/types.ts +0 -1
- package/src/utils/column.utils.ts +86 -0
- 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 {
|
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
|
-
|
1611
|
-
|
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: {
|
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: !
|
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
|
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: {
|
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
|
2753
|
-
|
2754
|
-
|
2755
|
-
})),
|
2756
|
-
const
|
2757
|
-
|
2758
|
-
|
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
|
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: (
|
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
|
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${((
|
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() }, (
|
2952
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
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() }, (
|
2955
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
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() }, (
|
2958
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
2959
|
-
} }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (
|
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
|
-
(
|
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 (
|
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
|
-
|
3070
|
-
|
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
|
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
|
-
? (
|
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${((
|
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
|
3097
|
-
|
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 {
|
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 }) }) })) : (
|
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 {
|
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 =
|
3671
|
-
const numberOfPages =
|
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: () =>
|
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 =
|
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: '
|
4107
|
+
height: '100dvh',
|
4077
4108
|
left: 0,
|
4078
4109
|
margin: 0,
|
4079
|
-
maxHeight: '
|
4080
|
-
maxWidth: '
|
4110
|
+
maxHeight: '100dvh',
|
4111
|
+
maxWidth: '100dvw',
|
4081
4112
|
padding: 0,
|
4082
4113
|
position: 'fixed',
|
4083
4114
|
right: 0,
|
4084
4115
|
top: 0,
|
4085
|
-
width: '
|
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
|