material-react-table 0.3.2 → 0.4.0

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,26 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, Menu, Tooltip } from '@mui/material';
+import {
+  Button,
+  IconButton,
+  Menu,
+  Tooltip,
+  styled,
+  Divider,
+} from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
+const MenuButtons = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 0.5rem 0.5rem 0.5rem',
+});
+
 interface Props {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = () => {
-  const { tableInstance, localization } = useMaterialReactTable();
+  const { tableInstance, localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -31,6 +44,24 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
       >
+        <MenuButtons>
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization?.columnShowHideMenuHideAll}
+          </Button>
+          <Button
+            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+            onClick={() => tableInstance.toggleHideAllColumns(false)}
+          >
+            {localization?.columnShowHideMenuShowAll}
+          </Button>
+        </MenuButtons>
+        <Divider />
         {tableInstance.columns.map((column, index) => (
           <MRT_ShowHideColumnsMenu
             key={`${index}-${column.id}`}

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
 
@@ -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,
   },
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+  const { localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -35,9 +35,9 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     <>
       <IconButton
         aria-label={localization?.columnActionMenuButtonTitle}
-        title={localization?.columnActionMenuButtonTitle}
         onClick={handleClick}
         size="small"
+        title={localization?.columnActionMenuButtonTitle}
       >
         <MoreVertIcon />
       </IconButton>

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
 type Props = {};
 
 export const MRT_ToggleFiltersButton: FC<Props> = () => {
-  const { localization, setShowFilters, showFilters } = useMaterialReactTable();
+  const { localization, setShowFilters, showFilters } = useMRT();
 
   return (
     <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>

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 { useMaterialReactTable } from '../useMaterialReactTable';
+import EditIcon from '@mui/icons-material/Edit';
+import { useMRT } from '../useMRT';
 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,11 +25,15 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
-    localization,
     currentEditingRow,
+    densePadding,
+    localization,
+    renderRowActionMenuItems,
+    enableRowEditing,
+    setCurrentEditingRow,
     renderRowActions,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -37,29 +43,45 @@ 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,33 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+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 } =
+    useMRT();
+
+  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

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
-  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
+  const { muiTableFooterProps, tableInstance } = useMRT();
 
   return (
     <TableFooter {...muiTableFooterProps}>

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
@@ -21,7 +21,7 @@ interface Props {
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
   const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
-    useMaterialReactTable();
+    useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 

package/src/footer/MRT_TableFooterRow.tsx

@@ -3,7 +3,7 @@ import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   footerGroup: HeaderGroup;
@@ -16,10 +16,11 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     anyRowsCanExpand,
     enableSelection,
     enableRowActions,
+    enableRowNumbers,
     positionActionsColumn,
     tableInstance,
     muiTableFooterRowProps,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   //if no content in row, skip row
   if (!columns?.some((c) => c.Footer)) return null;
@@ -40,6 +41,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
+      {enableRowNumbers && <MRT_TableSpacerCell />}
       {enableRowActions && positionActionsColumn === 'first' && (
         <MRT_TableSpacerCell />
       )}
@@ -51,8 +53,11 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column,) => (
-        <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
+      {footerGroup.headers.map((column) => (
+        <MRT_TableFooterCell
+          key={column.getFooterProps().key}
+          column={column}
+        />
       ))}
       {enableRowActions && positionActionsColumn === 'last' && (
         <MRT_TableSpacerCell />

package/src/head/MRT_TableHead.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMRT();
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function

package/src/head/MRT_TableHeadCell.tsx

@@ -7,36 +7,41 @@ import {
   Collapse,
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
+import { useMRT } from '../useMRT';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-export const StyledTableHeadCell = styled(MuiTableCell, {
+export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
     prop !== 'densePadding' && prop !== 'enableColumnResizing',
 })<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
   ({ densePadding, enableColumnResizing }) => ({
     fontWeight: 'bold',
-    verticalAlign: 'text-top',
+    height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
+    paddingTop: densePadding ? '0.75rem' : '1.25rem',
     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)({
@@ -59,7 +64,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     muiTableHeadCellProps,
     showFilters,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -85,14 +90,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   };
 
   return (
-    <StyledTableHeadCell
+    <MRT_StyledTableHeadCell
       align={isParentHeader ? 'center' : 'left'}
       densePadding={densePadding}
       enableColumnResizing={enableColumnResizing}
       {...tableCellProps}
     >
-      <TableCellContents>
-        <TableCellText
+      <TableCellWrapper>
+        <TableCellTopContents
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
         >
           <CellFlexItem {...column.getSortByToggleProps()}>
@@ -108,7 +113,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 }
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
-                style={{ margin: 0 }}
               />
             )}
           </CellFlexItem>
@@ -125,13 +129,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>
-    </StyledTableHeadCell>
+      </TableCellWrapper>
+    </MRT_StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadCellActions.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { useMRT } from '../useMRT';
+import { MRT_StyledTableHeadCell } from './MRT_TableHeadCell';
+
+interface Props {}
+
+export const MRT_TableHeadCellActions: FC<Props> = () => {
+  const { densePadding, localization } = useMRT();
+
+  return (
+    <MRT_StyledTableHeadCell
+      densePadding={densePadding}
+      style={{ textAlign: 'center' }}
+    >
+      {localization?.actionsHeadColumnTitle}
+    </MRT_StyledTableHeadCell>
+  );
+};

package/src/head/MRT_TableHeadRow.tsx

@@ -1,11 +1,15 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell, StyledTableHeadCell } from './MRT_TableHeadCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import {
+  MRT_StyledTableHeadCell,
+  MRT_TableHeadCell,
+} from './MRT_TableHeadCell';
+import { useMRT } from '../useMRT';
 import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
 
 interface Props {
   headerGroup: HeaderGroup;
@@ -14,16 +18,15 @@ interface Props {
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     disableExpandAll,
+    enableRowNumbers,
     enableRowActions,
     enableSelection,
-    localization,
     muiTableHeadRowProps,
     positionActionsColumn,
     renderDetailPanel,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
@@ -46,14 +49,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
+      {enableRowNumbers &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <MRT_StyledTableHeadCell>#</MRT_StyledTableHeadCell>
+        ))}
       {enableRowActions &&
         positionActionsColumn === 'first' &&
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell>
-            {localization?.actionsHeadColumnTitle}
-          </StyledTableHeadCell>
+          <MRT_TableHeadCellActions />
         ))}
       {anyRowsCanExpand || renderDetailPanel ? (
         !disableExpandAll && !isParentHeader ? (
@@ -81,9 +88,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell densePadding={densePadding}>
-            {localization?.actionsHeadColumnTitle}
-          </StyledTableHeadCell>
+          <MRT_TableHeadCellActions />
         ))}
     </TableRow>
   );

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -1,16 +1,18 @@
 import React, { FC } from 'react';
 import { Switch, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_DensePaddingSwitch: FC<Props> = () => {
-  const { densePadding, setDensePadding, localization } =
-    useMaterialReactTable();
+  const { densePadding, setDensePadding, localization } = useMRT();
 
   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,32 +1,43 @@
-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';
+import { useMRT } from '../useMRT';
 
 interface Props {
   cell: Cell;
 }
 
-export const MRT_EditCellTextfield: FC<Props> = ({ cell }) => {
+export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const {
-    localization,
     currentEditingRow,
-    setCurrentEditingRow,
+    localization,
     muiTableBodyCellEditTextFieldProps,
-  } = useMaterialReactTable();
+    setCurrentEditingRow,
+  } = useMRT();
 
   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}
     />