material-react-table 0.3.3 → 0.3.4

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -26,16 +26,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-      >
+      <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
         {tableInstance.columns.map((column, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
+          <MRT_ShowHideColumnsMenu key={`${index}-${column.id}`} column={column} />
         ))}
       </Menu>
     </>

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -9,8 +9,8 @@ const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1,
   },
@@ -35,17 +35,13 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     <>
       <IconButton
         aria-label={localization?.columnActionMenuButtonTitle}
-        title={localization?.columnActionMenuButtonTitle}
         onClick={handleClick}
         size="small"
+        title={localization?.columnActionMenuButtonTitle}
       >
         <MoreVertIcon />
       </IconButton>
-      <MRT_ColumnActionMenu
-        anchorEl={anchorEl}
-        column={column}
-        setAnchorEl={setAnchorEl}
-      />
+      <MRT_ColumnActionMenu anchorEl={anchorEl} column={column} setAnchorEl={setAnchorEl} />
     </>
   );
 };

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,10 +1,12 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
+import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import EditIcon from '@mui/icons-material/Edit';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -23,8 +25,12 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
-    localization,
     currentEditingRow,
+    densePadding,
+    localization,
+    renderRowActionMenuItems,
+    enableRowEditing,
+    setCurrentEditingRow,
     renderRowActions,
     tableInstance,
   } = useMaterialReactTable();
@@ -37,29 +43,41 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     setAnchorEl(event.currentTarget);
   };
 
