material-react-table 0.3.1 → 0.3.5

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, 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

@@ -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
@@ -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

@@ -7,29 +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)({
-  fontWeight: 'bold',
-  verticalAlign: 'text-top',
-});
+export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    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)({
@@ -52,7 +64,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     muiTableHeadCellProps,
     showFilters,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -61,21 +73,31 @@ 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}>
-      <TableCellContents>
-        <TableCellText
+    <MRT_StyledTableHeadCell
+      align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      {...tableCellProps}
+    >
+      <TableCellWrapper>
+        <TableCellTopContents
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
         >
           <CellFlexItem {...column.getSortByToggleProps()}>
@@ -91,7 +113,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 }
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
-                style={{ margin: 0 }}
               />
             )}
           </CellFlexItem>
@@ -108,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;
@@ -15,14 +19,14 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
     disableExpandAll,
+    enableRowNumbers,
     enableRowActions,
     enableSelection,
-    localization,
     muiTableHeadRowProps,
     positionActionsColumn,
     renderDetailPanel,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
@@ -45,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 ? (
@@ -72,7 +80,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,9 +88,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell>
-            {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

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

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,16 +1,16 @@
 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';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: HeaderGroup;
 }
 
-export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+export const MRT_FilterTextField: FC<Props> = ({ column }) => {
+  const { localization } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -24,14 +24,23 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
   };
 
   if (column.Filter) {
-    //@ts-ignore
-    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);
@@ -41,21 +50,37 @@ 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}
+            <Tooltip
+              arrow
+              title={localization?.filterTextFieldClearButtonTitle ?? ''}
             >
-              <CloseIcon fontSize="small" />
-            </IconButton>
+              <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,
@@ -7,7 +8,7 @@ import {
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
 const TextField = styled(MuiTextField)({
@@ -18,11 +19,12 @@ interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
-    tableInstance,
-    muiSearchTextFieldProps,
+    showSearch,
     localization,
+    muiSearchTextFieldProps,
     onGlobalFilterChange,
-  } = useMaterialReactTable();
+    tableInstance,
+  } = useMRT();
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -40,35 +42,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>
   );
 };

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
-import { Checkbox, TableCell } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Checkbox } from '@mui/material';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, disableSelectAll, densePadding } =
-    useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding, localization } =
+    useMRT();
 
   return (
-    <TableCell
-      style={{
-        width: '2rem',
-        padding: densePadding ? '0' : '0.6rem',
-        transition: 'all 0.2s ease-in-out',
-      }}
-      variant="head"
-    >
+    <MRT_TableButtonCell densePadding={densePadding} variant="head">
       {!disableSelectAll ? (
         <Checkbox
-          aria-label=""
+          inputProps={{
+            'aria-label': localization?.selectAllCheckboxTitle ?? '',
+          }}
           {...tableInstance.getToggleAllPageRowsSelectedProps()}
         />
       ) : null}
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,15 +1,16 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 interface Props {
   row: Row;
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange, densePadding } =
-    useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding, localization } =
+    useMRT();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
@@ -17,17 +18,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell
-      style={{
-        width: '2rem',
-        padding: densePadding ? '0' : '0.6rem',
-        transition: 'all 0.2s ease-in-out',
-      }}
-    >
+    <MRT_TableButtonCell densePadding={densePadding}>
       <Checkbox
-        {...row.getToggleRowSelectedProps()}
+        inputProps={{
+          'aria-label': localization?.selectCheckboxTitle,
+        }}
         onChange={onSelectChange}
+        {...row.getToggleRowSelectedProps()}
       />
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };