material-react-table 2.11.3 → 2.12.1
Sign up to get free protection for your applications and to get access to all the features.
- 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.js
CHANGED
@@ -3,8 +3,8 @@
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
4
4
|
|
5
5
|
var reactTable = require('@tanstack/react-table');
|
6
|
-
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
7
6
|
var react = require('react');
|
7
|
+
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
9
9
|
var IconButton = require('@mui/material/IconButton');
|
10
10
|
var Tooltip = require('@mui/material/Tooltip');
|
@@ -259,6 +259,54 @@ const getDefaultColumnFilterFn = (columnDef) => {
|
|
259
259
|
return 'equals';
|
260
260
|
return 'fuzzy';
|
261
261
|
};
|
262
|
+
const getColumnFilterInfo = ({ header, table, }) => {
|
263
|
+
var _a;
|
264
|
+
const { options: { columnFilterModeOptions }, } = table;
|
265
|
+
const { column } = header;
|
266
|
+
const { columnDef } = column;
|
267
|
+
const { filterVariant } = columnDef;
|
268
|
+
const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
|
269
|
+
const isAutocompleteFilter = filterVariant === 'autocomplete';
|
270
|
+
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
|
271
|
+
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
|
272
|
+
const isSelectFilter = filterVariant === 'select';
|
273
|
+
const isMultiSelectFilter = filterVariant === 'multi-select';
|
274
|
+
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
|
275
|
+
(!isSelectFilter && !isMultiSelectFilter);
|
276
|
+
const currentFilterOption = columnDef._filterFn;
|
277
|
+
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
|
278
|
+
const facetedUniqueValues = column.getFacetedUniqueValues();
|
279
|
+
return {
|
280
|
+
allowedColumnFilterOptions,
|
281
|
+
currentFilterOption,
|
282
|
+
facetedUniqueValues,
|
283
|
+
isAutocompleteFilter,
|
284
|
+
isDateFilter,
|
285
|
+
isMultiSelectFilter,
|
286
|
+
isRangeFilter,
|
287
|
+
isSelectFilter,
|
288
|
+
isTextboxFilter,
|
289
|
+
};
|
290
|
+
};
|
291
|
+
const useDropdownOptions = ({ header, table, }) => {
|
292
|
+
const { column } = header;
|
293
|
+
const { columnDef } = column;
|
294
|
+
const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
295
|
+
return react.useMemo(() => {
|
296
|
+
var _a;
|
297
|
+
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
|
298
|
+
facetedUniqueValues
|
299
|
+
? Array.from(facetedUniqueValues.keys())
|
300
|
+
.filter((value) => value !== null && value !== undefined)
|
301
|
+
.sort((a, b) => a.localeCompare(b))
|
302
|
+
: undefined);
|
303
|
+
}, [
|
304
|
+
columnDef.filterSelectOptions,
|
305
|
+
facetedUniqueValues,
|
306
|
+
isMultiSelectFilter,
|
307
|
+
isSelectFilter,
|
308
|
+
]);
|
309
|
+
};
|
262
310
|
|
263
311
|
const flexRender = reactTable.flexRender;
|
264
312
|
function createMRTColumnHelper() {
|
@@ -1687,22 +1735,23 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
1687
1735
|
|
1688
1736
|
const useMRT_ColumnVirtualizer = (table) => {
|
1689
1737
|
var _a, _b, _c, _d;
|
1690
|
-
const {
|
1691
|
-
const { columnPinning, draggingColumn } = getState();
|
1738
|
+
const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
|
1739
|
+
const { columnPinning, columnVisibility, draggingColumn } = getState();
|
1692
1740
|
if (!enableColumnVirtualization)
|
1693
1741
|
return undefined;
|
1694
1742
|
const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
|
1695
1743
|
table,
|
1696
1744
|
});
|
1697
|
-
const visibleColumns = getVisibleLeafColumns();
|
1745
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
1698
1746
|
const [leftPinnedIndexes, rightPinnedIndexes] = react.useMemo(() => enableColumnPinning
|
1699
1747
|
? [
|
1700
|
-
|
1701
|
-
|
1748
|
+
table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
|
1749
|
+
table
|
1750
|
+
.getRightVisibleLeafColumns()
|
1702
1751
|
.map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
|
1703
1752
|
.sort((a, b) => a - b),
|
1704
1753
|
]
|
1705
|
-
: [[], []], [columnPinning, enableColumnPinning]);
|
1754
|
+
: [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
|
1706
1755
|
const numPinnedLeft = leftPinnedIndexes.length;
|
1707
1756
|
const numPinnedRight = rightPinnedIndexes.length;
|
1708
1757
|
const draggingColumnIndex = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
|
@@ -2098,6 +2147,11 @@ const MRT_TableBodyCell = (_a) => {
|
|
2098
2147
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2099
2148
|
}
|
2100
2149
|
};
|
2150
|
+
const handleDragOver = (e) => {
|
2151
|
+
if (columnDef.enableColumnOrdering !== false) {
|
2152
|
+
e.preventDefault();
|
2153
|
+
}
|
2154
|
+
};
|
2101
2155
|
const handleContextMenu = (e) => {
|
2102
2156
|
var _a;
|
2103
2157
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
|
@@ -2107,7 +2161,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
2107
2161
|
table.refs.actionCellRef.current = e.currentTarget;
|
2108
2162
|
}
|
2109
2163
|
};
|
2110
|
-
return (jsxRuntime.jsx(TableCell__default["default"], 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': {
|
2164
|
+
return (jsxRuntime.jsx(TableCell__default["default"], 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': {
|
2111
2165
|
outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
|
2112
2166
|
(editDisplayMode === 'cell' && isEditable) ||
|
2113
2167
|
(editDisplayMode === 'table' && (isCreating || isEditing))
|
@@ -2152,7 +2206,7 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
|
|
2152
2206
|
|
2153
2207
|
const MRT_TableDetailPanel = (_a) => {
|
2154
2208
|
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2155
|
-
const { getState, getVisibleLeafColumns, options: {
|
2209
|
+
const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2156
2210
|
const { isLoading } = getState();
|
2157
2211
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
2158
2212
|
isDetailPanel: true,
|
@@ -2177,9 +2231,7 @@ const MRT_TableDetailPanel = (_a) => {
|
|
2177
2231
|
: undefined, transform: virtualRow
|
2178
2232
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
2179
2233
|
: undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
2180
|
-
}, children: jsxRuntime.jsx(TableCell__default["default"], 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: !
|
2181
|
-
? 'all 150ms ease-in-out'
|
2182
|
-
: undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
2234
|
+
}, children: jsxRuntime.jsx(TableCell__default["default"], 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) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
2183
2235
|
};
|
2184
2236
|
|
2185
2237
|
const MRT_TableBodyRow = (_a) => {
|
@@ -2225,6 +2277,9 @@ const MRT_TableBodyRow = (_a) => {
|
|
2225
2277
|
setHoveredRow(row);
|
2226
2278
|
}
|
2227
2279
|
};
|
2280
|
+
const handleDragOver = (e) => {
|
2281
|
+
e.preventDefault();
|
2282
|
+
};
|
2228
2283
|
const rowRef = react.useRef(null);
|
2229
2284
|
const cellHighlightColor = isRowSelected
|
2230
2285
|
? selectedRowBackgroundColor
|
@@ -2238,7 +2293,7 @@ const MRT_TableBodyRow = (_a) => {
|
|
2238
2293
|
? `${styles.lighten(baseBackgroundColor, 0.3)}`
|
2239
2294
|
: `${styles.darken(baseBackgroundColor, 0.3)}`
|
2240
2295
|
: undefined;
|
2241
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, ref: (node) => {
|
2296
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
2242
2297
|
if (node) {
|
2243
2298
|
rowRef.current = node;
|
2244
2299
|
rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
|
@@ -2833,40 +2888,20 @@ const MRT_FilterCheckbox = (_a) => {
|
|
2833
2888
|
};
|
2834
2889
|
|
2835
2890
|
const MRT_FilterTextField = (_a) => {
|
2836
|
-
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t
|
2891
|
+
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
2837
2892
|
var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
|
2838
|
-
const { options: {
|
2893
|
+
const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
|
2839
2894
|
const { column } = header;
|
2840
2895
|
const { columnDef } = column;
|
2841
2896
|
const { filterVariant } = columnDef;
|
2842
|
-
const
|
2843
|
-
|
2844
|
-
|
2845
|
-
})),
|
2846
|
-
const
|
2847
|
-
|
2848
|
-
|
2849
|
-
})
|
2850
|
-
const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
|
2851
|
-
column,
|
2852
|
-
table,
|
2853
|
-
}));
|
2854
|
-
const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
|
2855
|
-
column,
|
2856
|
-
table,
|
2857
|
-
}));
|
2858
|
-
const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
|
2859
|
-
column,
|
2860
|
-
table,
|
2861
|
-
}));
|
2862
|
-
const isDateFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time'));
|
2863
|
-
const isAutocompleteFilter = filterVariant === 'autocomplete';
|
2864
|
-
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
|
2865
|
-
const isSelectFilter = filterVariant === 'select';
|
2866
|
-
const isMultiSelectFilter = filterVariant === 'multi-select';
|
2867
|
-
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
|
2868
|
-
(!isSelectFilter && !isMultiSelectFilter);
|
2869
|
-
const currentFilterOption = columnDef._filterFn;
|
2897
|
+
const args = { column, rangeFilterIndex, table };
|
2898
|
+
const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
|
2899
|
+
const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
|
2900
|
+
const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
|
2901
|
+
const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
|
2902
|
+
const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
|
2903
|
+
const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
|
2904
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
2870
2905
|
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
2871
2906
|
? //@ts-ignore
|
2872
2907
|
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()) +
|
@@ -2879,13 +2914,11 @@ const MRT_FilterTextField = (_a) => {
|
|
2879
2914
|
: rangeFilterIndex === 1
|
2880
2915
|
? localization.max
|
2881
2916
|
: '';
|
2882
|
-
const
|
2883
|
-
const showChangeModeButton = enableColumnFilterModes &&
|
2917
|
+
const showChangeModeButton = !!(enableColumnFilterModes &&
|
2884
2918
|
columnDef.enableColumnFilterModes !== false &&
|
2885
2919
|
!rangeFilterIndex &&
|
2886
2920
|
(allowedColumnFilterOptions === undefined ||
|
2887
|
-
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
2888
|
-
const facetedUniqueValues = column.getFacetedUniqueValues();
|
2921
|
+
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
|
2889
2922
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
2890
2923
|
const [filterValue, setFilterValue] = react.useState(() => {
|
2891
2924
|
var _a, _b;
|
@@ -2972,23 +3005,9 @@ const MRT_FilterTextField = (_a) => {
|
|
2972
3005
|
isMounted.current = true;
|
2973
3006
|
}, [column.getFilterValue()]);
|
2974
3007
|
if (columnDef.Filter) {
|
2975
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (
|
3008
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
|
2976
3009
|
}
|
2977
|
-
const
|
2978
|
-
var _a;
|
2979
|
-
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
|
2980
|
-
facetedUniqueValues
|
2981
|
-
? Array.from(facetedUniqueValues.keys())
|
2982
|
-
.filter((value) => value !== null && value !== undefined)
|
2983
|
-
.sort((a, b) => a.localeCompare(b))
|
2984
|
-
: undefined);
|
2985
|
-
}, [
|
2986
|
-
columnDef.filterSelectOptions,
|
2987
|
-
facetedUniqueValues,
|
2988
|
-
isMultiSelectFilter,
|
2989
|
-
isSelectFilter,
|
2990
|
-
]);
|
2991
|
-
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "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: {
|
3010
|
+
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "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: {
|
2992
3011
|
height: '2rem',
|
2993
3012
|
transform: 'scale(0.9)',
|
2994
3013
|
width: '2rem',
|
@@ -3004,7 +3023,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3004
3023
|
? { endAdornment, startAdornment }
|
3005
3024
|
: { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}',
|
3006
3025
|
// @ts-ignore
|
3007
|
-
localization[`filter${((
|
3026
|
+
localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
|
3008
3027
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
|
3009
3028
|
'aria-label': filterPlaceholder,
|
3010
3029
|
autoComplete: 'new-password', // disable autocomplete and autofill
|
@@ -3038,15 +3057,15 @@ const MRT_FilterTextField = (_a) => {
|
|
3038
3057
|
value: filterValue || null,
|
3039
3058
|
};
|
3040
3059
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
|
3041
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3042
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3060
|
+
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),
|
3061
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
|
3043
3062
|
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
|
3044
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3045
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3063
|
+
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),
|
3064
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
|
3046
3065
|
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
|
3047
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3048
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3049
|
-
} }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (
|
3066
|
+
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),
|
3067
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
|
3068
|
+
} }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], 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) => {
|
3050
3069
|
var _a;
|
3051
3070
|
return (jsxRuntime.jsx(TextField__default["default"], 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() })));
|
3052
3071
|
}, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
|
@@ -3057,7 +3076,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3057
3076
|
: undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
|
3058
3077
|
jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
|
3059
3078
|
...[
|
3060
|
-
(
|
3079
|
+
(_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
|
3061
3080
|
var _a;
|
3062
3081
|
const { label, value } = getValueAndLabel(option);
|
3063
3082
|
return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
|
@@ -3074,7 +3093,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3074
3093
|
|
3075
3094
|
const MRT_FilterRangeFields = (_a) => {
|
3076
3095
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3077
|
-
return (jsxRuntime.
|
3096
|
+
return (jsxRuntime.jsx(Box__default["default"], 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) => (jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
|
3078
3097
|
};
|
3079
3098
|
|
3080
3099
|
const MRT_FilterRangeSlider = (_a) => {
|
@@ -3150,41 +3169,45 @@ const MRT_FilterRangeSlider = (_a) => {
|
|
3150
3169
|
};
|
3151
3170
|
|
3152
3171
|
const MRT_TableHeadCellFilterContainer = (_a) => {
|
3153
|
-
var _b;
|
3154
3172
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3155
3173
|
const { getState, options: { columnFilterDisplayMode }, } = table;
|
3156
3174
|
const { showColumnFilters } = getState();
|
3157
3175
|
const { column } = header;
|
3158
3176
|
const { columnDef } = column;
|
3159
|
-
|
3160
|
-
|
3177
|
+
const { isRangeFilter } = getColumnFilterInfo({ header, table });
|
3178
|
+
return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
|
3161
3179
|
};
|
3162
3180
|
|
3163
3181
|
const MRT_TableHeadCellFilterLabel = (_a) => {
|
3164
|
-
var _b, _c
|
3182
|
+
var _b, _c;
|
3165
3183
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3166
3184
|
const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
|
3167
3185
|
const { column } = header;
|
3168
3186
|
const { columnDef } = column;
|
3169
3187
|
const filterValue = column.getFilterValue();
|
3170
3188
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
3189
|
+
const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
3190
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
3191
|
+
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
|
3192
|
+
(index !== undefined ? filterValue[index] : filterValue))).label;
|
3171
3193
|
const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
|
3172
3194
|
(!!filterValue && !Array.isArray(filterValue));
|
3173
|
-
const isRangeFilter = ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
|
3174
|
-
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
|
3175
|
-
const currentFilterOption = columnDef._filterFn;
|
3176
3195
|
const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
|
3177
|
-
? (
|
3196
|
+
? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
|
3178
3197
|
: localization.filteringByColumn
|
3179
3198
|
.replace('{column}', String(columnDef.header))
|
3180
3199
|
.replace('{filterType}', currentFilterOption
|
3181
3200
|
? // @ts-ignore
|
3182
|
-
localization[`filter${((
|
3201
|
+
localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
3183
3202
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
|
3184
3203
|
: '')
|
3185
3204
|
.replace('{filterValue}', `"${Array.isArray(filterValue)
|
3186
|
-
? filterValue
|
3187
|
-
|
3205
|
+
? filterValue
|
3206
|
+
.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
|
3207
|
+
.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
3208
|
+
: isSelectFilter
|
3209
|
+
? getSelectLabel()
|
3210
|
+
: filterValue}"`)
|
3188
3211
|
.replace('" "', '');
|
3189
3212
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
|
3190
3213
|
(!!filterValue && !isRangeFilter) ||
|
@@ -3202,7 +3225,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3202
3225
|
(_d = (_c = filterInputRefs.current[`${column.id}-0`]) === null || _c === void 0 ? void 0 : _c.select) === null || _d === void 0 ? void 0 : _d.call(_c);
|
3203
3226
|
});
|
3204
3227
|
event.stopPropagation();
|
3205
|
-
}, 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: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
|
3228
|
+
}, 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: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
|
3206
3229
|
horizontal: 'center',
|
3207
3230
|
vertical: 'top',
|
3208
3231
|
}, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
|
@@ -3212,7 +3235,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3212
3235
|
}, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
|
3213
3236
|
horizontal: 'center',
|
3214
3237
|
vertical: 'bottom',
|
3215
|
-
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
|
3238
|
+
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
|
3216
3239
|
};
|
3217
3240
|
|
3218
3241
|
const MRT_TableHeadCellGrabHandle = (_a) => {
|
@@ -3392,6 +3415,11 @@ const MRT_TableHeadCell = (_a) => {
|
|
3392
3415
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
3393
3416
|
}
|
3394
3417
|
};
|
3418
|
+
const handleDragOver = (e) => {
|
3419
|
+
if (columnDef.enableColumnOrdering !== false) {
|
3420
|
+
e.preventDefault();
|
3421
|
+
}
|
3422
|
+
};
|
3395
3423
|
const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
|
3396
3424
|
column,
|
3397
3425
|
header,
|
@@ -3401,7 +3429,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3401
3429
|
? 'center'
|
3402
3430
|
: theme.direction === 'rtl'
|
3403
3431
|
? 'right'
|
3404
|
-
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
|
3432
|
+
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
3405
3433
|
var _a;
|
3406
3434
|
if (node) {
|
3407
3435
|
tableHeadCellRefs.current[column.id] = node;
|
@@ -3544,7 +3572,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3544
3572
|
|
3545
3573
|
const MRT_TableHead = (_a) => {
|
3546
3574
|
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
3547
|
-
const {
|
3575
|
+
const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
|
3548
3576
|
const { isFullScreen, showAlertBanner } = getState();
|
3549
3577
|
const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
|
3550
3578
|
const stickyHeader = enableStickyHeader || isFullScreen;
|
@@ -3555,12 +3583,14 @@ const MRT_TableHead = (_a) => {
|
|
3555
3583
|
tableHeadProps.ref.current = ref;
|
3556
3584
|
}
|
3557
3585
|
}, 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' &&
|
3558
|
-
(showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
3586
|
+
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
3559
3587
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3560
3588
|
}, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
|
3561
3589
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3562
3590
|
padding: 0,
|
3563
|
-
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (
|
3591
|
+
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
|
3592
|
+
.getHeaderGroups()
|
3593
|
+
.map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
|
3564
3594
|
};
|
3565
3595
|
|
3566
3596
|
const MRT_Table = (_a) => {
|
@@ -3752,13 +3782,13 @@ const MRT_TablePagination = (_a) => {
|
|
3752
3782
|
var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
|
3753
3783
|
const theme = styles.useTheme();
|
3754
3784
|
const isMobile = useMediaQuery__default["default"]('(max-width: 720px)');
|
3755
|
-
const {
|
3785
|
+
const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
|
3756
3786
|
const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
|
3757
3787
|
const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
|
3758
3788
|
table,
|
3759
3789
|
})), rest);
|
3760
|
-
const totalRowCount =
|
3761
|
-
const numberOfPages =
|
3790
|
+
const totalRowCount = table.getRowCount();
|
3791
|
+
const numberOfPages = table.getPageCount();
|
3762
3792
|
const showFirstLastPageButtons = numberOfPages > 2;
|
3763
3793
|
const firstRowIndex = pageIndex * pageSize;
|
3764
3794
|
const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
|
@@ -3788,17 +3818,17 @@ const MRT_TablePagination = (_a) => {
|
|
3788
3818
|
}, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
|
3789
3819
|
'aria-label': localization.rowsPerPage,
|
3790
3820
|
id: 'mrt-rows-per-page',
|
3791
|
-
}, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
|
3821
|
+
}, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
|
3792
3822
|
var _a;
|
3793
3823
|
const value = typeof option !== 'number' ? option.value : option;
|
3794
3824
|
const label = typeof option !== 'number' ? option.label : `${option}`;
|
3795
3825
|
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) ? (jsxRuntime.jsx("option", { value: value, children: label }, value)) : (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: label }, value))));
|
3796
|
-
}) }))] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
|
3826
|
+
}) }))] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
|
3797
3827
|
first: FirstPageIcon,
|
3798
3828
|
last: LastPageIcon,
|
3799
3829
|
next: ChevronRightIcon,
|
3800
3830
|
previous: ChevronLeftIcon,
|
3801
|
-
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () =>
|
3831
|
+
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsxRuntime.jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsxRuntime.jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
|
3802
3832
|
};
|
3803
3833
|
|
3804
3834
|
const MRT_ToolbarDropZone = (_a) => {
|
@@ -3809,6 +3839,9 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3809
3839
|
const handleDragEnter = (_event) => {
|
3810
3840
|
setHoveredColumn({ id: 'drop-zone' });
|
3811
3841
|
};
|
3842
|
+
const handleDragOver = (e) => {
|
3843
|
+
e.preventDefault();
|
3844
|
+
};
|
3812
3845
|
react.useEffect(() => {
|
3813
3846
|
var _a;
|
3814
3847
|
if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
|
@@ -3818,7 +3851,7 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3818
3851
|
!grouping.includes(draggingColumn.id));
|
3819
3852
|
}
|
3820
3853
|
}, [enableGrouping, draggingColumn, grouping]);
|
3821
|
-
return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.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: jsxRuntime.jsx(Typography__default["default"], { 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 : '') }) })) }));
|
3854
|
+
return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.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: jsxRuntime.jsx(Typography__default["default"], { 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 : '') }) })) }));
|
3822
3855
|
};
|
3823
3856
|
|
3824
3857
|
const MRT_BottomToolbar = (_a) => {
|
@@ -3873,9 +3906,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3873
3906
|
const { columnOrder } = getState();
|
3874
3907
|
const { columnDef } = column;
|
3875
3908
|
const { columnDefType } = columnDef;
|
3876
|
-
const switchChecked =
|
3877
|
-
(columnDefType === 'group' &&
|
3878
|
-
column.getLeafColumns().some((col) => col.getIsVisible()));
|
3909
|
+
const switchChecked = column.getIsVisible();
|
3879
3910
|
const handleToggleColumnHidden = (column) => {
|
3880
3911
|
var _a, _b;
|
3881
3912
|
if (columnDefType === 'group') {
|
@@ -4163,16 +4194,16 @@ const MRT_TablePaper = (_a) => {
|
|
4163
4194
|
}, style: Object.assign(Object.assign({}, (isFullScreen
|
4164
4195
|
? {
|
4165
4196
|
bottom: 0,
|
4166
|
-
height: '
|
4197
|
+
height: '100dvh',
|
4167
4198
|
left: 0,
|
4168
4199
|
margin: 0,
|
4169
|
-
maxHeight: '
|
4170
|
-
maxWidth: '
|
4200
|
+
maxHeight: '100dvh',
|
4201
|
+
maxWidth: '100dvw',
|
4171
4202
|
padding: 0,
|
4172
4203
|
position: 'fixed',
|
4173
4204
|
right: 0,
|
4174
4205
|
top: 0,
|
4175
|
-
width: '
|
4206
|
+
width: '100dvw',
|
4176
4207
|
zIndex: 999,
|
4177
4208
|
}
|
4178
4209
|
: {})), 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 &&
|
@@ -4264,6 +4295,7 @@ exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
|
|
4264
4295
|
exports.flexRender = flexRender;
|
4265
4296
|
exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
|
4266
4297
|
exports.getCanRankRows = getCanRankRows;
|
4298
|
+
exports.getColumnFilterInfo = getColumnFilterInfo;
|
4267
4299
|
exports.getColumnId = getColumnId;
|
4268
4300
|
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
4269
4301
|
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
@@ -4287,6 +4319,7 @@ exports.showRowNumbersColumn = showRowNumbersColumn;
|
|
4287
4319
|
exports.showRowPinningColumn = showRowPinningColumn;
|
4288
4320
|
exports.showRowSelectionColumn = showRowSelectionColumn;
|
4289
4321
|
exports.showRowSpacerColumn = showRowSpacerColumn;
|
4322
|
+
exports.useDropdownOptions = useDropdownOptions;
|
4290
4323
|
exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
|
4291
4324
|
exports.useMRT_Effects = useMRT_Effects;
|
4292
4325
|
exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
|