material-react-table 0.3.1 → 0.3.2

package/src/footer/MRT_TableFooter.tsx

@@ -10,9 +10,9 @@ export const MRT_TableFooter: FC<Props> = () => {
 
   return (
     <TableFooter {...muiTableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup, index) => (
+      {tableInstance.footerGroups.map((footerGroup) => (
         <MRT_TableFooterRow
-          key={`${index}-${footerGroup.id}`}
+          key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}
         />
       ))}

package/src/footer/MRT_TableFooterCell.tsx

@@ -3,16 +3,25 @@ import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  }),
+);
 
 interface Props {
   column: HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding } = useMaterialReactTable();
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
+    useMaterialReactTable();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -21,20 +30,27 @@ export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
       ? muiTableFooterCellProps(column)
       : muiTableFooterCellProps;
 
+  const mcTableFooterCellProps =
+    column.muiTableFooterCellProps instanceof Function
+      ? column.muiTableFooterCellProps(column)
+      : column.muiTableFooterCellProps;
+
   const tableCellProps = {
     ...mTableFooterCellProps,
+    ...mcTableFooterCellProps,
     ...column.getFooterProps(),
     style: {
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: 'all 0.2s ease-in-out',
       ...column.getFooterProps().style,
       ...(mTableFooterCellProps?.style ?? {}),
+      ...(mcTableFooterCellProps?.style ?? {}),
     },
   };
 
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
       variant="head"
       {...tableCellProps}
     >

package/src/footer/MRT_TableFooterRow.tsx

@@ -51,8 +51,8 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column, index) => (
-        <MRT_TableFooterCell key={`${index}-${column.id}`} 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

@@ -15,9 +15,9 @@ export const MRT_TableHead: FC<Props> = () => {
 
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup, index) => (
+      {tableInstance.headerGroups.map((headerGroup) => (
         <MRT_TableHeadRow
-          key={`${index}-${headerGroup.id}`}
+          key={headerGroup.getHeaderGroupProps().key}
           headerGroup={headerGroup}
         />
       ))}

package/src/head/MRT_TableHeadCell.tsx

@@ -11,10 +11,17 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-export const StyledTableHeadCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-  verticalAlign: 'text-top',
-});
+export const StyledTableHeadCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  }),
+);
 
 const TableCellContents = styled('div')({
   display: 'grid',
@@ -61,19 +68,29 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       ? muiTableHeadCellProps(column)
       : muiTableHeadCellProps;
 
+  const mcTableHeadCellProps =
+    column.muiTableHeadCellProps instanceof Function
+      ? column.muiTableHeadCellProps(column)
+      : column.muiTableHeadCellProps;
+
   const tableCellProps = {
     ...mTableHeadCellProps,
+    ...mcTableHeadCellProps,
     ...column.getHeaderProps(),
     style: {
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
       ...column.getHeaderProps().style,
       ...(mTableHeadCellProps?.style ?? {}),
+      ...(mcTableHeadCellProps?.style ?? {}),
     },
   };
 
   return (
-    <StyledTableHeadCell align={isParentHeader ? 'center' : 'left'} {...tableCellProps}>
+    <StyledTableHeadCell
+      align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      {...tableCellProps}
+    >
       <TableCellContents>
         <TableCellText
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}

package/src/head/MRT_TableHeadRow.tsx

@@ -14,6 +14,7 @@ interface Props {
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
+    densePadding,
     disableExpandAll,
     enableRowActions,
     enableSelection,
@@ -72,7 +73,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column) => (
+      {headerGroup.headers.map((column: HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
       {enableRowActions &&
@@ -80,7 +81,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell>
+          <StyledTableHeadCell densePadding={densePadding}>
             {localization?.actionsHeadColumnTitle}
           </StyledTableHeadCell>
         ))}

package/src/inputs/MRT_EditCellTextfield.tsx

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

package/src/inputs/MRT_FilterTextField.tsx

@@ -24,7 +24,6 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
   };
 
   if (column.Filter) {
-    //@ts-ignore
     return <>{column.Filter({ column })}</>;
   }
 

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { Checkbox, TableCell } from '@mui/material';
+import { Checkbox, TableCell as MuiTableCell, styled } 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',
+}));
+
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, disableSelectAll, densePadding } =
+  const { tableInstance, disableSelectAll, densePadding, localization } =
     useMaterialReactTable();
 
   return (
-    <TableCell
-      style={{
-        width: '2rem',
-        padding: densePadding ? '0' : '0.6rem',
-        transition: 'all 0.2s ease-in-out',
-      }}
-      variant="head"
-    >
+    <TableCell densePadding={densePadding} variant="head">
       {!disableSelectAll ? (
         <Checkbox
-          aria-label=""
+          aria-label={localization?.selectAllCheckboxTitle}
           {...tableInstance.getToggleAllPageRowsSelectedProps()}
         />
       ) : null}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,8 +1,15 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell } from '@mui/material';
+import { Checkbox, TableCell as MuiTableCell, styled } 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',
+}));
+
 interface Props {
   row: Row;
 }
@@ -17,13 +24,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell
-      style={{
-        width: '2rem',
-        padding: densePadding ? '0' : '0.6rem',
-        transition: 'all 0.2s ease-in-out',
-      }}
-    >
+    <TableCell densePadding={densePadding}>
       <Checkbox
         {...row.getToggleRowSelectedProps()}
         onChange={onSelectChange}

package/src/menus/MRT_RowActionMenu.tsx

