material-react-table 0.3.0 → 0.3.1

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
@@ -11,25 +11,49 @@ 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: {
+      borderBottom: !row.isExpanded ? 'none' : undefined,
+      paddingBottom: row.isExpanded ? '1rem' : 0,
+      paddingTop: row.isExpanded ? '1rem' : 0,
+      transition: 'all 0.2s ease-in-out',
+      ...(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}
+        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,51 @@
+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, setCurrentEditingRowId, onRowEditSubmit } =
+    useMaterialReactTable();
+
+  const handleCancel = () => {
+    setCurrentEditingRowId(null);
+  };
+
+  const handleSave = async () => {
+    setCurrentEditingRowId(null);
+    await onRowEditSubmit?.(row);
+  };
+
+  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

@@ -6,16 +6,21 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded, renderDetailPanel } =
-    useMaterialReactTable();
+  const {
+    tableInstance,
+    localization,
+    anyRowsExpanded,
+    densePadding,
+    renderDetailPanel,
+  } = useMaterialReactTable();
 
   return (
     <TableCell
       size="small"
       {...tableInstance.getToggleAllRowsExpandedProps()}
       style={{
-        padding: '0.5rem',
-        paddingRight: '0',
+        padding: densePadding ? '0' : '0.5rem 0.5rem',
+        transition: 'all 0.2s ease-in-out',
         width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
       }}
     >

package/src/buttons/MRT_ExpandButton.tsx

@@ -9,30 +9,36 @@ interface Props {
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, tableInstance, renderDetailPanel } =
+  const { localization, tableInstance, densePadding, renderDetailPanel } =
     useMaterialReactTable();
 
   return (
     <TableCell
       size="small"
-      {...row.getToggleRowExpandedProps()}
       style={{
-        padding: '0.5rem',
-        paddingRight: '0',
+        padding: densePadding ? '0' : '0.6rem 0',
         paddingLeft: `${row.depth + 0.5}rem`,
+        transition: 'all 0.2s ease-in-out',
         width: `${
           renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2
         }rem`,
       }}
     >
       <IconButton
+        disabled={!row.canExpand && !renderDetailPanel}
         aria-label={localization?.expandButtonTitle}
         title={localization?.expandButtonTitle}
+        {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
-          fontSize="small"
+          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
           style={{
-            transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
+            transform:
+              !row.canExpand && !renderDetailPanel
+                ? 'rotate(-90deg)'
+                : row.isExpanded
+                ? 'rotate(-180deg)'
+                : 'rotate(0)',
             transition: 'transform 0.2s',
           }}
         />

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,7 +6,7 @@ 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',

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,
+    currentEditingRowId,
+    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 === currentEditingRowId) {
+    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}>
+    <TableFooter {...muiTableFooterProps}>
       {tableInstance.footerGroups.map((footerGroup, index) => (
         <MRT_TableFooterRow
           key={`${index}-${footerGroup.id}`}
           footerGroup={footerGroup}
         />
       ))}
-      {enablePagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
     </TableFooter>
   );
 };

package/src/footer/MRT_TableFooterCell.tsx

@@ -12,20 +12,31 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { tableInstance, overrideTableFooterCellComponent } =
-    useMaterialReactTable();
-
-  if (overrideTableFooterCellComponent) {
-    return <>{overrideTableFooterCellComponent(column, tableInstance)}</>;
-  }
+  const { muiTableFooterCellProps, densePadding } = useMaterialReactTable();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
+  const mTableFooterCellProps =
+    muiTableFooterCellProps instanceof Function
+      ? muiTableFooterCellProps(column)
+      : muiTableFooterCellProps;
+
+  const tableCellProps = {
+    ...mTableFooterCellProps,
+    ...column.getFooterProps(),
+    style: {
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: 'all 0.2s ease-in-out',
+      ...column.getFooterProps().style,
+      ...(mTableFooterCellProps?.style ?? {}),
+    },
+  };
+
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
       variant="head"
-      {...column.getFooterProps()}
+      {...tableCellProps}
     >
       {column.render('Footer')}
     </TableCell>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
+import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
@@ -14,35 +14,49 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     renderDetailPanel,
     columns,
     anyRowsCanExpand,
-    enableColumnHiding,
     enableSelection,
+    enableRowActions,
+    positionActionsColumn,
     tableInstance,
-    overrideTableFooterRowComponent,
+    muiTableFooterRowProps,
   } = useMaterialReactTable();
 
   //if no content in row, skip row
   if (!columns?.some((c) => c.Footer)) return null;
 
