material-react-table 0.3.3 → 0.3.4

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,26 +1,21 @@
 import React from 'react';
-import { Checkbox, TableCell as MuiTableCell, styled } from '@mui/material';
+import { Checkbox } 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 { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, disableSelectAll, densePadding, localization } =
-    useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding, localization } = useMaterialReactTable();
 
   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,15 @@
 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 { 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 } = useMaterialReactTable();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
@@ -24,11 +17,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 { 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,20 +15,18 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: ColumnInstance;
+  column: HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
-export const MRT_ColumnActionMenu: FC<Props> = ({
-  anchorEl,
-  column,
-  setAnchorEl,
-}) => {
+export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl }) => {
   const {
     disableColumnHiding,
     enableColumnGrouping,
     disableSortBy,
     localization,
+    disableFilters,
+    setShowFilters,
   } = useMaterialReactTable();
 
   const handleClearSort = () => {
@@ -55,19 +54,26 @@ 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}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
-    >
+    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
       {!disableSortBy &&
         column.canSort && [
-          <MenuItem
-            key={1}
-            disabled={!column.isSorted}
-            onClick={handleClearSort}
-          >
+          <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
             <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
           </MenuItem>,
           <MenuItem
@@ -75,7 +81,8 @@ 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 +90,34 @@ 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

@@ -13,40 +13,21 @@ interface Props {
   anchorEl: HTMLElement | null;
   row: Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  handleEdit: () => void;
 }
 
-export const MRT_RowActionMenu: FC<Props> = ({
-  anchorEl,
-  row,
-  setAnchorEl,
-}) => {
-  const {
-    enableRowEditing,
-    localization,
-    renderRowActionMenuItems,
-    setCurrentEditingRow,
-    tableInstance,
-  } = useMaterialReactTable();
-
-  const handleEdit = () => {
-    setCurrentEditingRow({ ...row });
-    setAnchorEl(null);
-  };
+export const MRT_RowActionMenu: FC<Props> = ({ anchorEl, row, handleEdit, setAnchorEl }) => {
+  const { enableRowEditing, localization, renderRowActionMenuItems, tableInstance } =
+    useMaterialReactTable();
 
   return (
-    <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
-    >
+    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
       {enableRowEditing && (
         <MenuItem onClick={handleEdit}>
           <EditIcon /> {localization?.rowActionMenuItemEdit}
         </MenuItem>
       )}
-      {renderRowActionMenuItems?.(row, tableInstance, () =>
-        setAnchorEl(null),
-      ) ?? null}
+      {renderRowActionMenuItems?.(row, tableInstance, () => setAnchorEl(null)) ?? null}
     </Menu>
   );
 };

package/src/table/MRT_Table.tsx

@@ -8,8 +8,7 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
-    useMaterialReactTable();
+  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } = useMaterialReactTable();
 
   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

@@ -26,13 +26,8 @@ const CircularProgressWrapper = styled('div')(({ theme }) => ({
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const {
-    muiTableContainerProps,
-    hideToolbarTop,
-    hideToolbarBottom,
-    isLoading,
-    isFetching,
-  } = useMaterialReactTable();
+  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isLoading, isFetching } =
+    useMaterialReactTable();
 
   return (
     <TableContainer component={Paper} {...muiTableContainerProps}>

package/src/table/MRT_TableSpacerCell.tsx

@@ -10,9 +10,7 @@ export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
   const { muiTableBodyCellProps } = useMaterialReactTable();
 
   const mTableBodyCellrops =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps()
-      : muiTableBodyCellProps;
+    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
   const tableCellProps = {
     ...mTableBodyCellrops,

package/src/toolbar/MRT_TablePagination.tsx

@@ -25,12 +25,9 @@ export const MRT_TablePagination: FC<Props> = () => {
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={tableInstance.state.pageIndex}
       rowsPerPage={tableInstance.state.pageSize}
-      showFirstButton={
-        tableInstance.rows.length / tableInstance.state.pageSize > 2
-      }
-      showLastButton={
-        tableInstance.rows.length / tableInstance.state.pageSize > 2
-      }
+      showFirstButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
+      showLastButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
+      style={{ padding: 0 }}
       {...tablePaginationProps}
     />
   );

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -5,7 +5,6 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
 
 const Toolbar = styled(MuiToolbar)({
-  padding: 0,
   display: 'flex',
   justifyContent: 'space-between',
 });
@@ -28,16 +27,15 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar variant="dense" {...toolbarProps}>
+    <Toolbar style={{ padding: 0 }} variant="dense" {...toolbarProps}>
       {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarButtons />
       ) : (
         <span />
       )}
-      {!manualPagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
+      {!manualPagination && ['bottom', 'both'].includes(positionPagination ?? '') && (
+        <MRT_TablePagination />
+      )}
     </Toolbar>
   );
 };

package/src/toolbar/MRT_ToolbarButtons.tsx

@@ -4,6 +4,7 @@ import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
+import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
 
 const ToolbarButtonsContainer = styled('div')({
   display: 'flex',
@@ -14,11 +15,12 @@ const ToolbarButtonsContainer = styled('div')({
 interface Props {}
 
 export const MRT_ToolbarButtons: FC<Props> = () => {
-  const { disableFilters, disableColumnHiding, disableDensePaddingToggle } =
+  const { disableFilters, disableColumnHiding, disableDensePaddingToggle, disableGlobalFilter } =
     useMaterialReactTable();
 
   return (
     <ToolbarButtonsContainer>
+      {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { styled, Toolbar as MuiToolbar, Typography } from '@mui/material';
+import { styled, Toolbar as MuiToolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
@@ -7,6 +7,7 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 
 const Toolbar = styled(MuiToolbar)({
   display: 'grid',
+  padding: '0.5rem !important',
 });
 
 const ToolbarTopRow = styled('div')({
@@ -27,12 +28,11 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     disableGlobalFilter,
     hideToolbarActions,
     manualPagination,
-    muiTableTitleProps,
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
+    renderToolbarActions,
     tableInstance,
-    title,
   } = useMaterialReactTable();
 
   const toolbarProps =
@@ -43,25 +43,16 @@ export const MRT_ToolbarTop: FC<Props> = () => {
   return (
     <Toolbar variant="dense" {...toolbarProps}>
       <ToolbarTopRow>
-        {title ? (
-          <Typography variant="h5" {...muiTableTitleProps}>
-            {title}
-          </Typography>
-        ) : (
-          <span />
-        )}
+        {renderToolbarActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
-          {!hideToolbarActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarButtons />
-          )}
+          {!hideToolbarActions && positionToolbarActions === 'top' && <MRT_ToolbarButtons />}
         </ToolbarActionsContainer>
       </ToolbarTopRow>
       <div>
-        {!manualPagination &&
-          ['top', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination />
-          )}
+        {!manualPagination && ['top', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
       </div>
     </Toolbar>
   );

package/src/useMaterialReactTable.tsx

@@ -1,10 +1,4 @@
-import React, {
-  Context,
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useState,
-} from 'react';
+import React, { Context, createContext, PropsWithChildren, useContext, useState } from 'react';
 import {
   PluginHook,
   Row,
@@ -31,14 +25,16 @@ export interface UseMaterialReactTable<D extends {}>
   setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
+  setShowSearch: (showSearch: boolean) => void;
   showFilters: boolean;
+  showSearch: boolean;
   tableInstance: TableInstance<D>;
 }
 
 const MaterialReactTableContext = (<D extends {}>() =>
-  createContext<UseMaterialReactTable<D>>(
-    {} as UseMaterialReactTable<D>,
-  ) as Context<UseMaterialReactTable<D>>)();
+  createContext<UseMaterialReactTable<D>>({} as UseMaterialReactTable<D>) as Context<
+    UseMaterialReactTable<D>
+  >)();
 
 export const MaterialReactTableProvider = <D extends {}>(
   props: PropsWithChildren<MaterialReactTableProps<D>>,
@@ -60,12 +56,9 @@ export const MaterialReactTableProvider = <D extends {}>(
 
   const mrtCalcs = useMRTCalcs({ tableInstance });
 
-  const [showFilters, setShowFilters] = useState<boolean>(
-    props.defaultShowFilters ?? false,
-  );
-  const [densePadding, setDensePadding] = useState<boolean>(
-    props.defaultDensePadding ?? false,
-  );
+  const [showSearch, setShowSearch] = useState(props.defaultShowSearchTextField ?? false);
+  const [showFilters, setShowFilters] = useState<boolean>(props.defaultShowFilters ?? false);
+  const [densePadding, setDensePadding] = useState<boolean>(props.defaultDensePadding ?? false);
   const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
 
   return (
@@ -73,12 +66,14 @@ export const MaterialReactTableProvider = <D extends {}>(
       value={{
         ...mrtCalcs,
         ...props,
+        currentEditingRow,
         densePadding,
+        setCurrentEditingRow,
         setDensePadding,
         setShowFilters,
-        currentEditingRow,
-        setCurrentEditingRow,
+        setShowSearch,
         showFilters,
+        showSearch,
         // @ts-ignore
         tableInstance,
       }}
@@ -88,8 +83,6 @@ export const MaterialReactTableProvider = <D extends {}>(
   );
 };
 
-export const useMaterialReactTable = <
-  D extends {},
->(): UseMaterialReactTable<D> =>
+export const useMaterialReactTable = <D extends {}>(): UseMaterialReactTable<D> =>
   //@ts-ignore
   useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -19,28 +19,31 @@ export interface MRT_Localization {
   searchTextFieldClearButtonTitle: string;
   searchTextFieldPlaceholder: string;
   selectAllCheckboxTitle: string;
+  selectCheckboxTitle: string;
   showHideColumnsButtonTitle: string;
   toggleDensePaddingSwitchTitle: string;
   toggleFilterButtonTitle: string;
+  toggleSearchButtonTitle: string;
 }
 
 export const defaultLocalization: MRT_Localization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sorting',
-  columnActionMenuItemGroupBy: 'Group by column',
-  columnActionMenuItemHideColumn: 'Hide column',
-  columnActionMenuItemSortAsc: 'Sort ascending',
-  columnActionMenuItemSortDesc: 'Sort descending',
-  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  columnActionMenuItemGroupBy: 'Group by {column}',
+  columnActionMenuItemHideColumn: 'Hide {column} column',
+  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
+  columnActionMenuItemSortDesc: 'Sort by {column} descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
   rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
   rowActionMenuItemEdit: 'Edit',
+  selectCheckboxTitle: 'Select row',
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
@@ -48,4 +51,5 @@ export const defaultLocalization: MRT_Localization = {
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',
+  toggleSearchButtonTitle: 'Toggle search'
 };

package/src/utils/useMRTCalcs.tsx

@@ -11,9 +11,7 @@ interface Props<D extends {}> {
   tableInstance: TableInstance<D>;
 }
 
-export const useMRTCalcs = <D extends {}>({
-  tableInstance,
-}: Props<D>): UseMRTCalcs => {
+export const useMRTCalcs = <D extends {}>({ tableInstance }: Props<D>): UseMRTCalcs => {
   const anyRowsCanExpand = useMemo(
     () => tableInstance.rows.some((row) => row.canExpand),
     [tableInstance.rows],