-  if (renderRowActions) {
-    return <>{renderRowActions(row, tableInstance)}</>;
-  }
-
-  if (row.id === currentEditingRow?.id) {
-    return <MRT_EditActionButtons row={row} />;
-  }
+  const handleEdit = () => {
+    setCurrentEditingRow({ ...row });
+    setAnchorEl(null);
+  };
 
   return (
-    <>
-      <IconButton
-        aria-label={localization?.rowActionMenuButtonTitle}
-        title={localization?.rowActionMenuButtonTitle}
-        onClick={handleOpenRowActionMenu}
-        size="small"
-      >
-        <MoreHorizIcon />
-      </IconButton>
-      <MRT_RowActionMenu
-        anchorEl={anchorEl}
-        row={row}
-        setAnchorEl={setAnchorEl}
-      />
-    </>
+    <MRT_TableButtonCell densePadding={densePadding}>
+      {renderRowActions ? (
+        <>{renderRowActions(row, tableInstance)}</>
+      ) : row.id === currentEditingRow?.id ? (
+        <MRT_EditActionButtons row={row} />
+      ) : !renderRowActionMenuItems && enableRowEditing ? (
+        <Tooltip placement="right" arrow title={localization?.rowActionMenuItemEdit ?? ''}>
+          <IconButton onClick={handleEdit}>
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      ) : renderRowActionMenuItems ? (
+        <>
+          <IconButton
+            aria-label={localization?.rowActionMenuButtonTitle}
+            title={localization?.rowActionMenuButtonTitle}
+            onClick={handleOpenRowActionMenu}
+            size="small"
+          >
+            <MoreHorizIcon />
+          </IconButton>
+          <MRT_RowActionMenu
+            anchorEl={anchorEl}
+            handleEdit={handleEdit}
+            row={row}
+            setAnchorEl={setAnchorEl}
+          />
+        </>
+      ) : null}
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+
+type Props = {};
+
+export const MRT_ToggleSearchButton: FC<Props> = () => {
+  const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
+    useMaterialReactTable();
+
+  const handleToggleSearch = () => {
+    setShowSearch(!showSearch);
+    setTimeout(
+      () =>
+        document.getElementById(muiSearchTextFieldProps?.id ?? `global-search-text-field`)?.focus(),
+      200,
+    );
+  };
+
+  return (
+    <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
+      <IconButton size="small" onClick={handleToggleSearch}>
+        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/footer/MRT_TableFooter.tsx

@@ -11,10 +11,7 @@ export const MRT_TableFooter: FC<Props> = () => {
   return (
     <TableFooter {...muiTableFooterProps}>
       {tableInstance.footerGroups.map((footerGroup) => (
-        <MRT_TableFooterRow
-          key={footerGroup.getFooterGroupProps().key}
-          footerGroup={footerGroup}
-        />
+        <MRT_TableFooterRow key={footerGroup.getFooterGroupProps().key} footerGroup={footerGroup} />
       ))}
     </TableFooter>
   );

package/src/footer/MRT_TableFooterCell.tsx

@@ -4,8 +4,7 @@ import { HeaderGroup } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
 const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) =>
-    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
 })<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
   ({ densePadding, enableColumnResizing }) => ({
     fontWeight: 'bold',
@@ -20,8 +19,7 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
-    useMaterialReactTable();
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } = useMaterialReactTable();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 

package/src/footer/MRT_TableFooterRow.tsx

@@ -40,23 +40,17 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowActions && positionActionsColumn === 'first' && (
-        <MRT_TableSpacerCell />
-      )}
+      {enableRowActions && positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
       {(anyRowsCanExpand || renderDetailPanel) && (
         <MRT_TableSpacerCell
-          width={`${
-            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-          }rem`}
+          width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column,) => (
+      {footerGroup.headers.map((column) => (
         <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
       ))}
-      {enableRowActions && positionActionsColumn === 'last' && (
-        <MRT_TableSpacerCell />
-      )}
+      {enableRowActions && positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -9,17 +9,12 @@ export const MRT_TableHead: FC<Props> = () => {
   const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
 
   const tableHeadProps =
-    muiTableHeadProps instanceof Function
-      ? muiTableHeadProps(tableInstance)
-      : muiTableHeadProps;
+    muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
       {tableInstance.headerGroups.map((headerGroup) => (
-        <MRT_TableHeadRow
-          key={headerGroup.getHeaderGroupProps().key}
-          headerGroup={headerGroup}
-        />
+        <MRT_TableHeadRow key={headerGroup.getHeaderGroupProps().key} headerGroup={headerGroup} />
       ))}
     </TableHead>
   );

package/src/head/MRT_TableHeadCell.tsx

@@ -8,35 +8,38 @@ import {
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
 export const StyledTableHeadCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) =>
-    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
 })<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
   ({ densePadding, enableColumnResizing }) => ({
     fontWeight: 'bold',
-    verticalAlign: 'text-top',
+    height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
     transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+    verticalAlign: 'text-top',
   }),
 );
 
-const TableCellContents = styled('div')({
+const TableCellWrapper = styled('div')({
+  alignContent: 'space-between',
   display: 'grid',
+  height: '100%',
 });
 
-const TableCellText = styled('div')({
+const TableCellTopContents = styled('div')({
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
+  alignItems: 'flex-start',
 });
 
 const CellFlexItem = styled('span')({
+  alignItems: 'center',
   display: 'flex',
   flexWrap: 'nowrap',
-  alignItems: 'center',
 });
 
 const Divider = styled(MuiDivider)({
@@ -91,10 +94,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       enableColumnResizing={enableColumnResizing}
       {...tableCellProps}
     >
-      <TableCellContents>
-        <TableCellText
-          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
-        >
+      <TableCellWrapper>
+        <TableCellTopContents style={{ justifyContent: isParentHeader ? 'center' : undefined }}>
           <CellFlexItem {...column.getSortByToggleProps()}>
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
@@ -108,7 +109,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 }
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
-                style={{ margin: 0 }}
               />
             )}
           </CellFlexItem>
@@ -125,13 +125,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
               />
             )}
           </CellFlexItem>
-        </TableCellText>
+        </TableCellTopContents>
         {!disableFilters && column.canFilter && (
           <Collapse in={showFilters}>
-            <MRT_FilterTextfield column={column} />
+            <MRT_FilterTextField column={column} />
           </Collapse>
         )}
-      </TableCellContents>
+      </TableCellWrapper>
     </StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -51,7 +51,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell>
+          <StyledTableHeadCell style={{ textAlign: 'center' }}>
             {localization?.actionsHeadColumnTitle}
           </StyledTableHeadCell>
         ))}
