material-react-table 0.3.2 → 0.4.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,16 +1,16 @@
 import React, { ChangeEvent, FC, useState } from 'react';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+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 { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: HeaderGroup;
 }
 
-export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+export const MRT_FilterTextField: FC<Props> = ({ column }) => {
+  const { localization } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -24,13 +24,23 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
   };
 
   if (column.Filter) {
-    return <>{column.Filter({ column })}</>;
+    return <>{column.Filter?.({ column })}</>;
   }
 
   return (
     <TextField
+      fullWidth
+      id={`filter-${column.id}-column`}
+      inputProps={{
+        style: {
+          textOverflow: 'ellipsis',
+        },
+      }}
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder}
+      placeholder={localization?.filterTextFieldPlaceholder?.replace(
+        '{column}',
+        String(column.Header),
+      )}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         setFilterValue(e.target.value);
         handleChange(e.target.value);
@@ -40,21 +50,37 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
       variant="standard"
       InputProps={{
         startAdornment: (
-          <InputAdornment position="start">
-            <FilterIcon />
-          </InputAdornment>
+          <Tooltip
+            arrow
+            title={
+              localization?.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              ) ?? ''
+            }
+          >
+            <InputAdornment position="start">
+              <FilterIcon />
+            </InputAdornment>
+          </Tooltip>
         ),
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton
-              aria-label={localization?.filterTextFieldClearButtonTitle}
-              disabled={filterValue?.length === 0}
-              onClick={handleClear}
-              size="small"
-              title={localization?.filterTextFieldClearButtonTitle}
+            <Tooltip
+              arrow
+              title={localization?.filterTextFieldClearButtonTitle ?? ''}
             >
-              <CloseIcon fontSize="small" />
-            </IconButton>
+              <span>
+                <IconButton
+                  aria-label={localization?.filterTextFieldClearButtonTitle}
+                  disabled={filterValue?.length === 0}
+                  onClick={handleClear}
+                  size="small"
+                >
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
           </InputAdornment>
         ),
       }}

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import {
+  Collapse,
   IconButton,
   InputAdornment,
   styled,
@@ -7,7 +8,7 @@ import {
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
 const TextField = styled(MuiTextField)({
@@ -18,11 +19,12 @@ interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
-    tableInstance,
-    muiSearchTextFieldProps,
+    showSearch,
     localization,
+    muiSearchTextFieldProps,
     onGlobalFilterChange,
-  } = useMaterialReactTable();
+    tableInstance,
+  } = useMRT();
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -40,35 +42,38 @@ export const MRT_SearchTextField: FC<Props> = () => {
   };
 
   return (
-    <TextField
-      placeholder={localization?.searchTextFieldPlaceholder}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        setSearchValue(event.target.value);
-        handleChange(event);
-      }}
-      value={searchValue ?? ''}
-      variant="standard"
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <SearchIcon fontSize="small" />
-          </InputAdornment>
-        ),
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton
-              aria-label={localization?.searchTextFieldClearButtonTitle}
-              disabled={searchValue?.length === 0}
-              onClick={handleClear}
-              size="small"
-              title={localization?.searchTextFieldClearButtonTitle}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          </InputAdornment>
-        ),
-      }}
-      {...muiSearchTextFieldProps}
-    />
+    <Collapse in={showSearch} orientation="horizontal">
+      <TextField
+        id="global-search-text-field"
+        placeholder={localization?.searchTextFieldPlaceholder}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setSearchValue(event.target.value);
+          handleChange(event);
+        }}
+        value={searchValue ?? ''}
+        variant="standard"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon fontSize="small" />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label={localization?.searchTextFieldClearButtonTitle}
+                disabled={searchValue?.length === 0}
+                onClick={handleClear}
+                size="small"
+                title={localization?.searchTextFieldClearButtonTitle}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        {...muiSearchTextFieldProps}
+      />
+    </Collapse>
   );
 };

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
-import { Checkbox, TableCell as MuiTableCell, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '0' : '0.6rem',
-  transition: 'all 0.2s ease-in-out',
-}));
+import { Checkbox } from '@mui/material';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 export const MRT_SelectAllCheckbox = () => {
   const { tableInstance, disableSelectAll, densePadding, localization } =
-    useMaterialReactTable();
+    useMRT();
 
   return (
-    <TableCell densePadding={densePadding} variant="head">
+    <MRT_TableButtonCell densePadding={densePadding} variant="head">
       {!disableSelectAll ? (
         <Checkbox
-          aria-label={localization?.selectAllCheckboxTitle}
+          inputProps={{
+            'aria-label': localization?.selectAllCheckboxTitle ?? '',
+          }}
           {...tableInstance.getToggleAllPageRowsSelectedProps()}
         />
       ) : null}
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,22 +1,16 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell as MuiTableCell, styled } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '0' : '0.6rem',
-  transition: 'all 0.2s ease-in-out',
-}));
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 interface Props {
   row: Row;
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange, densePadding } =
-    useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding, localization } =
+    useMRT();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
@@ -24,11 +18,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell densePadding={densePadding}>
+    <MRT_TableButtonCell densePadding={densePadding}>
       <Checkbox
