material-react-table 0.6.0 → 0.6.3

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_LinearProgressBar: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -1,4 +1,15 @@
 import { FC } from 'react';
+import { Theme } from '@mui/material';
+import { MRT_TableInstance } from '..';
+export declare const commonToolbarStyles: (theme: Theme, tableInstance: MRT_TableInstance) => {
+    backgroundColor: string;
+    backgroundImage: string;
+    display: string;
+    opacity: number;
+    p: string;
+    width: string;
+    zIndex: number;
+};
 interface Props {
 }
 export declare const MRT_ToolbarTop: FC<Props>;

package/dist/useMRT.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -8,6 +9,9 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsExpanded: boolean;
     icons: MRT_Icons;
     idPrefix: string;
+    filterTypes: {
+        [key in MRT_FILTER_TYPE]: any;
+    };
     localization: MRT_Localization;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
     setCurrentFilterTypes: Dispatch<SetStateAction<{

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.0",
+  "version": "0.6.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -56,7 +56,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-beta.0",
@@ -73,7 +73,7 @@
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
-    "@types/react": "^17.0.39",
+    "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",

package/src/MaterialReactTable.tsx

@@ -20,7 +20,7 @@ import {
   Column,
   ColumnInstance,
   FilterType,
-  // ColumnInterface,
+  ColumnInterface,
   HeaderGroup,
   Row,
   TableInstance,
@@ -78,6 +78,7 @@ import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -89,7 +90,7 @@ export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
-    columns: (Column<D> & MRT_ColumnInterface)[];
+    columns: MRT_ColumnInterface[];
     data: D[];
     initialState?: Partial<MRT_TableState>;
   };
@@ -106,66 +107,69 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
   UseRowStateInstanceProps<D> &
   UseSortByInstanceProps<D> & {
     columns: (Column<D> & MRT_ColumnInstance<D>)[];
-    headerGroups: MRT_HeaderGroup<D>[];
     footerGroups: MRT_HeaderGroup<D>[];
-    state: MRT_TableState<D>;
-    rows: MRT_Row<D>[];
+    getToggleAllRowsExpandedProps: () => void;
+    headerGroups: MRT_HeaderGroup<D>[];
     page: MRT_Row<D>[];
     resetResizing: () => void;
-    getToggleAllRowsExpandedProps: () => void;
+    rows: MRT_Row<D>[];
+    state: MRT_TableState<D>;
   };
 
-export type MRT_ColumnInterface<D extends {} = {}> =
-  // ColumnInterface<D> &
+export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
   UseFiltersColumnOptions<D> &
-    UseGlobalFiltersColumnOptions<D> &
-    UseGroupByColumnOptions<D> &
-    UseResizeColumnsColumnOptions<D> &
-    UseSortByColumnOptions<D> & {
-      Edit?: ({
-        cell,
-        onChange,
-      }: {
-        cell: MRT_Cell<D>;
-        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-      }) => ReactNode;
-      Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
-      Footer?: string;
-      Header?: string;
-      disableFilters?: boolean;
-      editable?: boolean;
-      filter?: MRT_FilterType | string | FilterType<D>;
-      filterSelectOptions?: (string | { text: string; value: string })[];
-      muiTableBodyCellEditTextFieldProps?:
-        | TextFieldProps
-        | ((cell: MRT_Cell<D>) => TextFieldProps);
-      muiTableBodyCellProps?:
-        | TableCellProps
-        | ((cell: MRT_Cell<D>) => TableCellProps);
-      muiTableFooterCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      muiTableHeadCellFilterTextFieldProps?:
-        | TextFieldProps
-        | ((column: Column<D>) => TextFieldProps);
-      muiTableHeadCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      onCellEditChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        cell: MRT_Cell<D>,
-      ) => void;
-      onFilterChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        filterValue: any,
-      ) => void;
-    };
+  UseGlobalFiltersColumnOptions<D> &
+  UseGroupByColumnOptions<D> &
+  UseResizeColumnsColumnOptions<D> &
+  UseSortByColumnOptions<D> & {
+    Edit?: ({
+      cell,
+      onChange,
+    }: {
+      cell: MRT_Cell<D>;
+      onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
+    Footer?: string;
+    Header?: string;
+    accessor?: string;
+    columns?: MRT_ColumnInterface<D>[];
+    disableFilters?: boolean;
+    editable?: boolean;
+    filter?: MRT_FilterType | string | FilterType<D>;
+    filterSelectOptions?: (string | { text: string; value: string })[];
+    filterTypes?: (MRT_FILTER_TYPE | string)[];
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell: MRT_Cell<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    onCellEditChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      cell: MRT_Cell<D>,
+    ) => void;
+    onFilterChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      filterValue: any,
+    ) => void;
+  };
 
 export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
   UseFiltersColumnProps<D> &
   UseGroupByColumnProps<D> &
   UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> & {
+  UseSortByColumnProps<D> &
+  MRT_ColumnInterface<D> & {
     columns?: MRT_ColumnInstance<D>[];
   };
 
@@ -185,7 +189,9 @@ export type MRT_Row<D extends {} = {}> = Row<D> &
 
 export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
-  UseRowStateCellProps<D> & {};
+  UseRowStateCellProps<D> & {
+    column: MRT_ColumnInstance<D>;
+  };
 
 export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
@@ -232,6 +238,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelection?: boolean;
+    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
     hideToolbarBottom?: boolean;
@@ -362,6 +369,8 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
 
 export default <D extends {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
+  filterTypes,
+  globalFilter = 'fuzzy',
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -371,7 +380,12 @@ export default <D extends {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
+    //@ts-ignore
     defaultColumn={defaultColumn}
+    //@ts-ignore
+    filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    //@ts-ignore
+    globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/body/MRT_TableBody.tsx

@@ -28,7 +28,9 @@ export const MRT_TableBody: FC<Props> = () => {
   return (
     <TableBody
       {...tableBodyProps}
-      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+      sx={{
+        ...tableBodyProps?.sx,
+      }}
     >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);

package/src/filtersFNs.ts

@@ -1,25 +1,15 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzySearchFN = (
-  rows: MRT_Row[],
-  columnIds: string[],
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: columnIds.map((c) => `values.${c}`),
-    sorter: (rankedItems) => rankedItems,
-  });
-
-fuzzySearchFN.autoRemove = (val: any) => !val;
-
 export const fuzzyFilterFN = (
   rows: MRT_Row[],
-  id: string,
+  columnIds: string[] | string,
   filterValue: string | number,
 ) =>
   matchSorter(rows, filterValue.toString().trim(), {
-    keys: [`values.${id}`],
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
     sorter: (rankedItems) => rankedItems,
   });
 
@@ -144,10 +134,10 @@ export const defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   notEmpty: notEmptyFilterFN,
   notEquals: notEqualsFilterFN,
   startsWith: startsWithFilterFN,

package/src/inputs/MRT_FilterTextField.tsx

@@ -149,6 +149,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
                   <IconButton
+                    aria-label={localization.changeFilterMode}
                     onClick={handleFilterMenuOpen}
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -102,15 +102,16 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleShowAllColumns = () => {
+    tableInstance.toggleHideAllColumns(false);
+    setAnchorEl(null);
+  };
+
   const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleShowAllColumns = () => {
-    tableInstance.toggleHideAllColumns(false);
-  };
-
   const handleOpenShowHideColumnsMenu = (
     event: React.MouseEvent<HTMLElement>,
   ) => {

package/src/table/MRT_TableContainer.tsx

@@ -1,11 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react';
-import {
-  LinearProgress,
-  Paper,
-  TableContainer,
-  Collapse,
-  Box,
-} from '@mui/material';
+import React, { FC, useEffect } from 'react';
+import { Paper, TableContainer, Box } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
@@ -17,28 +11,17 @@ export const MRT_TableContainer: FC<Props> = () => {
   const {
     hideToolbarBottom,
     hideToolbarTop,
-    isFetching,
-    isLoading,
-    muiLinearProgressProps,
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
   const fullScreen = tableInstance.state.fullScreen;
-  const originalBodyOverflowStyle = useRef<string | undefined>();
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      originalBodyOverflowStyle.current = document?.body?.style?.overflow;
-    }
-  }, []);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
       } else {
-        document.body.style.overflow =
-          originalBodyOverflowStyle.current ?? 'auto';
+        document.body.style.overflow = 'auto';
       }
     }
   }, [fullScreen]);
