material-react-table 1.7.4 → 1.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -13
- package/dist/cjs/index.js +84 -38
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/MaterialReactTable.d.ts +16 -8
- package/dist/cjs/types/body/MRT_TableBody.d.ts +3 -4
- package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +2 -3
- package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +4 -5
- package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts +2 -3
- package/dist/cjs/types/column.utils.d.ts +4 -4
- package/dist/cjs/types/footer/MRT_TableFooter.d.ts +2 -3
- package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts +2 -3
- package/dist/cjs/types/head/MRT_TableHead.d.ts +2 -3
- package/dist/cjs/types/head/MRT_TableHeadRow.d.ts +2 -3
- package/dist/cjs/types/table/MRT_TableRoot.d.ts +1 -272
- package/dist/esm/material-react-table.esm.js +82 -39
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/MaterialReactTable.d.ts +16 -8
- package/dist/esm/types/body/MRT_TableBody.d.ts +3 -4
- package/dist/esm/types/body/MRT_TableBodyCell.d.ts +2 -3
- package/dist/esm/types/body/MRT_TableBodyRow.d.ts +4 -5
- package/dist/esm/types/body/MRT_TableDetailPanel.d.ts +2 -3
- package/dist/esm/types/column.utils.d.ts +4 -4
- package/dist/esm/types/footer/MRT_TableFooter.d.ts +2 -3
- package/dist/esm/types/footer/MRT_TableFooterRow.d.ts +2 -3
- package/dist/esm/types/head/MRT_TableHead.d.ts +2 -3
- package/dist/esm/types/head/MRT_TableHeadRow.d.ts +2 -3
- package/dist/esm/types/table/MRT_TableRoot.d.ts +1 -272
- package/dist/index.d.ts +16 -7
- package/package.json +2 -2
- package/src/MaterialReactTable.tsx +44 -7
- package/src/body/MRT_TableBody.tsx +11 -10
- package/src/body/MRT_TableBodyCell.tsx +8 -12
- package/src/body/MRT_TableBodyCellValue.tsx +1 -0
- package/src/body/MRT_TableBodyRow.tsx +14 -7
- package/src/body/MRT_TableDetailPanel.tsx +2 -3
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +4 -1
- package/src/column.utils.ts +12 -9
- package/src/footer/MRT_TableFooter.tsx +2 -3
- package/src/footer/MRT_TableFooterRow.tsx +7 -3
- package/src/head/MRT_TableHead.tsx +2 -3
- package/src/head/MRT_TableHeadCellSortLabel.tsx +4 -0
- package/src/head/MRT_TableHeadRow.tsx +7 -3
- package/src/inputs/MRT_EditCellTextField.tsx +38 -2
- package/src/menus/MRT_FilterOptionMenu.tsx +14 -5
- package/src/menus/MRT_RowActionMenu.tsx +12 -10
- package/src/table/MRT_Table.tsx +2 -3
- package/src/table/MRT_TableRoot.tsx +33 -19
@@ -288,7 +288,12 @@ const MRT_DefaultDisplayColumn = {
|
|
288
288
|
enableResizing: false,
|
289
289
|
enableSorting: false,
|
290
290
|
};
|
291
|
-
const parseCSSVarId = (id) => id
|
291
|
+
const parseCSSVarId = (id) => id
|
292
|
+
.replaceAll('.', '_')
|
293
|
+
.replaceAll(' ', '_')
|
294
|
+
.replaceAll('+', '_')
|
295
|
+
.replaceAll('(', '_')
|
296
|
+
.replaceAll(')', '_');
|
292
297
|
|
293
298
|
const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
|
294
299
|
const itemRank = rankItem(row.getValue(columnId), filterValue, {
|
@@ -558,6 +563,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
558
563
|
const { globalFilterFn, density } = getState();
|
559
564
|
const { column } = header !== null && header !== void 0 ? header : {};
|
560
565
|
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
566
|
+
const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
|
561
567
|
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
|
562
568
|
const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
|
563
569
|
? allowedColumnFilterOptions === undefined ||
|
@@ -569,12 +575,16 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
569
575
|
if (header && column) {
|
570
576
|
setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
|
571
577
|
if (['empty', 'notEmpty'].includes(option)) {
|
572
|
-
|
578
|
+
if (currentFilterValue !== ' ') {
|
579
|
+
column.setFilterValue(' ');
|
580
|
+
}
|
573
581
|
}
|
574
582
|
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
|
575
583
|
['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
|
576
|
-
|
577
|
-
|
584
|
+
if (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length) {
|
585
|
+
column.setFilterValue([]);
|
586
|
+
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
|
587
|
+
}
|
578
588
|
}
|
579
589
|
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
|
580
590
|
['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
|
@@ -582,8 +592,10 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
582
592
|
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
|
583
593
|
}
|
584
594
|
else {
|
585
|
-
|
586
|
-
|
595
|
+
if (!['', undefined].includes(currentFilterValue)) {
|
596
|
+
column.setFilterValue('');
|
597
|
+
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
|
598
|
+
}
|
587
599
|
}
|
588
600
|
}
|
589
601
|
else {
|
@@ -962,11 +974,13 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
|
|
962
974
|
return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
963
975
|
dense: density === 'compact',
|
964
976
|
} },
|
965
|
-
enableEditing
|
966
|
-
|
967
|
-
|
968
|
-
|
969
|
-
|
977
|
+
enableEditing instanceof Function
|
978
|
+
? enableEditing(row)
|
979
|
+
: enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
|
980
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
981
|
+
React.createElement(ListItemIcon, null,
|
982
|
+
React.createElement(EditIcon, null)),
|
983
|
+
localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
|
970
984
|
renderRowActionMenuItems({
|
971
985
|
row,
|
972
986
|
table,
|
@@ -1033,7 +1047,10 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
|
|
1033
1047
|
setEditingRow(Object.assign({}, row));
|
1034
1048
|
setAnchorEl(null);
|
1035
1049
|
};
|
1036
|
-
return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
|
1050
|
+
return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
|
1051
|
+
(enableEditing instanceof Function
|
1052
|
+
? enableEditing(row)
|
1053
|
+
: enableEditing) ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
|
1037
1054
|
React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
|
1038
1055
|
React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
|
1039
1056
|
React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
|
@@ -1862,7 +1879,11 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
1862
1879
|
transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
|
1863
1880
|
? 'translateX(-0.5ch)'
|
1864
1881
|
: undefined,
|
1865
|
-
}, IconComponent: ArrowDownwardIcon
|
1882
|
+
}, IconComponent: ArrowDownwardIcon, onClick: (e) => {
|
1883
|
+
var _a;
|
1884
|
+
e.stopPropagation();
|
1885
|
+
(_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
|
1886
|
+
} })));
|
1866
1887
|
};
|
1867
1888
|
|
1868
1889
|
const MRT_TableHeadCell = ({ header, table }) => {
|
@@ -2028,7 +2049,7 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
|
|
2028
2049
|
};
|
2029
2050
|
|
2030
2051
|
const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
2031
|
-
var _a;
|
2052
|
+
var _a, _b;
|
2032
2053
|
const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
|
2033
2054
|
const { column, row } = cell;
|
2034
2055
|
const { columnDef } = column;
|
@@ -2046,6 +2067,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
2046
2067
|
})
|
2047
2068
|
: columnDef.muiTableBodyCellEditTextFieldProps;
|
2048
2069
|
const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
|
2070
|
+
const isSelectEdit = columnDef.editVariant === 'select';
|
2049
2071
|
const saveRow = (newValue) => {
|
2050
2072
|
if (editingRow) {
|
2051
2073
|
setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: newValue }) }));
|
@@ -2075,18 +2097,37 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
2075
2097
|
if (columnDef.Edit) {
|
2076
2098
|
return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
|
2077
2099
|
}
|
2078
|
-
return (React.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing
|
2100
|
+
return (React.createElement(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
|
2101
|
+
? columnDef.enableEditing(row)
|
2102
|
+
: columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
|
2079
2103
|
if (inputRef) {
|
2080
2104
|
editInputRefs.current[column.id] = inputRef;
|
2081
2105
|
if (textFieldProps.inputRef) {
|
2082
2106
|
textFieldProps.inputRef = inputRef;
|
2083
2107
|
}
|
2084
2108
|
}
|
2085
|
-
}, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
|
2109
|
+
}, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
|
2086
2110
|
var _a;
|
2087
2111
|
e.stopPropagation();
|
2088
2112
|
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
2089
|
-
}, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })))
|
2113
|
+
}, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown }), (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _b === void 0 ? void 0 : _b.map((option) => {
|
2114
|
+
let value;
|
2115
|
+
let text;
|
2116
|
+
if (typeof option !== 'object') {
|
2117
|
+
value = option;
|
2118
|
+
text = option;
|
2119
|
+
}
|
2120
|
+
else {
|
2121
|
+
value = option.value;
|
2122
|
+
text = option.text;
|
2123
|
+
}
|
2124
|
+
return (React.createElement(MenuItem, { key: value, sx: {
|
2125
|
+
display: 'flex',
|
2126
|
+
m: 0,
|
2127
|
+
alignItems: 'center',
|
2128
|
+
gap: '0.5rem',
|
2129
|
+
}, value: value }, text));
|
2130
|
+
})));
|
2090
2131
|
};
|
2091
2132
|
|
2092
2133
|
const MRT_CopyButton = ({ cell, children, table, }) => {
|
@@ -2170,6 +2211,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
|
|
2170
2211
|
renderedCellValue = cell.renderValue();
|
2171
2212
|
}
|
2172
2213
|
if (enableFilterMatchHighlighting &&
|
2214
|
+
columnDef.enableFilterMatchHighlighting !== false &&
|
2173
2215
|
renderedCellValue &&
|
2174
2216
|
allowedTypes.includes(typeof renderedCellValue) &&
|
2175
2217
|
((filterValue &&
|
@@ -2262,8 +2304,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
|
|
2262
2304
|
}
|
2263
2305
|
: undefined;
|
2264
2306
|
}, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
|
2265
|
-
const isEditable = (enableEditing
|
2266
|
-
columnDef.enableEditing
|
2307
|
+
const isEditable = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
|
2308
|
+
(columnDef.enableEditing instanceof Function
|
2309
|
+
? columnDef.enableEditing(row)
|
2310
|
+
: columnDef.enableEditing) !== false;
|
2267
2311
|
const isEditing = isEditable &&
|
2268
2312
|
editingMode !== 'modal' &&
|
2269
2313
|
(editingMode === 'table' ||
|
@@ -2273,9 +2317,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
|
|
2273
2317
|
const handleDoubleClick = (event) => {
|
2274
2318
|
var _a;
|
2275
2319
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
2276
|
-
if (
|
2277
|
-
columnDef.enableEditing !== false &&
|
2278
|
-
editingMode === 'cell') {
|
2320
|
+
if (isEditable && editingMode === 'cell') {
|
2279
2321
|
setEditingCell(cell);
|
2280
2322
|
queueMicrotask(() => {
|
2281
2323
|
var _a;
|
@@ -2320,8 +2362,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
|
|
2320
2362
|
: 1.25)}rem`
|
2321
2363
|
: undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
|
2322
2364
|
backgroundColor: enableHover &&
|
2323
|
-
|
2324
|
-
columnDef.enableEditing !== false &&
|
2365
|
+
isEditable &&
|
2325
2366
|
['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
|
2326
2367
|
? theme.palette.mode === 'dark'
|
2327
2368
|
? `${lighten(theme.palette.background.default, 0.2)} !important`
|
@@ -2780,7 +2821,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
|
|
2780
2821
|
};
|
2781
2822
|
|
2782
2823
|
const MRT_TableRoot = (props) => {
|
2783
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
2824
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
2784
2825
|
const bottomToolbarRef = useRef(null);
|
2785
2826
|
const editInputRefs = useRef({});
|
2786
2827
|
const filterInputRefs = useRef({});
|
@@ -2821,18 +2862,18 @@ const MRT_TableRoot = (props) => {
|
|
2821
2862
|
const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
|
2822
2863
|
const [showToolbarDropZone, setShowToolbarDropZone] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
|
2823
2864
|
const displayColumns = useMemo(() => {
|
2824
|
-
var _a, _b, _c, _d, _e;
|
2865
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
2825
2866
|
return [
|
2826
|
-
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (
|
2827
|
-
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (
|
2828
|
-
columnOrder.includes('mrt-row-expand') &&
|
2829
|
-
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
|
2867
|
+
((_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
|
2868
|
+
((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
|
2869
|
+
((_h = (_g = props.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
|
2870
|
+
showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
|
2830
2871
|
? () => React.createElement(MRT_ExpandAllButton, { table: table })
|
2831
|
-
: null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (
|
2832
|
-
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
|
2872
|
+
: null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_l = props.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
|
2873
|
+
((_o = (_m = props.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
|
2833
2874
|
? () => React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
|
2834
|
-
: null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (
|
2835
|
-
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (
|
2875
|
+
: null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_p = props.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
|
2876
|
+
((_r = (_q = props.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_s = props.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
|
2836
2877
|
].filter(Boolean);
|
2837
2878
|
}, [
|
2838
2879
|
columnOrder,
|
@@ -2855,6 +2896,8 @@ const MRT_TableRoot = (props) => {
|
|
2855
2896
|
props.localization,
|
2856
2897
|
props.positionActionsColumn,
|
2857
2898
|
props.renderDetailPanel,
|
2899
|
+
(_s = props.state) === null || _s === void 0 ? void 0 : _s.columnOrder,
|
2900
|
+
(_t = props.state) === null || _t === void 0 ? void 0 : _t.grouping,
|
2858
2901
|
]);
|
2859
2902
|
const columnDefs = useMemo(() => {
|
2860
2903
|
var _a, _b, _c;
|
@@ -2870,7 +2913,7 @@ const MRT_TableRoot = (props) => {
|
|
2870
2913
|
columnFilterFns,
|
2871
2914
|
displayColumns,
|
2872
2915
|
props.columns,
|
2873
|
-
(
|
2916
|
+
(_u = props.state) === null || _u === void 0 ? void 0 : _u.columnFilterFns,
|
2874
2917
|
]);
|
2875
2918
|
const data = useMemo(() => {
|
2876
2919
|
var _a, _b, _c, _d, _e;
|
@@ -2884,11 +2927,11 @@ const MRT_TableRoot = (props) => {
|
|
2884
2927
|
[getColumnId(col)]: null,
|
2885
2928
|
}))))
|
2886
2929
|
: props.data;
|
2887
|
-
}, [props.data, (
|
2930
|
+
}, [props.data, (_v = props.state) === null || _v === void 0 ? void 0 : _v.isLoading, (_w = props.state) === null || _w === void 0 ? void 0 : _w.showSkeletons]);
|
2888
2931
|
//@ts-ignore
|
2889
2932
|
const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), {
|
2890
2933
|
//@ts-ignore
|
2891
|
-
columns: columnDefs, data, globalFilterFn: (
|
2934
|
+
columns: columnDefs, data, globalFilterFn: (_y = (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn]) !== null && _y !== void 0 ? _y : (_z = props.filterFns) === null || _z === void 0 ? void 0 : _z.fuzzy, initialState, state: Object.assign({ columnFilterFns,
|
2892
2935
|
columnOrder,
|
2893
2936
|
density,
|
2894
2937
|
draggingColumn,
|
@@ -2912,7 +2955,7 @@ const MRT_TableRoot = (props) => {
|
|
2912
2955
|
tableHeadCellRefs,
|
2913
2956
|
tablePaperRef,
|
2914
2957
|
topToolbarRef,
|
2915
|
-
}, setColumnFilterFns: (
|
2958
|
+
}, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowFilters: (_11 = props.onShowFiltersChange) !== null && _11 !== void 0 ? _11 : setShowFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
|
2916
2959
|
if (props.tableInstanceRef) {
|
2917
2960
|
props.tableInstanceRef.current = table;
|
2918
2961
|
}
|
@@ -3059,5 +3102,5 @@ const MaterialReactTable = (_a) => {
|
|
3059
3102
|
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
|
3060
3103
|
};
|
3061
3104
|
|
3062
|
-
export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
|
3105
|
+
export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
|
3063
3106
|
//# sourceMappingURL=material-react-table.esm.js.map
|