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.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
|