@@ -60,9 +60,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
-            width={`${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`}
+            width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
           />
         )
       ) : null}

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -5,12 +5,14 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_DensePaddingSwitch: FC<Props> = () => {
-  const { densePadding, setDensePadding, localization } =
-    useMaterialReactTable();
+  const { densePadding, setDensePadding, localization } = useMaterialReactTable();
 
   return (
     <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
       <Switch
+        inputProps={{
+          'aria-label': localization?.toggleDensePaddingSwitchTitle ?? '',
+        }}
         color="default"
         checked={densePadding}
         size="small"

package/src/inputs/{MRT_EditCellTextfield.tsx → MRT_EditCellTextField.tsx}

@@ -1,5 +1,5 @@
-import { TextField } from '@mui/material';
 import React, { ChangeEvent, FC } from 'react';
+import { TextField } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
@@ -7,26 +7,37 @@ interface Props {
   cell: Cell;
 }
 
-export const MRT_EditCellTextfield: FC<Props> = ({ cell }) => {
+export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const {
-    localization,
     currentEditingRow,
-    setCurrentEditingRow,
+    localization,
     muiTableBodyCellEditTextFieldProps,
+    setCurrentEditingRow,
   } = useMaterialReactTable();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (currentEditingRow) {
+      cell.row.values[cell.column.id] = event.target.value;
       setCurrentEditingRow({
         ...currentEditingRow,
-        values: { ...cell.row.values, [cell.column.id]: event.target.value },
       });
     }
+    cell.column.onCellEditChange?.(event, cell);
   };
 
+  const mTableBodyCellEditTextFieldProps =
+    muiTableBodyCellEditTextFieldProps instanceof Function
+      ? muiTableBodyCellEditTextFieldProps(cell)
+      : muiTableBodyCellEditTextFieldProps;
+
+  const mcTableBodyCellEditTextFieldProps =
+    cell.column.muiTableBodyCellEditTextFieldProps instanceof Function
+      ? cell.column.muiTableBodyCellEditTextFieldProps(cell)
+      : cell.column.muiTableBodyCellEditTextFieldProps;
+
   const textFieldProps = {
-    ...muiTableBodyCellEditTextFieldProps,
-    ...cell.column.muiTableBodyCellEditTextFieldProps,
+    ...mTableBodyCellEditTextFieldProps,
+    ...mcTableBodyCellEditTextFieldProps,
     style: {
       //@ts-ignore
       ...muiTableBodyCellEditTextFieldProps?.style,
@@ -36,20 +47,16 @@ export const MRT_EditCellTextfield: FC<Props> = ({ cell }) => {
   };
 
   if (cell.column.editable && cell.column.Edit) {
-    return (
-      <>
-        {cell.column.Edit({ ...textFieldProps, cell, onChange: handleChange })}
-      </>
-    );
+    return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
   }
 
   return (
     <TextField
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder}
       onChange={handleChange}
       onClick={(e) => e.stopPropagation()}
-      value={currentEditingRow?.values?.[cell.column.id]}
+      placeholder={localization?.filterTextFieldPlaceholder}
+      value={cell.value}
       variant="standard"
       {...textFieldProps}
     />

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,5 +1,5 @@
 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';
@@ -9,7 +9,7 @@ interface Props {
   column: HeaderGroup;
 }
 
-export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
+export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const { localization } = useMaterialReactTable();
 
   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,34 @@ 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}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
+            <Tooltip arrow title={localization?.filterTextFieldClearButtonTitle ?? ''}>
+              <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,
@@ -17,22 +18,15 @@ const TextField = styled(MuiTextField)({
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
-  const {
-    tableInstance,
-    muiSearchTextFieldProps,
-    localization,
-    onGlobalFilterChange,
-  } = useMaterialReactTable();
+  const { showSearch, localization, muiSearchTextFieldProps, onGlobalFilterChange, tableInstance } =
+    useMaterialReactTable();
 
   const [searchValue, setSearchValue] = useState('');
 
-  const handleChange = useAsyncDebounce(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      tableInstance.setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.(event);
-    },
-    200,
-  );
+  const handleChange = useAsyncDebounce((event: ChangeEvent<HTMLInputElement>) => {
+    tableInstance.setGlobalFilter(event.target.value ?? undefined);
+    onGlobalFilterChange?.(event);
+  }, 200);
 
   const handleClear = () => {
     setSearchValue('');
@@ -40,35 +34,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>
   );
 };