material-react-table 0.4.5 → 0.4.8

package/src/icons.tsx

@@ -0,0 +1,72 @@
+import CancelIcon from '@mui/icons-material/Cancel';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import CloseIcon from '@mui/icons-material/Close';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import EditIcon from '@mui/icons-material/Edit';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SaveIcon from '@mui/icons-material/Save';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import SortIcon from '@mui/icons-material/Sort';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+
+export interface MRT_Icons {
+  CancelIcon: any;
+  ClearAllIcon: any;
+  CloseIcon: any;
+  DensityMediumIcon: any;
+  DensitySmallIcon: any;
+  DoubleArrowDownIcon: any;
+  DynamicFeedIcon: any;
+  EditIcon: any;
+  ExpandLessIcon: any;
+  ExpandMoreIcon: any;
+  FilterListIcon: any;
+  FilterListOffIcon: any;
+  FullscreenExitIcon: any;
+  FullscreenIcon: any;
+  MoreHorizIcon: any;
+  MoreVertIcon: any;
+  SaveIcon: any;
+  SearchIcon: any;
+  SearchOffIcon: any;
+  SortIcon: any;
+  ViewColumnIcon: any;
+  VisibilityOffIcon: any;
+}
+
+export const MRT_Default_Icons: MRT_Icons = {
+  CancelIcon,
+  ClearAllIcon,
+  CloseIcon,
+  DensityMediumIcon,
+  DensitySmallIcon,
+  DoubleArrowDownIcon,
+  DynamicFeedIcon,
+  EditIcon,
+  ExpandLessIcon,
+  ExpandMoreIcon,
+  FilterListIcon,
+  FilterListOffIcon,
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MoreHorizIcon,
+  MoreVertIcon,
+  SaveIcon,
+  SearchIcon,
+  SearchOffIcon,
+  SortIcon,
+  ViewColumnIcon,
+  VisibilityOffIcon,
+};

package/src/index.tsx

@@ -1,3 +1,5 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TextField } from '@mui/material';
-import { Cell } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_Cell } from '..';
 
 interface Props {
-  cell: Cell;
+  cell: MRT_Cell;
 }
 
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,16 +1,18 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import FilterIcon from '@mui/icons-material/FilterList';
-import { HeaderGroup, useAsyncDebounce } from 'react-table';
+import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
-  const { localization } = useMRT();
+  const {
+    icons: { FilterListIcon, CloseIcon },
+    localization,
+  } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -37,7 +39,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         },
       }}
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder?.replace(
+      placeholder={localization.filterTextFieldPlaceholder?.replace(
         '{column}',
         String(column.Header),
       )}
@@ -52,15 +54,13 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         startAdornment: (
           <Tooltip
             arrow
-            title={
-              localization?.filterTextFieldPlaceholder?.replace(
-                '{column}',
-                String(column.Header),
-              ) ?? ''
-            }
+            title={localization.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           >
             <InputAdornment position="start">
-              <FilterIcon />
+              <FilterListIcon />
             </InputAdornment>
           </Tooltip>
         ),
@@ -68,11 +68,11 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           <InputAdornment position="end">
             <Tooltip
               arrow
-              title={localization?.filterTextFieldClearButtonTitle ?? ''}
+              title={localization.filterTextFieldClearButtonTitle ?? ''}
             >
               <span>
                 <IconButton
-                  aria-label={localization?.filterTextFieldClearButtonTitle}
+                  aria-label={localization.filterTextFieldClearButtonTitle}
                   disabled={filterValue?.length === 0}
                   onClick={handleClear}
                   size="small"

package/src/inputs/MRT_SearchTextField.tsx

@@ -6,8 +6,6 @@ import {
   styled,
   TextField as MuiTextField,
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
@@ -19,6 +17,7 @@ interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
+    icons: { SearchIcon, CloseIcon },
     showSearch,
     localization,
     muiSearchTextFieldProps,
@@ -45,7 +44,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={showSearch} orientation="horizontal">
       <TextField
         id="global-search-text-field"
-        placeholder={localization?.searchTextFieldPlaceholder}
+        placeholder={localization.searchTextFieldPlaceholder}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -61,11 +60,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization?.searchTextFieldClearButtonTitle}
+                aria-label={localization.searchTextFieldClearButtonTitle}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization?.searchTextFieldClearButtonTitle}
+                title={localization.searchTextFieldClearButtonTitle}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox, Tooltip } from '@mui/material';
-import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 interface Props {
-  row?: Row;
+  row?: MRT_Row;
   selectAll?: boolean;
 }
 
