material-react-table 2.11.3 → 2.12.0
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 -1
- package/dist/index.esm.js +116 -70
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +117 -69
- package/dist/index.js.map +1 -1
- package/package.json +16 -16
- 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 +29 -38
- package/src/components/table/MRT_TablePaper.tsx +4 -4
- 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/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() {
|
@@ -2098,6 +2146,11 @@ const MRT_TableBodyCell = (_a) => {
|
|
2098
2146
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2099
2147
|
}
|
2100
2148
|
};
|
2149
|
+
const handleDragOver = (e) => {
|
2150
|
+
if (columnDef.enableColumnOrdering !== false) {
|
2151
|
+
e.preventDefault();
|
2152
|
+
}
|
2153
|
+
};
|
2101
2154
|
const handleContextMenu = (e) => {
|
2102
2155
|
var _a;
|
2103
2156
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
|
@@ -2107,7 +2160,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
2107
2160
|
table.refs.actionCellRef.current = e.currentTarget;
|
2108
2161
|
}
|
2109
2162
|
};
|
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': {
|
2163
|
+
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
2164
|
outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
|
2112
2165
|
(editDisplayMode === 'cell' && isEditable) ||
|
2113
2166
|
(editDisplayMode === 'table' && (isCreating || isEditing))
|
@@ -2152,7 +2205,7 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
|
|
2152
2205
|
|
2153
2206
|
const MRT_TableDetailPanel = (_a) => {
|
2154
2207
|
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2155
|
-
const { getState, getVisibleLeafColumns, options: {
|
2208
|
+
const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2156
2209
|
const { isLoading } = getState();
|
2157
2210
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
2158
2211
|
isDetailPanel: true,
|
@@ -2177,9 +2230,7 @@ const MRT_TableDetailPanel = (_a) => {
|
|
2177
2230
|
: undefined, transform: virtualRow
|
2178
2231
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
2179
2232
|
: 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 })) })) })));
|
2233
|
+
}, 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
2234
|
};
|
2184
2235
|
|
2185
2236
|
const MRT_TableBodyRow = (_a) => {
|
@@ -2225,6 +2276,9 @@ const MRT_TableBodyRow = (_a) => {
|
|
2225
2276
|
setHoveredRow(row);
|
2226
2277
|
}
|
2227
2278
|
};
|
2279
|
+
const handleDragOver = (e) => {
|
2280
|
+
e.preventDefault();
|
2281
|
+
};
|
2228
2282
|
const rowRef = react.useRef(null);
|
2229
2283
|
const cellHighlightColor = isRowSelected
|
2230
2284
|
? selectedRowBackgroundColor
|
@@ -2238,7 +2292,7 @@ const MRT_TableBodyRow = (_a) => {
|
|
2238
2292
|
? `${styles.lighten(baseBackgroundColor, 0.3)}`
|
2239
2293
|
: `${styles.darken(baseBackgroundColor, 0.3)}`
|
2240
2294
|
: 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) => {
|
2295
|
+
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
2296
|
if (node) {
|
2243
2297
|
rowRef.current = node;
|
2244
2298
|
rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
|
@@ -2833,9 +2887,9 @@ const MRT_FilterCheckbox = (_a) => {
|
|
2833
2887
|
};
|
2834
2888
|
|
2835
2889
|
const MRT_FilterTextField = (_a) => {
|
2836
|
-
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t
|
2890
|
+
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
2837
2891
|
var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
|
2838
|
-
const { options: {
|
2892
|
+
const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
|
2839
2893
|
const { column } = header;
|
2840
2894
|
const { columnDef } = column;
|
2841
2895
|
const { filterVariant } = columnDef;
|
@@ -2859,14 +2913,8 @@ const MRT_FilterTextField = (_a) => {
|
|
2859
2913
|
column,
|
2860
2914
|
table,
|
2861
2915
|
}));
|
2862
|
-
const
|
2863
|
-
const
|
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;
|
2916
|
+
const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
|
2917
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
2870
2918
|
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
2871
2919
|
? //@ts-ignore
|
2872
2920
|
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 +2927,11 @@ const MRT_FilterTextField = (_a) => {
|
|
2879
2927
|
: rangeFilterIndex === 1
|
2880
2928
|
? localization.max
|
2881
2929
|
: '';
|
2882
|
-
const
|
2883
|
-
const showChangeModeButton = enableColumnFilterModes &&
|
2930
|
+
const showChangeModeButton = !!(enableColumnFilterModes &&
|
2884
2931
|
columnDef.enableColumnFilterModes !== false &&
|
2885
2932
|
!rangeFilterIndex &&
|
2886
2933
|
(allowedColumnFilterOptions === undefined ||
|
2887
|
-
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
2888
|
-
const facetedUniqueValues = column.getFacetedUniqueValues();
|
2934
|
+
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
|
2889
2935
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
2890
2936
|
const [filterValue, setFilterValue] = react.useState(() => {
|
2891
2937
|
var _a, _b;
|
@@ -2972,23 +3018,9 @@ const MRT_FilterTextField = (_a) => {
|
|
2972
3018
|
isMounted.current = true;
|
2973
3019
|
}, [column.getFilterValue()]);
|
2974
3020
|
if (columnDef.Filter) {
|
2975
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (
|
3021
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
|
2976
3022
|
}
|
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: {
|
3023
|
+
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
3024
|
height: '2rem',
|
2993
3025
|
transform: 'scale(0.9)',
|
2994
3026
|
width: '2rem',
|
@@ -3004,7 +3036,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3004
3036
|
? { endAdornment, startAdornment }
|
3005
3037
|
: { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}',
|
3006
3038
|
// @ts-ignore
|
3007
|
-
localization[`filter${((
|
3039
|
+
localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
|
3008
3040
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
|
3009
3041
|
'aria-label': filterPlaceholder,
|
3010
3042
|
autoComplete: 'new-password', // disable autocomplete and autofill
|
@@ -3038,15 +3070,15 @@ const MRT_FilterTextField = (_a) => {
|
|
3038
3070
|
value: filterValue || null,
|
3039
3071
|
};
|
3040
3072
|
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), (
|
3073
|
+
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),
|
3074
|
+
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
3075
|
} }))) : (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), (
|
3076
|
+
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),
|
3077
|
+
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
3078
|
} }))) : (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: (
|
3079
|
+
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),
|
3080
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
|
3081
|
+
} }))) : 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
3082
|
var _a;
|
3051
3083
|
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
3084
|
}, 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 +3089,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3057
3089
|
: undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
|
3058
3090
|
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
3091
|
...[
|
3060
|
-
(
|
3092
|
+
(_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
|
3061
3093
|
var _a;
|
3062
3094
|
const { label, value } = getValueAndLabel(option);
|
3063
3095
|
return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
|
@@ -3074,7 +3106,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3074
3106
|
|
3075
3107
|
const MRT_FilterRangeFields = (_a) => {
|
3076
3108
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3077
|
-
return (jsxRuntime.
|
3109
|
+
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
3110
|
};
|
3079
3111
|
|
3080
3112
|
const MRT_FilterRangeSlider = (_a) => {
|
@@ -3150,41 +3182,45 @@ const MRT_FilterRangeSlider = (_a) => {
|
|
3150
3182
|
};
|
3151
3183
|
|
3152
3184
|
const MRT_TableHeadCellFilterContainer = (_a) => {
|
3153
|
-
var _b;
|
3154
3185
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3155
3186
|
const { getState, options: { columnFilterDisplayMode }, } = table;
|
3156
3187
|
const { showColumnFilters } = getState();
|
3157
3188
|
const { column } = header;
|
3158
3189
|
const { columnDef } = column;
|
3159
|
-
|
3160
|
-
|
3190
|
+
const { isRangeFilter } = getColumnFilterInfo({ header, table });
|
3191
|
+
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
3192
|
};
|
3162
3193
|
|
3163
3194
|
const MRT_TableHeadCellFilterLabel = (_a) => {
|
3164
|
-
var _b, _c
|
3195
|
+
var _b, _c;
|
3165
3196
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3166
3197
|
const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
|
3167
3198
|
const { column } = header;
|
3168
3199
|
const { columnDef } = column;
|
3169
3200
|
const filterValue = column.getFilterValue();
|
3170
3201
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
3202
|
+
const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
3203
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
3204
|
+
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
|
3205
|
+
(index !== undefined ? filterValue[index] : filterValue))).label;
|
3171
3206
|
const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
|
3172
3207
|
(!!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
3208
|
const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
|
3177
|
-
? (
|
3209
|
+
? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
|
3178
3210
|
: localization.filteringByColumn
|
3179
3211
|
.replace('{column}', String(columnDef.header))
|
3180
3212
|
.replace('{filterType}', currentFilterOption
|
3181
3213
|
? // @ts-ignore
|
3182
|
-
localization[`filter${((
|
3214
|
+
localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
3183
3215
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
|
3184
3216
|
: '')
|
3185
3217
|
.replace('{filterValue}', `"${Array.isArray(filterValue)
|
3186
|
-
? filterValue
|
3187
|
-
|
3218
|
+
? filterValue
|
3219
|
+
.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
|
3220
|
+
.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
3221
|
+
: isSelectFilter
|
3222
|
+
? getSelectLabel()
|
3223
|
+
: filterValue}"`)
|
3188
3224
|
.replace('" "', '');
|
3189
3225
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
|
3190
3226
|
(!!filterValue && !isRangeFilter) ||
|
@@ -3202,7 +3238,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3202
3238
|
(_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
3239
|
});
|
3204
3240
|
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: {
|
3241
|
+
}, 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
3242
|
horizontal: 'center',
|
3207
3243
|
vertical: 'top',
|
3208
3244
|
}, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
|
@@ -3212,7 +3248,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3212
3248
|
}, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
|
3213
3249
|
horizontal: 'center',
|
3214
3250
|
vertical: 'bottom',
|
3215
|
-
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
|
3251
|
+
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
|
3216
3252
|
};
|
3217
3253
|
|
3218
3254
|
const MRT_TableHeadCellGrabHandle = (_a) => {
|
@@ -3392,6 +3428,11 @@ const MRT_TableHeadCell = (_a) => {
|
|
3392
3428
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
3393
3429
|
}
|
3394
3430
|
};
|
3431
|
+
const handleDragOver = (e) => {
|
3432
|
+
if (columnDef.enableColumnOrdering !== false) {
|
3433
|
+
e.preventDefault();
|
3434
|
+
}
|
3435
|
+
};
|
3395
3436
|
const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
|
3396
3437
|
column,
|
3397
3438
|
header,
|
@@ -3401,7 +3442,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3401
3442
|
? 'center'
|
3402
3443
|
: theme.direction === 'rtl'
|
3403
3444
|
? 'right'
|
3404
|
-
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
|
3445
|
+
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
3405
3446
|
var _a;
|
3406
3447
|
if (node) {
|
3407
3448
|
tableHeadCellRefs.current[column.id] = node;
|
@@ -3544,7 +3585,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3544
3585
|
|
3545
3586
|
const MRT_TableHead = (_a) => {
|
3546
3587
|
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
3547
|
-
const {
|
3588
|
+
const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
|
3548
3589
|
const { isFullScreen, showAlertBanner } = getState();
|
3549
3590
|
const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
|
3550
3591
|
const stickyHeader = enableStickyHeader || isFullScreen;
|
@@ -3555,12 +3596,14 @@ const MRT_TableHead = (_a) => {
|
|
3555
3596
|
tableHeadProps.ref.current = ref;
|
3556
3597
|
}
|
3557
3598
|
}, 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: {
|
3599
|
+
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
3559
3600
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3560
3601
|
}, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
|
3561
3602
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3562
3603
|
padding: 0,
|
3563
|
-
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (
|
3604
|
+
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
|
3605
|
+
.getHeaderGroups()
|
3606
|
+
.map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
|
3564
3607
|
};
|
3565
3608
|
|
3566
3609
|
const MRT_Table = (_a) => {
|
@@ -3809,6 +3852,9 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3809
3852
|
const handleDragEnter = (_event) => {
|
3810
3853
|
setHoveredColumn({ id: 'drop-zone' });
|
3811
3854
|
};
|
3855
|
+
const handleDragOver = (e) => {
|
3856
|
+
e.preventDefault();
|
3857
|
+
};
|
3812
3858
|
react.useEffect(() => {
|
3813
3859
|
var _a;
|
3814
3860
|
if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
|
@@ -3818,7 +3864,7 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3818
3864
|
!grouping.includes(draggingColumn.id));
|
3819
3865
|
}
|
3820
3866
|
}, [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 : '') }) })) }));
|
3867
|
+
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
3868
|
};
|
3823
3869
|
|
3824
3870
|
const MRT_BottomToolbar = (_a) => {
|
@@ -4163,16 +4209,16 @@ const MRT_TablePaper = (_a) => {
|
|
4163
4209
|
}, style: Object.assign(Object.assign({}, (isFullScreen
|
4164
4210
|
? {
|
4165
4211
|
bottom: 0,
|
4166
|
-
height: '
|
4212
|
+
height: '100dvh',
|
4167
4213
|
left: 0,
|
4168
4214
|
margin: 0,
|
4169
|
-
maxHeight: '
|
4170
|
-
maxWidth: '
|
4215
|
+
maxHeight: '100dvh',
|
4216
|
+
maxWidth: '100dvw',
|
4171
4217
|
padding: 0,
|
4172
4218
|
position: 'fixed',
|
4173
4219
|
right: 0,
|
4174
4220
|
top: 0,
|
4175
|
-
width: '
|
4221
|
+
width: '100dvw',
|
4176
4222
|
zIndex: 999,
|
4177
4223
|
}
|
4178
4224
|
: {})), 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 +4310,7 @@ exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
|
|
4264
4310
|
exports.flexRender = flexRender;
|
4265
4311
|
exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
|
4266
4312
|
exports.getCanRankRows = getCanRankRows;
|
4313
|
+
exports.getColumnFilterInfo = getColumnFilterInfo;
|
4267
4314
|
exports.getColumnId = getColumnId;
|
4268
4315
|
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
4269
4316
|
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
@@ -4287,6 +4334,7 @@ exports.showRowNumbersColumn = showRowNumbersColumn;
|
|
4287
4334
|
exports.showRowPinningColumn = showRowPinningColumn;
|
4288
4335
|
exports.showRowSelectionColumn = showRowSelectionColumn;
|
4289
4336
|
exports.showRowSpacerColumn = showRowSpacerColumn;
|
4337
|
+
exports.useDropdownOptions = useDropdownOptions;
|
4290
4338
|
exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
|
4291
4339
|
exports.useMRT_Effects = useMRT_Effects;
|
4292
4340
|
exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
|