material-react-table 2.0.3 → 2.0.5

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { PaginationProps } from '@mui/material/Pagination';
 import { PaperProps } from '@mui/material/Paper';
 import { RadioProps } from '@mui/material/Radio';
+import { SelectProps } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { SliderProps } from '@mui/material/Slider';
 import { TableProps } from '@mui/material/Table';
@@ -287,7 +288,7 @@ interface MRT_RowModel<TData extends MRT_RowData> {
         [key: string]: MRT_Row<TData>;
     };
 }
-type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
+type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeafHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
     getAllColumns: () => MRT_Column<TData>[];
     getAllFlatColumns: () => MRT_Column<TData>[];
     getAllLeafColumns: () => MRT_Column<TData>[];
@@ -298,6 +299,7 @@ type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllCo
     getExpandedRowModel: () => MRT_RowModel<TData>;
     getFlatHeaders: () => MRT_Header<TData>[];
     getHeaderGroups: () => MRT_HeaderGroup<TData>[];
+    getLeafHeaders: () => MRT_Header<TData>[];
     getLeftLeafColumns: () => MRT_Column<TData>[];
     getPaginationRowModel: () => MRT_RowModel<TData>;
     getPreFilteredRowModel: () => MRT_RowModel<TData>;
@@ -773,10 +775,18 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
     muiPaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>) | Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>;
     muiRowDragHandleProps?: ((props: {
@@ -1530,7 +1540,10 @@ interface Props$5<TData extends MRT_RowData> extends LinearProgressProps {
 declare const MRT_LinearProgressBar: <TData extends MRT_RowData>({ isTopToolbar, table, ...rest }: Props$5<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$4<TData extends MRT_RowData> extends Partial<PaginationProps & {
-    rowsPerPageOptions?: number[];
+    rowsPerPageOptions?: {
+        label: string;
+        value: number;
+    }[] | number[];
     showRowsPerPage?: boolean;
 }> {
     position?: 'bottom' | 'top';

package/dist/index.esm.js

@@ -428,7 +428,7 @@ const MRT_TableBodyCellValue = ({ cell, table, }) => {
         allowedTypes.includes(typeof renderedCellValue) &&
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
-            columnDef.filterVariant === 'text') ||
+            ['autocomplete', 'text'].includes(columnDef.filterVariant)) ||
             (globalFilter &&
                 allowedTypes.includes(typeof globalFilter) &&
                 column.getCanGlobalFilter()))) {
@@ -987,19 +987,18 @@ const MRT_TableBody = (_a) => {
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
+    const commonRowProps = {
+        columnVirtualizer,
+        numRows: rows.length,
+        table,
+        virtualColumns,
+        virtualPaddingLeft,
+        virtualPaddingRight,
+    };
     return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
-                    const props = {
-                        columnVirtualizer,
-                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                        numRows: rows.length,
-                        row,
-                        rowIndex,
-                        table,
-                        virtualColumns,
-                        virtualPaddingLeft,
-                        virtualPaddingRight,
-                    };
+                    const props = Object.assign(Object.assign({}, commonRowProps), { row,
+                        rowIndex });
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
@@ -1020,36 +1019,16 @@ const MRT_TableBody = (_a) => {
                             const row = rowVirtualizer
                                 ? rows[rowOrVirtualRow.index]
                                 : rowOrVirtualRow;
-                            const props = {
-                                columnVirtualizer,
-                                measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                                numRows: rows.length,
-                                pinnedRowIds,
-                                row,
-                                rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                                table,
-                                virtualColumns,
-                                virtualPaddingLeft,
-                                virtualPaddingRight,
-                                virtualRow: rowVirtualizer
+                            const props = Object.assign(Object.assign({}, commonRowProps), { measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement, pinnedRowIds,
+                                row, rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex, virtualRow: rowVirtualizer
                                     ? rowOrVirtualRow
-                                    : undefined,
-                            };
-                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                                    : undefined });
+                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}${row.index}`)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), `${row.id}${row.index}`));
                         }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
-                    const props = {
-                        columnVirtualizer,
-                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                        numRows: rows.length,
-                        row,
-                        rowIndex,
-                        table,
-                        virtualColumns,
-                        virtualPaddingLeft,
-                        virtualPaddingRight,
-                    };
-                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    const props = Object.assign(Object.assign({}, commonRowProps), { row,
+                        rowIndex });
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}`)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
@@ -1670,7 +1649,7 @@ const MRT_FilterTextField = (_a) => {
             localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
             'aria-label': filterPlaceholder,
-            autoComplete: 'new-password',
+            autoComplete: 'new-password', // disable autocomplete and autofill
             disabled: !!filterChipLabel,
             sx: {
                 textOverflow: 'ellipsis',
@@ -1952,11 +1931,14 @@ const MRT_TableHeadCellSortLabel = (_a) => {
             : column.getNextSortingOrder() === 'desc'
                 ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
                 : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+    const direction = isSorted
+        ? column.getIsSorted()
+        : undefined;
     return (jsx(Tooltip, { placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, Object.assign({ IconComponent: !isSorted
-                    ? (props) => (jsx(SyncAltIcon, Object.assign({}, props, { style: {
+                    ? (props) => (jsx(SyncAltIcon, Object.assign({}, props, { direction: direction, style: {
                             transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
                         } })))
-                    : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: isSorted ? column.getIsSorted() : undefined, onClick: (e) => {
+                    : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: direction, onClick: (e) => {
                     var _a;
                     e.stopPropagation();
                     (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
@@ -2154,8 +2136,8 @@ const MRT_TablePagination = (_a) => {
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
-    return (jsxs(Box, { sx: {
+    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    return (jsxs(Box, { className: "MuiTablePagination-root", sx: {
             alignItems: 'center',
             display: 'flex',
             flexWrap: 'wrap',
@@ -2171,7 +2153,12 @@ const MRT_TablePagination = (_a) => {
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, 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, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+        }, 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({ disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
+                            var _a;
+                            const value = typeof option !== 'number' ? option.value : option;
+                            const label = typeof option !== 'number' ? option.label : `${option}`;
+                            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))));
+                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
@@ -2216,10 +2203,10 @@ const MRT_GlobalFilterTextField = (_a) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
                         var _a;
                         return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-                    } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { inputRef: (inputRef) => {
+                    } }), inputRef: (inputRef) => {
                     searchInputRef.current = inputRef;
                     if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
                         textFieldProps.inputRef = inputRef;