material-react-table 0.2.0 → 0.3.3

package/src/footer/MRT_TableFooterCell.tsx

@@ -3,29 +3,56 @@ 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 { tableInstance, OverrideTableFooterCellComponent } =
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
     useMaterialReactTable();
 
-  if (OverrideTableFooterCellComponent) {
-    return <>{OverrideTableFooterCellComponent(column, tableInstance)}</>;
-  }
-
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
+  const mTableFooterCellProps =
+    muiTableFooterCellProps instanceof Function
+      ? muiTableFooterCellProps(column)
+      : muiTableFooterCellProps;
+
+  const mcTableFooterCellProps =
+    column.muiTableFooterCellProps instanceof Function
+      ? column.muiTableFooterCellProps(column)
+      : column.muiTableFooterCellProps;
+
+  const tableCellProps = {
+    ...mTableFooterCellProps,
+    ...mcTableFooterCellProps,
+    ...column.getFooterProps(),
+    style: {
+      ...column.getFooterProps().style,
+      ...(mTableFooterCellProps?.style ?? {}),
+      ...(mcTableFooterCellProps?.style ?? {}),
+    },
+  };
+
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
       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,31 +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 (!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: `${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} />
+      {footerGroup.headers.map((column,) => (
+        <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
       ))}
-      {enableColumnHiding && <MRT_TableSpacerCell />}
+      {enableRowActions && positionActionsColumn === 'last' && (
+        <MRT_TableSpacerCell />
+      )}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,35 +1,23 @@
 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,
-    isReloading,
-    positionPagination,
-  } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
 
-  if (OverrideTableHeadComponent) {
-    return <>{OverrideTableHeadComponent(tableInstance)}</>;
-  }
+  const tableHeadProps =
+    muiTableHeadProps instanceof Function
+      ? muiTableHeadProps(tableInstance)
+      : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
-      {isReloading && <LinearProgress />}
-      {enablePagination &&
-        ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
-      {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

@@ -3,7 +3,7 @@ import {
   TableCell as MuiTableCell,
   TableSortLabel,
   styled,
-  Divider,
+  Divider as MuiDivider,
   Collapse,
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
@@ -11,9 +11,17 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
+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',
@@ -22,73 +30,108 @@ const TableCellContents = styled('div')({
 const TableCellText = styled('div')({
   width: '100%',
   display: 'flex',
-  alignItems: 'center',
   justifyContent: 'space-between',
 });
 
+const CellFlexItem = styled('span')({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+});
+
+const Divider = styled(MuiDivider)({
+  borderRightWidth: '2px',
+  borderRadius: '2px',
+  maxHeight: '2rem',
+});
+
 interface Props {
   column: HeaderGroup;
-  index: number;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({ column, index }) => {
+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 isLastColumn =
-    (!isParentHeader && index === tableInstance.visibleColumns.length - 1) ||
-    (isParentHeader && index === column.headers.length - 1);
+
+  const mTableHeadCellProps =
+    muiTableHeadCellProps instanceof Function
+      ? muiTableHeadCellProps(column)
+      : muiTableHeadCellProps;
+
+  const mcTableHeadCellProps =
+    column.muiTableHeadCellProps instanceof Function
+      ? column.muiTableHeadCellProps(column)
+      : column.muiTableHeadCellProps;
+
+  const tableCellProps = {
+    ...mTableHeadCellProps,
+    ...mcTableHeadCellProps,
+    ...column.getHeaderProps(),
+    style: {
+      ...column.getHeaderProps().style,
+      ...(mTableHeadCellProps?.style ?? {}),
+      ...(mcTableHeadCellProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableCell
+    <StyledTableHeadCell
       align={isParentHeader ? 'center' : 'left'}
-      {...column.getHeaderProps()}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      {...tableCellProps}
     >
       <TableCellContents>
         <TableCellText
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
         >
-          <span {...column.getSortByToggleProps()}>
+          <CellFlexItem {...column.getSortByToggleProps()}>
             {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 }}
               />
             )}
-          </span>
-          <span style={{ display: 'flex' }}>
-            {enableColumnActions && !isParentHeader && (
+          </CellFlexItem>
+          <CellFlexItem>
+            {!disableColumnActions && !isParentHeader && (
               <MRT_ToggleColumnActionMenuButton column={column} />
             )}
-            {enableColumnResizing && !isLastColumn && (
+            {enableColumnResizing && !isParentHeader && (
               <Divider
                 flexItem
                 orientation="vertical"
-                style={{ borderRightWidth: '2px', borderRadius: '2px' }}
                 onDoubleClick={() => tableInstance.resetResizing()}
                 {...column.getResizerProps()}
               />
             )}
-          </span>
+          </CellFlexItem>
         </TableCellText>
-        {enableFiltering && column.canFilter && (
-          <Collapse in={showFiltersInColumnHead}>
+        {!disableFilters && column.canFilter && (
+          <Collapse in={showFilters}>
             <MRT_FilterTextfield column={column} />
           </Collapse>
         )}
       </TableCellContents>
-    </TableCell>
+    </StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import { MRT_TableHeadCell, StyledTableHeadCell } from './MRT_TableHeadCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
-import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 
 interface Props {
@@ -14,32 +13,56 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
-    OverrideTableHeadRowComponent,
     anyRowsCanExpand,
-    enableColumnHiding,
-    enableExpandAll,
+    densePadding,
+    disableExpandAll,
+    enableRowActions,
     enableSelection,
+    localization,
+    muiTableHeadRowProps,
+    positionActionsColumn,
     renderDetailPanel,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableHeadRowComponent) {
-    return <>{OverrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
-  }
-
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
     [headerGroup.headers],
   );
 
+  const mTableHeadRowProps =
+    muiTableHeadRowProps instanceof Function
+      ? muiTableHeadRowProps(headerGroup)
+      : muiTableHeadRowProps;
+
+  const tableRowProps = {
+    ...mTableHeadRowProps,
+    ...headerGroup.getHeaderGroupProps(),
+    style: {
+      ...headerGroup.getHeaderGroupProps().style,
+      ...(mTableHeadRowProps?.style ?? {}),
+    },
+  };
+
   return (
-    <TableRow {...headerGroup.getHeaderGroupProps()}>
+    <TableRow {...tableRowProps}>
+      {enableRowActions &&
+        positionActionsColumn === 'first' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
       {anyRowsCanExpand || renderDetailPanel ? (
-        enableExpandAll && !isParentHeader ? (
+        !disableExpandAll && !isParentHeader ? (
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
-            width={`${tableInstance.expandedDepth + 0.5}rem`}
+            width={`${
+              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+            }rem`}
           />
         )
       ) : null}
@@ -50,14 +73,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell
-          key={`${index}-${column.id}`}
-          column={column}
-          index={index}
-        />
+      {headerGroup.headers.map((column: HeaderGroup) => (
+        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
-      {enableColumnHiding && !isParentHeader && <MRT_ShowHideColumnsButton />}
+      {enableRowActions &&
+        positionActionsColumn === 'last' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell densePadding={densePadding}>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
     </TableRow>
   );
 };

package/src/index.tsx

@@ -1 +1,3 @@
+import MaterialReactTable from './MaterialReactTable';
+export default MaterialReactTable;
 export * from './MaterialReactTable';

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_DensePaddingSwitch: FC<Props> = () => {
+  const { densePadding, setDensePadding, localization } =
+    useMaterialReactTable();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <Switch
+        color="default"
+        checked={densePadding}
+        size="small"
+        onChange={() => setDensePadding(!densePadding)}
+      />
+    </Tooltip>
+  );
+};

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

@@ -23,6 +23,10 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
     column.setFilter(undefined);
   };
 
+  if (column.Filter) {
+    return <>{column.Filter({ column })}</>;
+  }
+
   return (
     <TextField
       margin="dense"

package/src/inputs/MRT_SearchTextField.tsx

@@ -17,13 +17,22 @@ const TextField = styled(MuiTextField)({
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
-  const { tableInstance, tableSearchTextfieldProps, localization } = useMaterialReactTable();
+  const {
+    tableInstance,
+    muiSearchTextFieldProps,
+    localization,
+    onGlobalFilterChange,
+  } = useMaterialReactTable();
 
   const [searchValue, setSearchValue] = useState('');
 
-  const handleChange = useAsyncDebounce((value) => {
-    tableInstance.setGlobalFilter(value ?? undefined);
-  }, 200);
+  const handleChange = useAsyncDebounce(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      tableInstance.setGlobalFilter(event.target.value ?? undefined);
+      onGlobalFilterChange?.(event);
+    },
+    200,
+  );
 
   const handleClear = () => {
     setSearchValue('');
@@ -33,9 +42,9 @@ export const MRT_SearchTextField: FC<Props> = () => {
   return (
     <TextField
       placeholder={localization?.searchTextFieldPlaceholder}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        setSearchValue(e.target.value);
-        handleChange(e.target.value);
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(event.target.value);
+        handleChange(event);
       }}
       value={searchValue ?? ''}
       variant="standard"
@@ -59,7 +68,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
           </InputAdornment>
         ),
       }}
-      {...tableSearchTextfieldProps}
+      {...muiSearchTextFieldProps}
     />
   );
 };

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,14 +1,25 @@
 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, enableSelectAll } = useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding, localization } =
+    useMaterialReactTable();
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }} variant="head">
-      {enableSelectAll ? (
-        <Checkbox aria-label='' {...tableInstance.getToggleAllPageRowsSelectedProps()} />
+    <TableCell densePadding={densePadding} variant="head">
+      {!disableSelectAll ? (
+        <Checkbox
+          aria-label={localization?.selectAllCheckboxTitle}
+          {...tableInstance.getToggleAllPageRowsSelectedProps()}
+        />
       ) : null}
     </TableCell>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,22 +1,30 @@
 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;
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange } = useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding } =
+    useMaterialReactTable();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
-    onRowSelectChange?.(event, row.state, tableInstance.selectedFlatRows);
+    onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
   };
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }}>
+    <TableCell densePadding={densePadding}>
       <Checkbox
         {...row.getToggleRowSelectedProps()}
         onChange={onSelectChange}