material-react-table 3.1.0 → 3.2.0

package/dist/index.d.ts

@@ -280,6 +280,7 @@ type MRT_ColumnHelper<TData extends MRT_RowData> = {
     group: (column: MRT_GroupColumnDef<TData>) => MRT_ColumnDef<TData>;
 };
 interface MRT_Localization {
+    language: string;
     actions: string;
     and: string;
     cancel: string;

package/dist/index.esm.js

@@ -1298,6 +1298,7 @@ const MRT_Default_Icons = {
 };
 
 const MRT_Localization_EN = {
+    language: 'en',
     actions: 'Actions',
     and: 'and',
     cancel: 'Cancel',
@@ -1583,7 +1584,7 @@ const useMRT_Effects = (table) => {
         if (firstVisibleRowIndex >= totalRowCount) {
             table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
         }
-    }, [totalRowCount]);
+    }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
     //turn off sort when global filter is looking for ranked results
     const appliedSort = useRef(sorting);
     useEffect(() => {
@@ -1797,6 +1798,11 @@ const useMRT_TableInstance = (definedTableOptions) => {
 
 const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
 
+/**
+ * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
+ * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
+ * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
+ */
 const extraIndexRangeExtractor = (range, draggingIndex) => {
     const newIndexes = defaultRangeExtractor(range);
     if (draggingIndex === undefined)
@@ -1872,7 +1878,6 @@ const useMRT_ColumnVirtualizer = (table) => {
 };
 
 const useMRT_RowVirtualizer = (table, rows) => {
-    var _a;
     const { getRowModel, getState, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
     const { density, draggingRow, expanded } = getState();
     if (!enableRowVirtualization)
@@ -1880,7 +1885,14 @@ const useMRT_RowVirtualizer = (table, rows) => {
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
-    const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length;
+    const realRows = rows !== null && rows !== void 0 ? rows : getRowModel().rows;
+    /**
+     * when filtering, should find the correct index in filtered rows
+     */
+    const draggingRowIndex = useMemo(() => (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id)
+        ? realRows.findIndex((r) => r.id === (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id))
+        : undefined, [realRows, draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id]);
+    const rowCount = realRows.length;
     const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
     const rowVirtualizer = useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
             ? expanded === true
@@ -1890,9 +1902,8 @@ const useMRT_RowVirtualizer = (table, rows) => {
             navigator.userAgent.indexOf('Firefox') === -1
             ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
             : undefined, overscan: 4, rangeExtractor: useCallback((range) => {
-            var _a;
-            return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
-        }, [draggingRow]) }, rowVirtualizerProps));
+            return extraIndexRangeExtractor(range, draggingRowIndex);
+        }, [draggingRowIndex]) }, rowVirtualizerProps));
     rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
     if (rowVirtualizerInstanceRef) {
         //@ts-expect-error
@@ -3040,9 +3051,11 @@ const MRT_FilterTextField = (_a) => {
             ? column.getFilterValue() || []
             : isRangeFilter
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
-                : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
+                : isAutocompleteFilter
+                    ? typeof column.getFilterValue() === 'string' ? column.getFilterValue() : ''
+                    : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
     });
-    const [autocompleteValue, setAutocompleteValue] = useState(isAutocompleteFilter ? filterValue : null);
+    const [autocompleteValue, setAutocompleteValue] = useState(() => isAutocompleteFilter ? (column.getFilterValue() || null) : null);
     const handleChangeDebounced = useCallback(debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
@@ -3069,9 +3082,12 @@ const MRT_FilterTextField = (_a) => {
         handleChange(newValue);
         (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
     };
+    const handleAutocompleteInputChange = (_event, newValue, _reason) => {
+        handleChange(newValue);
+    };
     const handleAutocompleteChange = (newValue) => {
         setAutocompleteValue(newValue);
-        handleChange(getValueAndLabel(newValue).value);
+        handleChangeDebounced(getValueAndLabel(newValue).value);
     };
     const handleClear = () => {
         if (isMultiSelectFilter) {
@@ -3086,6 +3102,13 @@ const MRT_FilterTextField = (_a) => {
                 return newFilterValues;
             });
         }
+        else if (isAutocompleteFilter) {
+            setAutocompleteValue(null);
+            setFilterValue('');
+            // when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
+            // so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
+            // column.setFilterValue(undefined)
+        }
         else {
             setFilterValue('');
             column.setFilterValue(undefined);
@@ -3176,11 +3199,11 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_t = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _t === void 0 ? void 0 : _t.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_u = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _u === void 0 ? void 0 : _u.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_v = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _v !== void 0 ? _v : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_v = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _v !== void 0 ? _v : [], inputValue: filterValue, onInputChange: handleAutocompleteInputChange }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a, _b, _c, _d, _f;
                     return (jsx(TextField, Object.assign({}, commonTextFieldProps, builtinTextFieldProps, { slotProps: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.slotProps), commonTextFieldProps.slotProps), { input: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), (_a = builtinTextFieldProps.slotProps) === null || _a === void 0 ? void 0 : _a.input), { startAdornment: 
                                 //@ts-expect-error
-                                (_c = (_b = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.startAdornment }), htmlInput: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), (_d = builtinTextFieldProps.slotProps) === null || _d === void 0 ? void 0 : _d.htmlInput), (_f = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _f === void 0 ? void 0 : _f.htmlInput) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
+                                (_c = (_b = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.startAdornment }), htmlInput: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), (_d = builtinTextFieldProps.slotProps) === null || _d === void 0 ? void 0 : _d.htmlInput), (_f = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _f === void 0 ? void 0 : _f.htmlInput) }), onClick: (e) => e.stopPropagation() })));
                 }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { slotProps: Object.assign(Object.assign({}, commonTextFieldProps.slotProps), { inputLabel: Object.assign({ shrink: isSelectFilter || isMultiSelectFilter }, (_w = commonTextFieldProps.slotProps) === null || _w === void 0 ? void 0 : _w.inputLabel), select: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                             ? (selected) => !Array.isArray(selected) || (selected === null || selected === void 0 ? void 0 : selected.length) === 0 ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
                                     const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
@@ -3674,7 +3697,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const selectedRowCount = useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
         : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toLocaleString(localization.language)), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -3959,7 +3982,9 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, 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] }));
+                    } }, 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(localization.language)}-${lastRowIndex.toLocaleString(localization.language)} ${localization.of} ${totalRowCount.toLocaleString(localization.language)}` }), 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] }));
 };
 
 const MRT_ToolbarDropZone = (_a) => {