-  if (overrideTableFooterRowComponent) {
-    return <>{overrideTableFooterRowComponent(footerGroup, tableInstance)}</>;
-  }
+  const mTableFooterRowProps =
+    muiTableFooterRowProps instanceof Function
+      ? muiTableFooterRowProps(footerGroup)
+      : muiTableFooterRowProps;
+
+  const tableRowProps = {
+    ...mTableFooterRowProps,
+    ...footerGroup.getFooterGroupProps(),
+    style: {
+      ...footerGroup.getFooterGroupProps().style,
+      ...(mTableFooterRowProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableRow {...footerGroup.getFooterGroupProps()}>
+    <TableRow {...tableRowProps}>
+      {enableRowActions && positionActionsColumn === 'first' && (
+        <MRT_TableSpacerCell />
+      )}
       {(anyRowsCanExpand || renderDetailPanel) && (
-        <TableCell
-          style={{
-            width: `${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`,
-          }}
+        <MRT_TableSpacerCell
+          width={`${
+            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+          }rem`}
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
       {footerGroup.headers.map((column, index) => (
         <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
       ))}
-      {enableColumnHiding && <MRT_TableSpacerCell />}
+      {enableRowActions && positionActionsColumn === 'last' && (
+        <MRT_TableSpacerCell />
+      )}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,32 +1,20 @@
 import React, { FC } from 'react';
-import { LinearProgress, TableHead } from '@mui/material';
+import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_TablePagination } from '../footer/MRT_TablePagination';
 
 interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
-  const {
-    overrideTableHeadComponent,
-    tableInstance,
-    tableHeadProps,
-    enablePagination,
-    isFetching,
-    positionPagination,
-  } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
 
-  if (overrideTableHeadComponent) {
-    return <>{overrideTableHeadComponent(tableInstance)}</>;
-  }
+  const tableHeadProps =
+    muiTableHeadProps instanceof Function
+      ? muiTableHeadProps(tableInstance)
+      : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
-      {isFetching && <LinearProgress />}
-      {enablePagination &&
-        ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
       {tableInstance.headerGroups.map((headerGroup, index) => (
         <MRT_TableHeadRow
           key={`${index}-${headerGroup.id}`}

package/src/head/MRT_TableHeadCell.tsx

@@ -11,8 +11,9 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-const TableCell = styled(MuiTableCell)({
+export const StyledTableHeadCell = styled(MuiTableCell)({
   fontWeight: 'bold',
+  verticalAlign: 'text-top',
 });
 
 const TableCellContents = styled('div')({
@@ -28,6 +29,7 @@ const TableCellText = styled('div')({
 const CellFlexItem = styled('span')({
   display: 'flex',
   flexWrap: 'nowrap',
+  alignItems: 'center',
 });
 
 const Divider = styled(MuiDivider)({
@@ -42,25 +44,36 @@ interface Props {
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   const {
-    overrideTableHeadCellComponent,
-    enableColumnActions,
+    densePadding,
+    disableColumnActions,
+    disableFilters,
     enableColumnResizing,
-    enableFiltering,
-    showFiltersInColumnHead,
+    localization,
+    muiTableHeadCellProps,
+    showFilters,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (overrideTableHeadCellComponent) {
-    return <>{overrideTableHeadCellComponent(column, tableInstance)}</>;
-  }
-
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
+  const mTableHeadCellProps =
+    muiTableHeadCellProps instanceof Function
+      ? muiTableHeadCellProps(column)
+      : muiTableHeadCellProps;
+
+  const tableCellProps = {
+    ...mTableHeadCellProps,
+    ...column.getHeaderProps(),
+    style: {
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+      ...column.getHeaderProps().style,
+      ...(mTableHeadCellProps?.style ?? {}),
+    },
+  };
+
   return (
-    <TableCell
-      align={isParentHeader ? 'center' : 'left'}
-      {...column.getHeaderProps()}
-    >
+    <StyledTableHeadCell align={isParentHeader ? 'center' : 'left'} {...tableCellProps}>
       <TableCellContents>
         <TableCellText
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
@@ -69,6 +82,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
               <TableSortLabel
+                aria-label={
+                  column.isSorted
+                    ? column.sortDescFirst
+                      ? localization?.columnActionMenuItemClearSort
+                      : localization?.columnActionMenuItemSortDesc
+                    : localization?.columnActionMenuItemSortAsc
+                }
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
                 style={{ margin: 0 }}
@@ -76,7 +96,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
             )}
           </CellFlexItem>
           <CellFlexItem>
-            {enableColumnActions && !isParentHeader && (
+            {!disableColumnActions && !isParentHeader && (
               <MRT_ToggleColumnActionMenuButton column={column} />
             )}
             {enableColumnResizing && !isParentHeader && (
@@ -89,12 +109,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
             )}
           </CellFlexItem>
         </TableCellText>
-        {enableFiltering && column.canFilter && (
-          <Collapse in={showFiltersInColumnHead}>
+        {!disableFilters && column.canFilter && (
+          <Collapse in={showFilters}>
             <MRT_FilterTextfield column={column} />
           </Collapse>
         )}
       </TableCellContents>
-    </TableCell>
+    </StyledTableHeadCell>
   );
 };