@@ -20,8 +20,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
 
   const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
+      tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
       onSelectAllChange?.(event, tableInstance.selectedFlatRows);
-      tableInstance.toggleAllRowsSelected(event.target.checked);
     } else if (row) {
       row?.getToggleRowSelectedProps()?.onChange?.(event);
       onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
@@ -40,15 +40,15 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
         enterNextDelay={1000}
         title={
           selectAll
-            ? localization?.selectAllCheckboxTitle ?? ''
-            : localization?.selectCheckboxTitle ?? ''
+            ? localization.selectAllCheckboxTitle
+            : localization.selectCheckboxTitle
         }
       >
         <Checkbox
           inputProps={{
             'aria-label': selectAll
-              ? localization?.selectAllCheckboxTitle ?? ''
-              : localization?.selectCheckboxTitle ?? '',
+              ? localization.selectAllCheckboxTitle
+              : localization.selectCheckboxTitle,
           }}
           onChange={onSelectChange}
           {...checkboxProps}

package/src/{utils/localization.ts → localization.ts}

@@ -32,7 +32,7 @@ export interface MRT_Localization {
   toolbarAlertGroupedThenByMessage: string;
 }
 
-export const defaultLocalization: MRT_Localization = {
+export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sort',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,12 +1,7 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { HeaderGroup } from 'react-table';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
-import SortIcon from '@mui/icons-material/Sort';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import FilterIcon from '@mui/icons-material/FilterList';
+import { MRT_HeaderGroup } from '..';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -15,7 +10,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
@@ -31,6 +26,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     enableColumnGrouping,
     localization,
     setShowFilters,
+    icons: {
+      FilterListIcon,
+      SortIcon,
+      ClearAllIcon,
+      DynamicFeedIcon,
+      VisibilityOffIcon,
+    },
   } = useMRT();
 
   const handleClearSort = () => {
@@ -87,7 +89,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             disabled={!column.isSorted}
             onClick={handleClearSort}
           >
-            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+            <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
           </MenuItem>,
           <MenuItem
             key={2}
@@ -95,7 +97,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortAsc}
           >
             <SortIcon />{' '}
-            {localization?.columnActionMenuItemSortAsc?.replace(
+            {localization.columnActionMenuItemSortAsc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -106,7 +108,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc?.replace(
+            {localization.columnActionMenuItemSortDesc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -116,8 +118,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         column.canFilter && [
           <Divider key={0} />,
           <MenuItem key={1} onClick={handleFilterByColumn}>
-            <FilterIcon />{' '}
-            {localization?.filterTextFieldPlaceholder?.replace(
+            <FilterListIcon />{' '}
+            {localization.filterTextFieldPlaceholder?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -128,7 +130,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           <Divider key={1} />,
           <MenuItem key={2} onClick={handleGroupByColumn}>
             <DynamicFeedIcon />{' '}
-            {localization?.[
+            {localization[
               column.isGrouped
                 ? 'columnActionMenuItemUnGroupBy'
                 : 'columnActionMenuItemGroupBy'
@@ -139,7 +141,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         <Divider key={0} />,
         <MenuItem key={1} onClick={handleHideColumn}>
           <VisibilityOffIcon />{' '}
-          {localization?.columnActionMenuItemHideColumn?.replace(
+          {localization.columnActionMenuItemHideColumn?.replace(
             '{column}',
             String(column.Header),
           )}

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
-import EditIcon from '@mui/icons-material/Edit';
+import { MRT_Row } from '..';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -11,7 +10,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  row: Row;
+  row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   handleEdit: () => void;
 }
@@ -23,6 +22,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
   setAnchorEl,
 }) => {
   const {
+    icons: { EditIcon },
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
@@ -37,7 +37,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit}>
-          <EditIcon /> {localization?.rowActionMenuItemEdit}
+          <EditIcon /> {localization.rowActionMenuItemEdit}
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
+import { MRT_ColumnInstance } from '..';
 
 interface Props {
-  column: ColumnInstance;
+  column: MRT_ColumnInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
@@ -35,7 +36,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c, i) => (
+      {column.columns?.map((c: MRT_ColumnInstance, i) => (
         <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
       ))}
     </>

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import {
   CircularProgress,
   LinearProgress,
@@ -50,6 +50,24 @@ export const MRT_TableContainer: FC<Props> = () => {
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
+  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';
+      }
+    }
+  }, [fullScreen]);
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -47,7 +47,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
 
   const selectMessage =
     tableInstance.selectedFlatRows.length > 0
-      ? localization?.toolbarAlertSelectionMessage
+      ? localization.toolbarAlertSelectionMessage
           ?.replace(
             '{selectedCount}',
             tableInstance.selectedFlatRows.length.toString(),
@@ -58,10 +58,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
   const groupedByMessage =
     tableInstance.state.groupBy.length > 0 ? (
       <span>
-        {localization?.toolbarAlertGroupedByMessage}{' '}
+        {localization.toolbarAlertGroupedByMessage}{' '}
         {tableInstance.state.groupBy.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
-            {index > 0 ? localization?.toolbarAlertGroupedThenByMessage : ''}
+            {index > 0 ? localization.toolbarAlertGroupedThenByMessage : ''}
             <Chip
               color="secondary"
               label={

package/src/useMRT.tsx

@@ -1,15 +1,13 @@
 import React, {
   Context,
-  createContext,
   PropsWithChildren,
+  createContext,
   useContext,
   useMemo,
   useState,
 } from 'react';
 import {
   PluginHook,
-  Row,
-  TableInstance,
   useExpanded,
   useFilters,
   useFlexLayout,
@@ -21,23 +19,28 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
+import { MRT_Row, MRT_TableInstance } from '.';
+import { MRT_Icons } from './icons';
+import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
 
-export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   anyRowsExpanded: boolean;
-  currentEditingRow: Row<D> | null;
+  currentEditingRow: MRT_Row<D> | null;
   densePadding: boolean;
   fullScreen: boolean;
-  setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+  icons: MRT_Icons;
+  localization: MRT_Localization;
+  setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setFullScreen: (fullScreen: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
   setShowSearch: (showSearch: boolean) => void;
   showFilters: boolean;
   showSearch: boolean;
-  tableInstance: TableInstance<D>;
-}
+  tableInstance: MRT_TableInstance<D>;
+};
 
 const MaterialReactTableContext = (<D extends {}>() =>
   createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();
@@ -58,28 +61,32 @@ export const MaterialReactTableProvider = <D extends {}>(
   if (props.enableColumnResizing)
     hooks.unshift(useResizeColumns, useFlexLayout);
 
-  const tableInstance = useTable<D>(props, ...hooks);
+  const tableInstance = useTable<D>(props, ...hooks) as MRT_TableInstance<D>;
 
   const anyRowsCanExpand = useMemo(
-    () => tableInstance.rows.some((row) => row.canExpand),
+    // @ts-ignore
+    () => tableInstance.rows.some((row: MRT_Row) => row.canExpand),
     [tableInstance.rows],
   );
   const anyRowsExpanded = useMemo(
-    () => tableInstance.rows.some((row) => row.isExpanded),
+    // @ts-ignore
+    () => tableInstance.rows.some((row: MRT_Row) => row.isExpanded),
     [tableInstance.rows],
   );
-  const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
+    null,
+  );
   const [densePadding, setDensePadding] = useState(
-    props.defaultDensePadding ?? false,
+    props.initialState?.densePadding ?? false,
   );
   const [fullScreen, setFullScreen] = useState(
-    props.defaultFullScreen ?? false,
+    props.initialState?.fullScreen ?? false,
   );
   const [showFilters, setShowFilters] = useState(
-    props.defaultShowFilters ?? false,
+    props.initialState?.showFilters ?? false,
   );
   const [showSearch, setShowSearch] = useState(
-    props.defaultShowSearchTextField ?? false,
+    props.initialState?.showSearchTextField ?? false,
   );
 
   return (
@@ -108,5 +115,5 @@ export const MaterialReactTableProvider = <D extends {}>(
 };
 
 export const useMRT = <D extends {}>(): UseMRT<D> =>
-  //@ts-ignore
+  // @ts-ignore
   useContext<UseMRT<D>>(MaterialReactTableContext);