-        {...row.getToggleRowSelectedProps()}
+        inputProps={{
+          'aria-label': localization?.selectCheckboxTitle,
+        }}
         onChange={onSelectChange}
+        {...row.getToggleRowSelectedProps()}
       />
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { ColumnInstance } from 'react-table';
+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';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -14,7 +15,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: ColumnInstance;
+  column: HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
@@ -25,10 +26,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 }) => {
   const {
     disableColumnHiding,
-    enableColumnGrouping,
+    disableFilters,
     disableSortBy,
+    enableColumnGrouping,
     localization,
-  } = useMaterialReactTable();
+    setShowFilters,
+  } = useMRT();
 
   const handleClearSort = () => {
     column.clearSortBy();
@@ -55,6 +58,22 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleFilterByColumn = () => {
+    setShowFilters(true);
+    setTimeout(
+      () =>
+        document
+          .getElementById(
+            // @ts-ignore
+            column.muiTableHeadCellFilterTextFieldProps?.id ??
+              `filter-${column.id}-column`,
+          )
+          ?.focus(),
+      200,
+    );
+    setAnchorEl(null);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -75,7 +94,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             disabled={column.isSorted && !column.isSortedDesc}
             onClick={handleSortAsc}
           >
-            <SortIcon /> {localization?.columnActionMenuItemSortAsc}
+            <SortIcon />{' '}
+            {localization?.columnActionMenuItemSortAsc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           </MenuItem>,
           <MenuItem
             key={3}
@@ -83,25 +106,45 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc}
+            {localization?.columnActionMenuItemSortDesc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </MenuItem>,
+        ]}
+      {!disableFilters &&
+        column.canFilter && [
+          <Divider key={0} />,
+          <MenuItem key={1} onClick={handleFilterByColumn}>
+            <FilterIcon />{' '}
+            {localization?.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </MenuItem>,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
+          <Divider key={1} />,
+          <MenuItem key={2} onClick={handleGroupByColumn}>
+            <DynamicFeedIcon />{' '}
+            {localization?.[
+              column.isGrouped
+                ? 'columnActionMenuItemUnGroupBy'
+                : 'columnActionMenuItemGroupBy'
+            ]?.replace('{column}', String(column.Header))}
           </MenuItem>,
-          <Divider key={4} />,
         ]}
-      {!disableColumnHiding && (
-        <MenuItem onClick={handleHideColumn}>
-          <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemGroupBy}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={!column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemUnGroupBy}
-        </MenuItem>
-      )}
+      {!disableColumnHiding && [
+        <Divider key={0} />,
+        <MenuItem key={1} onClick={handleHideColumn}>
+          <VisibilityOffIcon />{' '}
+          {localization?.columnActionMenuItemHideColumn?.replace(
+            '{column}',
+            String(column.Header),
+          )}
+        </MenuItem>,
+      ]}
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 import EditIcon from '@mui/icons-material/Edit';
 
@@ -13,25 +13,21 @@ interface Props {
   anchorEl: HTMLElement | null;
   row: Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  handleEdit: () => void;
 }
 
 export const MRT_RowActionMenu: FC<Props> = ({
   anchorEl,
   row,
+  handleEdit,
   setAnchorEl,
 }) => {
   const {
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
-    setCurrentEditingRow,
     tableInstance,
-  } = useMaterialReactTable();
-
-  const handleEdit = () => {
-    setCurrentEditingRow({ ...row });
-    setAnchorEl(null);
-  };
+  } = useMRT();
 
   return (
     <Menu

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch, Typography } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 
 interface Props {
@@ -8,23 +7,33 @@ interface Props {
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const { maxColumnDepth } = useMaterialReactTable();
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
-  const isMaxDepth = column.depth === maxColumnDepth;
+  const allChildColumnsVisible =
+    isParentHeader &&
+    !!column.columns?.every((childColumn) => childColumn.isVisible);
+
+  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+
+  const handleToggleColumnHidden = (column: ColumnInstance) => {
+    if (isParentHeader) {
+      column?.columns?.forEach?.((childColumn) => {
+        childColumn.toggleHidden(switchChecked);
+      });
+    } else {
+      column.toggleHidden();
+    }
+  };
 
   return (
     <>
-      <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
-        {isMaxDepth ? (
-          <FormControlLabel
-            checked={column.isVisible}
-            control={<Switch />}
-            label={column.Header as string}
-            onChange={() => isMaxDepth && column.toggleHidden()}
-          />
-        ) : (
-          <Typography>{column.Header}</Typography>
-        )}
+      <MenuItem style={{ paddingLeft: `${(column.depth + 0.5) * 2}rem` }}>
+        <FormControlLabel
+          checked={switchChecked}
+          control={<Switch />}
+          label={column.Header as string}
+          onChange={() => handleToggleColumnHidden(column)}
+        />
       </MenuItem>
       {column.columns?.map((c, i) => (
         <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />

package/src/table/MRT_Table.tsx

@@ -3,13 +3,13 @@ import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_Table: FC<Props> = () => {
   const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
-    useMaterialReactTable();
+    useMRT();
 
   const tableProps = {
     ...muiTableProps,

package/src/table/MRT_TableButtonCell.tsx

@@ -0,0 +1,9 @@
+import { styled, TableCell as MuiTableCell } from '@mui/material';
+
+export const MRT_TableButtonCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+}));

package/src/table/MRT_TableContainer.tsx

@@ -1,17 +1,32 @@
 import React, { FC } from 'react';
 import {
-  alpha,
   CircularProgress,
   LinearProgress,
   Paper,
+  TableContainer as MuiTableContainer,
+  alpha,
   styled,
-  TableContainer,
 } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
+const TableContainer = styled(MuiTableContainer, {
+  shouldForwardProp: (prop) => prop !== 'fullScreen',
+})<{ fullScreen?: boolean; component?: any }>(({ fullScreen }) => ({
+  bottom: fullScreen ? '0' : undefined,
+  height: fullScreen ? '100%' : undefined,
+  left: fullScreen ? '0' : undefined,
+  margin: fullScreen ? '0' : undefined,
+  position: fullScreen ? 'absolute' : undefined,
+  right: fullScreen ? '0' : undefined,
+  top: fullScreen ? '0' : undefined,
+  transition: 'all 0.2s ease-in-out',
+  width: fullScreen ? '100vw' : undefined,
+  zIndex: 1200,
+}));
+
 const CircularProgressWrapper = styled('div')(({ theme }) => ({
   alignItems: 'center',
   backgroundColor: alpha(theme.palette.background.paper, 0.5),
@@ -27,15 +42,26 @@ interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
   const {
-    muiTableContainerProps,
-    hideToolbarTop,
+    fullScreen,
     hideToolbarBottom,
-    isLoading,
+    hideToolbarTop,
     isFetching,
-  } = useMaterialReactTable();
+    isLoading,
+    muiTableContainerProps,
+    tableInstance,
+  } = useMRT();
+
+  const tableContainerProps =
+    muiTableContainerProps instanceof Function
+      ? muiTableContainerProps(tableInstance)
+      : muiTableContainerProps;
 
   return (
-    <TableContainer component={Paper} {...muiTableContainerProps}>
+    <TableContainer
+      component={Paper}
+      fullScreen={fullScreen}
+      {...tableContainerProps}
+    >
       {!hideToolbarTop && <MRT_ToolbarTop />}
       {isFetching && <LinearProgress />}
       {isLoading && (

package/src/table/MRT_TableSpacerCell.tsx

@@ -1,13 +1,13 @@
 import React, { CSSProperties, FC } from 'react';
 import { TableCell } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   width?: CSSProperties['width'];
 }
 
 export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
-  const { muiTableBodyCellProps } = useMaterialReactTable();
+  const { muiTableBodyCellProps } = useMRT();
 
   const mTableBodyCellrops =
     muiTableBodyCellProps instanceof Function

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TablePagination } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, muiTablePaginationProps } = useMaterialReactTable();
+  const { tableInstance, muiTablePaginationProps } = useMRT();
 
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
@@ -31,6 +31,7 @@ export const MRT_TablePagination: FC<Props> = () => {
       showLastButton={
         tableInstance.rows.length / tableInstance.state.pageSize > 2
       }
+      style={{ padding: 0, position: 'relative', zIndex: 2 }}
       {...tablePaginationProps}
     />
   );