material-react-table 0.2.0 → 0.3.3

package/src/body/MRT_TableBodyCell.tsx

@@ -1,7 +1,15 @@
-import React, { FC } from 'react';
-import { TableCell } from '@mui/material';
+import React, { FC, MouseEvent } from 'react';
+import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_EditCellTextfield } from '../inputs/MRT_EditCellTextfield';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '0.5rem' : '1rem',
+  transition: 'all 0.2s ease-in-out',
+}));
 
 interface Props {
   cell: Cell;
@@ -9,17 +17,53 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    tableInstance,
-    OverrideTableBodyCellComponent,
+    onCellClick,
+    muiTableBodyCellProps,
+    densePadding,
+    currentEditingRow,
   } = useMaterialReactTable();
 
-  if (OverrideTableBodyCellComponent) {
-    return <>{OverrideTableBodyCellComponent(cell, tableInstance)}</>;
-  }
+  const mTableCellBodyProps =
+    muiTableBodyCellProps instanceof Function
+      ? muiTableBodyCellProps(cell)
+      : muiTableBodyCellProps;
+
+  const mcTableCellBodyProps =
+    cell.column.muiTableBodyCellProps instanceof Function
+      ? cell.column.muiTableBodyCellProps(cell)
+      : cell.column.muiTableBodyCellProps;
+
+  const tableCellProps = {
+    ...mTableCellBodyProps,
+    ...mcTableCellBodyProps,
+    ...cell.getCellProps(),
+    style: {
+      ...cell.getCellProps().style,
+      ...(mTableCellBodyProps?.style ?? {}),
+      ...(mcTableCellBodyProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableCell variant="body" {...cell.getCellProps()}>
-      {cell.render('Cell')}
+    <TableCell
+      densePadding={densePadding}
+      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+        onCellClick?.(event, cell)
+      }
+      {...tableCellProps}
+    >
+      {currentEditingRow?.id === cell.row.id ? (
+        <MRT_EditCellTextfield cell={cell} />
+      ) : cell.isPlaceholder ? null : cell.isAggregated ? (
+        cell.render('Aggregated')
+      ) : cell.isGrouped ? (
+        <span>
+          {cell.render('Cell')} ({cell.row.subRows.length})
+        </span>
+      ) : (
+        cell.render('Cell')
+      )}
+      {}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,12 +1,25 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableRow } from '@mui/material';
+import {
+  alpha,
+  styled,
+  TableCell,
+  TableRow as MuiTableRow,
+} from '@mui/material';
 import { Row } from 'react-table';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+
+export const TableRow = styled(MuiTableRow, {
+  shouldForwardProp: (prop) => prop !== 'isSelected',
+})<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
+  backgroundColor: isSelected
+    ? alpha(theme.palette.primary.light, 0.1)
+    : 'transparent',
+}));
 
 interface Props {
   row: Row;
@@ -14,41 +27,56 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
-    OverrideTableBodyRowComponent,
     anyRowsCanExpand,
+    enableRowActions,
     enableSelection,
-    enableSubRowTree,
-    enableColumnHiding,
+    muiTableBodyRowProps,
     onRowClick,
+    positionActionsColumn,
     renderDetailPanel,
-    tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableBodyRowComponent) {
-    return <>{OverrideTableBodyRowComponent(row, tableInstance)}</>;
-  }
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getRowProps(),
+    style: {
+      ...row.getRowProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
 
   return (
     <>
       <TableRow
+        isSelected={row.isSelected}
+        hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
-        {...row.getRowProps()}
+        {...tableRowProps}
       >
-        {((enableSubRowTree && anyRowsCanExpand) || renderDetailPanel) &&
-          (row.canExpand || renderDetailPanel ? (
-            <MRT_ExpandButton row={row} />
-          ) : (
-            <TableCell
-              style={{ width: `${tableInstance.expandedDepth + 0.5}rem` }}
-            />
-          ))}
+        {enableRowActions && positionActionsColumn === 'first' && (
+          <TableCell>
+            <MRT_ToggleRowActionMenuButton row={row} />
+          </TableCell>
+        )}
+        {(anyRowsCanExpand || renderDetailPanel) && (
+          <MRT_ExpandButton row={row} />
+        )}
         {enableSelection && <MRT_SelectCheckbox row={row} />}
-        {row.cells.map((cell, index) => (
-          <MRT_TableBodyCell key={`${index}-${cell.value}`} cell={cell} />
+        {row.cells.map((cell) => (
+          <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
-        {enableColumnHiding && <MRT_TableSpacerCell />}
+        {enableRowActions && positionActionsColumn === 'last' && (
+          <TableCell>
+            <MRT_ToggleRowActionMenuButton row={row} />
+          </TableCell>
+        )}
       </TableRow>
       {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
     </>

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,8 +1,22 @@
-import React, { FC } from 'react';
-import { Collapse, TableCell, TableRow } from '@mui/material';
+import React, { FC, MouseEvent } from 'react';
+import {
+  Collapse,
+  styled,
+  TableCell as MuiTableCell,
+  TableRow,
+} from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'isExpanded',
+})<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  borderBottom: !isExpanded ? 'none' : undefined,
+  paddingBottom: isExpanded ? '1rem' : 0,
+  paddingTop: isExpanded ? '1rem' : 0,
+  transition: 'all 0.2s ease-in-out',
+}));
+
 interface Props {
   row: Row;
 }
@@ -11,25 +25,46 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const {
     tableInstance,
     renderDetailPanel,
-    OverrideTableDetailPanelComponent,
-    tableDetailPanelProps,
+    muiTableDetailPanelProps,
+    muiTableBodyRowProps,
+    onDetailPanelClick,
   } = useMaterialReactTable();
 
-  if (OverrideTableDetailPanelComponent) {
-    return <>{OverrideTableDetailPanelComponent(row, tableInstance)}</>;
-  }
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getToggleRowExpandedProps(),
+    style: {
+      ...row.getToggleRowExpandedProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
+
+  const mTableDetailPanelProps =
+    muiTableDetailPanelProps instanceof Function
+      ? muiTableDetailPanelProps(row)
+      : muiTableDetailPanelProps;
+
+  const tableCellProps = {
+    ...mTableDetailPanelProps,
+    style: {
+      ...(mTableDetailPanelProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableRow {...row.getToggleRowExpandedProps()}>
+    <TableRow hover {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
-        style={{
-          borderBottom: !row.isExpanded ? 'none' : undefined,
-          paddingBottom: row.isExpanded ? '1rem' : 0,
-          paddingTop: row.isExpanded ? '1rem' : 0,
-          transition: 'all 0.2s',
-        }}
-        {...tableDetailPanelProps}
+        isExpanded={row.isExpanded}
+        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+          onDetailPanelClick?.(event, row)
+        }
+        {...tableCellProps}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+import { IconButton, styled, Tooltip } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+
+const EditActionButtonWrappers = styled('div')({
+  display: 'flex',
+  gap: '0.75rem',
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
+  const {
+    localization,
+    setCurrentEditingRow,
+    onRowEditSubmit,
+    currentEditingRow,
+  } = useMaterialReactTable();
+
+  const handleCancel = () => {
+    setCurrentEditingRow(null);
+  };
+
+  const handleSave = async () => {
+    await onRowEditSubmit?.(currentEditingRow ?? row);
+    setCurrentEditingRow(null);
+  };
+
+  return (
+    <EditActionButtonWrappers>
+      <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
+        <IconButton
+          aria-label={localization?.rowActionButtonCancel}
+          onClick={handleCancel}
+        >
+          <CancelIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip arrow title={localization?.rowActionButtonSave ?? ''}>
+        <IconButton
+          aria-label={localization?.rowActionButtonSave}
+          color="info"
+          onClick={handleSave}
+        >
+          <SaveIcon />
+        </IconButton>
+      </Tooltip>
+    </EditActionButtonWrappers>
+  );
+};

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,22 +1,34 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { IconButton, styled, TableCell } from '@mui/material';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const ArrowRightIcon = styled(MuiArrowRightIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
+
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded } =
-    useMaterialReactTable();
+  const {
+    tableInstance,
+    localization,
+    anyRowsExpanded,
+    densePadding,
+    renderDetailPanel,
+  } = useMaterialReactTable();
 
   return (
     <TableCell
       size="small"
       {...tableInstance.getToggleAllRowsExpandedProps()}
       style={{
-        padding: '0.5rem',
-        paddingRight: '0',
-        width: `${tableInstance.expandedDepth + 2}rem`,
+        padding: densePadding ? '0' : '0.5rem 0.5rem',
+        transition: 'all 0.2s ease-in-out',
+        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
       }}
     >
       <IconButton
@@ -25,14 +37,9 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       >
         <ArrowRightIcon
           fontSize="small"
-          style={{
-            transform: tableInstance.isAllRowsExpanded
-              ? 'rotate(-180deg)'
-              : anyRowsExpanded
-              ? 'rotate(-90deg)'
-              : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          rotation={
+            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+          }
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,37 +1,49 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton, styled, TableCell as MuiTableCell } from '@mui/material';
 import { Row } from 'react-table';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'depth',
+})<{ densePadding?: boolean; depth: number }>(({ densePadding, depth }) => ({
+  padding: densePadding ? '0' : '0.6rem',
+  paddingLeft: `${depth + 0.5}rem`,
+  transition: 'all 0.2s ease-in-out',
+}));
+
+const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
+
 interface Props {
   row: Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, tableInstance } = useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } =
+    useMaterialReactTable();
 
   return (
-    <TableCell
-      size="small"
-      {...row.getToggleRowExpandedProps()}
-      style={{
-        padding: '0.5rem',
-        paddingRight: '0',
-        paddingLeft: `${row.depth + 0.5}rem`,
-        width: `${tableInstance.expandedDepth - row.depth + 2}rem`,
-      }}
-    >
+    <TableCell size="small" densePadding={densePadding} depth={row.depth}>
       <IconButton
         aria-label={localization?.expandButtonTitle}
+        disabled={!row.canExpand && !renderDetailPanel}
         title={localization?.expandButtonTitle}
+        {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
-          fontSize="small"
-          style={{
-            transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
+          rotation={
+            !row.canExpand && !renderDetailPanel
+              ? -90
+              : row.isExpanded
+              ? -180
+              : 0
+          }
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, Menu, TableCell } from '@mui/material';
+import { IconButton, Menu, Tooltip } from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
@@ -16,16 +16,16 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
   };
 
   return (
-    <TableCell size="small" style={{ width: '2rem', padding: '0.75rem 0' }}>
-      <IconButton
-        aria-label={localization?.showHideColumnsButtonTitle}
-        title={localization?.showHideColumnsButtonTitle}
-        onClick={handleClick}
-        size="small"
-        style={{ margin: '0 0 0 -0.75rem' }}
-      >
-        <ViewColumnIcon />
-      </IconButton>
+    <>
+      <Tooltip arrow title={localization?.showHideColumnsButtonTitle ?? ''}>
+        <IconButton
+          aria-label={localization?.showHideColumnsButtonTitle}
+          onClick={handleClick}
+          size="small"
+        >
+          <ViewColumnIcon />
+        </IconButton>
+      </Tooltip>
       <Menu
         anchorEl={anchorEl}
         open={!!anchorEl}
@@ -38,6 +38,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
           />
         ))}
       </Menu>
-    </TableCell>
+    </>
   );
 };

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -6,9 +6,11 @@ import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
 
 const IconButton = styled(MuiIconButton)({
-  opacity: 0.2,
+  opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
   '&:hover': {
     opacity: 1,
   },

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+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();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setShowFilters(!showFilters)}
+        size="small"
+      >
+        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -0,0 +1,65 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton as MuiIconButton, styled } from '@mui/material';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+
+const IconButton = styled(MuiIconButton)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1,
+  },
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
+  const {
+    localization,
+    currentEditingRow,
+    renderRowActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  if (renderRowActions) {
+    return <>{renderRowActions(row, tableInstance)}</>;
+  }
+
+  if (row.id === currentEditingRow?.id) {
+    return <MRT_EditActionButtons row={row} />;
+  }
+
+  return (
+    <>
+      <IconButton
+        aria-label={localization?.rowActionMenuButtonTitle}
+        title={localization?.rowActionMenuButtonTitle}
+        onClick={handleOpenRowActionMenu}
+        size="small"
+      >
+        <MoreHorizIcon />
+      </IconButton>
+      <MRT_RowActionMenu
+        anchorEl={anchorEl}
+        row={row}
+        setAnchorEl={setAnchorEl}
+      />
+    </>
+  );
+};

package/src/footer/MRT_TableFooter.tsx

@@ -2,35 +2,20 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_TablePagination } from './MRT_TablePagination';
 
 interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
-  const {
-    OverrideTableFooterComponent,
-    enablePagination,
-    positionPagination,
-    tableFooterProps,
-    tableInstance,
-  } = useMaterialReactTable();
-
-  if (OverrideTableFooterComponent) {
-    return <>{OverrideTableFooterComponent(tableInstance)}</>;
-  }
+  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
 
   return (
-    <TableFooter {...tableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup, index) => (
+    <TableFooter {...muiTableFooterProps}>
+      {tableInstance.footerGroups.map((footerGroup) => (
         <MRT_TableFooterRow
-          key={`${index}-${footerGroup.id}`}
+          key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}
         />
       ))}
-      {enablePagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
     </TableFooter>
   );
 };