@@ -24,12 +24,12 @@ export const MRT_RowActionMenu: FC<Props> = ({
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
-    setCurrentEditingRowId,
+    setCurrentEditingRow,
     tableInstance,
   } = useMaterialReactTable();
 
   const handleEdit = () => {
-    setCurrentEditingRowId(row.id);
+    setCurrentEditingRow({ ...row });
     setAnchorEl(null);
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -1,20 +1,48 @@
 import React, { FC } from 'react';
-import { LinearProgress, Paper, TableContainer } from '@mui/material';
+import {
+  alpha,
+  CircularProgress,
+  LinearProgress,
+  Paper,
+  styled,
+  TableContainer,
+} from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
+const CircularProgressWrapper = styled('div')(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  display: 'grid',
+  height: '100%',
+  justifyContent: 'center',
+  margin: 'auto',
+  position: 'absolute',
+  width: 'calc(100% - 2rem)',
+}));
+
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isFetching } =
-    useMaterialReactTable();
+  const {
+    muiTableContainerProps,
+    hideToolbarTop,
+    hideToolbarBottom,
+    isLoading,
+    isFetching,
+  } = useMaterialReactTable();
 
   return (
     <TableContainer component={Paper} {...muiTableContainerProps}>
       {!hideToolbarTop && <MRT_ToolbarTop />}
       {isFetching && <LinearProgress />}
+      {isLoading && (
+        <CircularProgressWrapper>
+          <CircularProgress aria-busy="true" aria-label="Loading data" />
+        </CircularProgressWrapper>
+      )}
       <MRT_Table />
       {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>

package/src/table/MRT_TableSpacerCell.tsx

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

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -14,29 +14,14 @@ interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
   const {
-    disableGlobalFilter,
-    disableColumnHiding,
+    hideToolbarActions,
     manualPagination,
+    muiTableToolbarBottomProps,
     positionPagination,
-    disableFilters,
-    hideToolbarActions,
     positionToolbarActions,
-    muiTableToolbarBottomProps,
-    title,
     tableInstance,
   } = useMaterialReactTable();
 
-  // if no features in the toolbar are enabled, don't render anything
-  if (
-    !muiTableToolbarBottomProps &&
-    !title &&
-    disableColumnHiding &&
-    disableFilters &&
-    disableGlobalFilter
-  ) {
-    return null;
-  }
-
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
       ? muiTableToolbarBottomProps(tableInstance)

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -25,29 +25,16 @@ interface Props {}
 export const MRT_ToolbarTop: FC<Props> = () => {
   const {
     disableGlobalFilter,
-    disableColumnHiding,
-    muiTableTitleProps,
-    disableFilters,
+    hideToolbarActions,
     manualPagination,
-    positionPagination,
+    muiTableTitleProps,
     muiTableToolbarTopProps,
-    hideToolbarActions,
+    positionPagination,
     positionToolbarActions,
-    title,
     tableInstance,
+    title,
   } = useMaterialReactTable();
 
-  // if no features in the toolbar are enabled, don't render anything
-  if (
-    !muiTableToolbarTopProps &&
-    !title &&
-    disableColumnHiding &&
-    disableFilters &&
-    disableGlobalFilter
-  ) {
-    return null;
-  }
-
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
       ? muiTableToolbarTopProps(tableInstance)

package/src/useMaterialReactTable.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import {
   PluginHook,
+  Row,
   TableInstance,
   useExpanded,
   useFilters,
@@ -25,9 +26,9 @@ import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
 export interface UseMaterialReactTable<D extends {}>
   extends MaterialReactTableProps<D>,
     UseMRTCalcs {
-      currentEditingRowId: string | null;
+  currentEditingRow: Row<D> | null;
   densePadding: boolean;
-  setCurrentEditingRowId: (currentRowEditingId: string | null) => void;
+  setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
   showFilters: boolean;
@@ -65,9 +66,7 @@ export const MaterialReactTableProvider = <D extends {}>(
   const [densePadding, setDensePadding] = useState<boolean>(
     props.defaultDensePadding ?? false,
   );
-  const [currentEditingRowId, setCurrentEditingRowId] = useState<string | null>(
-    null,
-  );
+  const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
 
   return (
     <MaterialReactTableContext.Provider
@@ -77,8 +76,8 @@ export const MaterialReactTableProvider = <D extends {}>(
         densePadding,
         setDensePadding,
         setShowFilters,
-        currentEditingRowId,
-        setCurrentEditingRowId,
+        currentEditingRow,
+        setCurrentEditingRow,
         showFilters,
         // @ts-ignore
         tableInstance,

package/src/utils/localization.ts

@@ -11,13 +11,14 @@ export interface MRT_Localization {
   expandButtonTitle: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
-  rowActionMenuButtonTitle: string;
-  rowActionsColumnTitle: string;
-  rowActionButtonSave: string;
   rowActionButtonCancel: string;
+  rowActionButtonSave: string;
+  rowActionMenuButtonTitle: string;
   rowActionMenuItemEdit: string;
+  rowActionsColumnTitle: string;
   searchTextFieldClearButtonTitle: string;
   searchTextFieldPlaceholder: string;
+  selectAllCheckboxTitle: string;
   showHideColumnsButtonTitle: string;
   toggleDensePaddingSwitchTitle: string;
   toggleFilterButtonTitle: string;
@@ -36,13 +37,14 @@ export const defaultLocalization: MRT_Localization = {
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
-  rowActionsColumnTitle: 'Actions',
   rowActionMenuItemEdit: 'Edit',
-  rowActionButtonSave: 'Save',
-  rowActionButtonCancel: 'Cancel',
+  rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
+  selectAllCheckboxTitle: 'Select all',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',