material-react-table 0.29.1 → 0.30.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.29.1",
+  "version": "0.30.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -82,9 +82,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^7.0.8",
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
@@ -100,7 +97,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.2.6",
+    "@tanstack/react-table": "8.5.2",
     "@tanstack/react-virtual": "^3.0.0-beta.13"
   }
 }

package/src/MaterialReactTable.tsx

@@ -390,13 +390,17 @@ export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
   row: MRT_Row<TData>;
 };
 
-export type MRT_SortingOption = keyof typeof MRT_SortingFns;
+export type MRT_SortingOption = LiteralUnion<
+  string & keyof typeof MRT_SortingFns
+>;
 
 export type MRT_SortingFn<TData extends Record<string, any> = {}> =
   | SortingFn<TData>
   | MRT_SortingOption;
 
-export type MRT_FilterOption = keyof typeof MRT_FilterFns;
+export type MRT_FilterOption = LiteralUnion<
+  string & keyof typeof MRT_FilterFns
+>;
 
 export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | FilterFn<TData>

package/src/column.utils.ts

@@ -51,6 +51,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         columnDef.filterFn =
+          // @ts-ignore
           MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
         //@ts-ignore
         columnDef._filterFn = currentFilterFns[columnDef.id];

package/src/head/MRT_TableHeadCell.tsx

@@ -28,7 +28,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     },
     setCurrentHoveredColumn,
   } = table;
-  const { density, currentDraggingColumn, currentHoveredColumn } = getState();
+  const {
+    density,
+    currentDraggingColumn,
+    currentHoveredColumn,
+    showColumnFilters,
+  } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -136,7 +141,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : columnDefType === 'display'
             ? '1rem 1.25rem'
             : '1.5rem',
-        pb: columnDefType === 'display' ? 0 : undefined,
+        pb:
+          columnDefType === 'display'
+            ? 0
+            : showColumnFilters
+            ? '0.5rem'
+            : undefined,
         position:
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'

package/src/index.tsx

@@ -1,3 +1,9 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+import type { MRT_Icons } from './icons';
+export type { MRT_Icons };
+
+import type { MRT_Localization } from './localization';
+export type { MRT_Localization };

package/src/inputs/MRT_FilterTextField.tsx

@@ -250,7 +250,7 @@ export const MRT_FilterTextField: FC<Props> = ({
               )}
             </InputAdornment>
           ) : (
-            <FilterListIcon />
+            <FilterListIcon style={{ marginRight: '4px' }} />
           ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
@@ -297,7 +297,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         sx={(theme) => ({
           p: 0,
           minWidth: !filterChipLabel ? '6rem' : 'auto',
-          width: 'calc(100% + 0.5rem)',
+          width: '100%',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },
@@ -311,30 +311,32 @@ export const MRT_FilterTextField: FC<Props> = ({
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
-        {columnDef?.filterSelectOptions?.map((option) => {
-          let value: string;
-          let text: string;
-          if (typeof option !== 'object') {
-            value = option;
-            text = option;
-          } else {
-            value = option.value;
-            text = option.text;
-          }
-          return (
-            <MenuItem key={value} value={value}>
-              {isMultiSelectFilter && (
-                <Checkbox
-                  checked={(
-                    (column.getFilterValue() ?? []) as string[]
-                  ).includes(value)}
-                  sx={{ mr: '0.5rem' }}
-                />
-              )}
-              <ListItemText>{text}</ListItemText>
-            </MenuItem>
-          );
-        })}
+        {columnDef?.filterSelectOptions?.map(
+          (option: string | { text: string; value: string }) => {
+            let value: string;
+            let text: string;
+            if (typeof option !== 'object') {
+              value = option;
+              text = option;
+            } else {
+              value = option.value;
+              text = option.text;
+            }
+            return (
+              <MenuItem key={value} value={value}>
+                {isMultiSelectFilter && (
+                  <Checkbox
+                    checked={(
+                      (column.getFilterValue() ?? []) as string[]
+                    ).includes(value)}
+                    sx={{ mr: '0.5rem' }}
+                  />
+                )}
+                <ListItemText>{text}</ListItemText>
+              </MenuItem>
+            );
+          },
+        )}
       </TextField>
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -86,7 +86,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
               </Tooltip>
             </InputAdornment>
           ) : (
-            <SearchIcon />
+            <SearchIcon style={{ marginRight: '4px' }} />
           ),
           endAdornment: (
             <InputAdornment position="end">

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -100,7 +100,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handleGroupByColumn = () => {
     column.toggleGrouping();
-    setColumnOrder((old) => ['mrt-row-expand', ...old]);
+    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
     setAnchorEl(null);
   };
 
@@ -186,7 +186,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           >
             <Box sx={commonListItemStyles}>
               <ListItemIcon>
-                <SortIcon />
+                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
@@ -203,7 +203,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           >
             <Box sx={commonListItemStyles}>
               <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+                <SortIcon />
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',

package/src/table/MRT_TableRoot.tsx

@@ -254,6 +254,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       data,
       getSubRows: (row) => row?.subRows,
       globalFilterFn:
+        //@ts-ignore
         MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,
       initialState,
       state: {