@@ -48,11 +31,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
 
-  const linearProgressProps =
-    muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps(tableInstance)
-      : muiLinearProgressProps;
-
   return (
     <TableContainer
       component={Paper}
@@ -62,6 +40,7 @@ export const MRT_TableContainer: FC<Props> = () => {
         height: fullScreen ? '100%' : undefined,
         left: fullScreen ? '0' : undefined,
         m: fullScreen ? '0' : undefined,
+        overflowY: 'hidden',
         position: fullScreen ? 'fixed' : undefined,
         right: fullScreen ? '0' : undefined,
         top: fullScreen ? '0' : undefined,
@@ -72,9 +51,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
-      <Collapse in={isFetching || isLoading} unmountOnExit>
-        <LinearProgress {...linearProgressProps} />
-      </Collapse>
       <Box
         sx={{
           maxWidth: '100%',

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { Collapse, LinearProgress } from '@mui/material';
+import { useMRT } from '../useMRT';
+
+interface Props {}
+
+export const MRT_LinearProgressBar: FC<Props> = () => {
+  const { muiLinearProgressProps, isFetching, isLoading, tableInstance } =
+    useMRT();
+
+  const linearProgressProps =
+    muiLinearProgressProps instanceof Function
+      ? muiLinearProgressProps(tableInstance)
+      : muiLinearProgressProps;
+
+  return (
+    <Collapse in={isFetching || isLoading} unmountOnExit>
+      <LinearProgress
+        aria-label="Loading"
+        aria-busy="true"
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};

package/src/toolbar/MRT_TablePagination.tsx

@@ -34,7 +34,7 @@ export const MRT_TablePagination: FC<Props> = () => {
       }
       {...tablePaginationProps}
       sx={{
-        p: 0,
+        m: '0 0.5rem',
         position: 'relative',
         zIndex: 2,
         ...tablePaginationProps?.sx,

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,9 +1,11 @@
 import React, { FC } from 'react';
-import { alpha, Toolbar } from '@mui/material';
+import { Box, Toolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { commonToolbarStyles } from './MRT_ToolbarTop';
 
 interface Props {}
 
@@ -29,33 +31,28 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       {...toolbarProps}
       sx={(theme) =>
         ({
-          backgroundColor: theme.palette.background.default,
-          backgroundImage: `linear-gradient(${alpha(
-            theme.palette.common.white,
-            0.05,
-          )},${alpha(theme.palette.common.white, 0.05)})`,
           bottom: tableInstance.state.fullScreen ? '0' : undefined,
-          display: 'flex',
-          justifyContent: 'space-between',
-          overflowY: 'hidden',
-          p: '0 0.5rem !important',
           position: tableInstance.state.fullScreen ? 'fixed' : undefined,
-          width: 'calc(100% - 1rem)',
-          zIndex: 1,
+          ...commonToolbarStyles(theme, tableInstance),
           ...toolbarProps?.sx,
         } as any)
       }
     >
-      {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-        <MRT_ToolbarInternalButtons />
-      ) : (
-        <span />
-      )}
-      {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
-      {!manualPagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
+      <MRT_LinearProgressBar />
+      <Box
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+      >
+        {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
+          <MRT_ToolbarInternalButtons />
+        ) : (
+          <span />
         )}
+        {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
+        {!manualPagination &&
+          ['bottom', 'both'].includes(positionPagination ?? '') && (
+            <MRT_TablePagination />
+          )}
+      </Box>
     </Toolbar>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,10 +1,28 @@
 import React, { FC } from 'react';
-import { alpha, Box, Toolbar } from '@mui/material';
+import { alpha, Box, Theme, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { MRT_TableInstance } from '..';
+
+export const commonToolbarStyles = (
+  theme: Theme,
+  tableInstance: MRT_TableInstance,
+) => ({
+  backgroundColor: theme.palette.background.default,
+  backgroundImage: `linear-gradient(${alpha(
+    theme.palette.common.white,
+    0.05,
+  )},${alpha(theme.palette.common.white, 0.05)})`,
+  display: 'grid',
+  opacity: tableInstance.state.fullScreen ? 0.95 : 1,
+  p: '0 !important',
+  width: '100%',
+  zIndex: 1,
+});
 
 interface Props {}
 
@@ -32,17 +50,9 @@ export const MRT_ToolbarTop: FC<Props> = () => {
       {...toolbarProps}
       sx={(theme) =>
         ({
-          backgroundColor: theme.palette.background.default,
-          backgroundImage: `linear-gradient(${alpha(
-            theme.palette.common.white,
-            0.05,
-          )},${alpha(theme.palette.common.white, 0.05)})`,
-          display: 'grid',
-          p: '0 !important',
           position: tableInstance.state.fullScreen ? 'sticky' : undefined,
           top: tableInstance.state.fullScreen ? '0' : undefined,
-          width: '100%',
-          zIndex: 1,
+          ...commonToolbarStyles(theme, tableInstance),
           ...toolbarProps?.sx,
         } as any)
       }
@@ -76,6 +86,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
             <MRT_TablePagination />
           )}
       </div>
+      <MRT_LinearProgressBar />
     </Toolbar>
   );
 };