material-react-table 0.2.0 → 0.3.0

package/src/body/MRT_TableBodyCell.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { TableCell } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
@@ -8,18 +8,30 @@ interface Props {
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  const {
-    tableInstance,
-    OverrideTableBodyCellComponent,
-  } = useMaterialReactTable();
+  const { tableInstance, overrideTableBodyCellComponent, onCellClick } =
+    useMaterialReactTable();
 
-  if (OverrideTableBodyCellComponent) {
-    return <>{OverrideTableBodyCellComponent(cell, tableInstance)}</>;
+  if (overrideTableBodyCellComponent) {
+    return <>{overrideTableBodyCellComponent(cell, tableInstance)}</>;
   }
 
   return (
-    <TableCell variant="body" {...cell.getCellProps()}>
-      {cell.render('Cell')}
+    <TableCell
+      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+        onCellClick?.(event, cell)
+      }
+      variant="body"
+      {...cell.getCellProps()}
+    >
+      {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,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableRow } from '@mui/material';
+import { TableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
@@ -14,7 +14,7 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
-    OverrideTableBodyRowComponent,
+    overrideTableBodyRowComponent,
     anyRowsCanExpand,
     enableSelection,
     enableSubRowTree,
@@ -24,8 +24,8 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableBodyRowComponent) {
-    return <>{OverrideTableBodyRowComponent(row, tableInstance)}</>;
+  if (overrideTableBodyRowComponent) {
+    return <>{overrideTableBodyRowComponent(row, tableInstance)}</>;
   }
 
   return (
@@ -40,8 +40,10 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           (row.canExpand || renderDetailPanel ? (
             <MRT_ExpandButton row={row} />
           ) : (
-            <TableCell
-              style={{ width: `${tableInstance.expandedDepth + 0.5}rem` }}
+            <MRT_TableSpacerCell
+              width={`${
+                renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+              }rem`}
             />
           ))}
         {enableSelection && <MRT_SelectCheckbox row={row} />}

package/src/body/MRT_TableDetailPanel.tsx

@@ -11,12 +11,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const {
     tableInstance,
     renderDetailPanel,
-    OverrideTableDetailPanelComponent,
+    overrideTableDetailPanelComponent,
     tableDetailPanelProps,
   } = useMaterialReactTable();
 
-  if (OverrideTableDetailPanelComponent) {
-    return <>{OverrideTableDetailPanelComponent(row, tableInstance)}</>;
+  if (overrideTableDetailPanelComponent) {
+    return <>{overrideTableDetailPanelComponent(row, tableInstance)}</>;
   }
 
   return (

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -6,7 +6,7 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded } =
+  const { tableInstance, localization, anyRowsExpanded, renderDetailPanel } =
     useMaterialReactTable();
 
   return (
@@ -16,7 +16,7 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       style={{
         padding: '0.5rem',
         paddingRight: '0',
-        width: `${tableInstance.expandedDepth + 2}rem`,
+        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
       }}
     >
       <IconButton

package/src/buttons/MRT_ExpandButton.tsx

@@ -9,7 +9,8 @@ interface Props {
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, tableInstance } = useMaterialReactTable();
+  const { localization, tableInstance, renderDetailPanel } =
+    useMaterialReactTable();
 
   return (
     <TableCell
@@ -19,7 +20,9 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
         padding: '0.5rem',
         paddingRight: '0',
         paddingLeft: `${row.depth + 0.5}rem`,
-        width: `${tableInstance.expandedDepth - row.depth + 2}rem`,
+        width: `${
+          renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2
+        }rem`,
       }}
     >
       <IconButton

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -9,6 +9,8 @@ const IconButton = styled(MuiIconButton)({
   opacity: 0.2,
   transition: 'opacity 0.2s',
   marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
   '&:hover': {
     opacity: 1,
   },

package/src/footer/MRT_TableFooter.tsx

@@ -8,15 +8,15 @@ interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
   const {
-    OverrideTableFooterComponent,
+    overrideTableFooterComponent,
     enablePagination,
     positionPagination,
     tableFooterProps,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableFooterComponent) {
-    return <>{OverrideTableFooterComponent(tableInstance)}</>;
+  if (overrideTableFooterComponent) {
+    return <>{overrideTableFooterComponent(tableInstance)}</>;
   }
 
   return (

package/src/footer/MRT_TableFooterCell.tsx

@@ -12,11 +12,11 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { tableInstance, OverrideTableFooterCellComponent } =
+  const { tableInstance, overrideTableFooterCellComponent } =
     useMaterialReactTable();
 
-  if (OverrideTableFooterCellComponent) {
-    return <>{OverrideTableFooterCellComponent(column, tableInstance)}</>;
+  if (overrideTableFooterCellComponent) {
+    return <>{overrideTableFooterCellComponent(column, tableInstance)}</>;
   }
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;

package/src/footer/MRT_TableFooterRow.tsx

@@ -17,21 +17,25 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     enableColumnHiding,
     enableSelection,
     tableInstance,
-    OverrideTableFooterRowComponent,
+    overrideTableFooterRowComponent,
   } = 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)}</>;
+  if (overrideTableFooterRowComponent) {
+    return <>{overrideTableFooterRowComponent(footerGroup, tableInstance)}</>;
   }
 
   return (
     <TableRow {...footerGroup.getFooterGroupProps()}>
       {(anyRowsCanExpand || renderDetailPanel) && (
         <TableCell
-          style={{ width: `${tableInstance.expandedDepth + 0.5}rem` }}
+          style={{
+            width: `${
+              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+            }rem`,
+          }}
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}

package/src/footer/MRT_TablePagination.tsx

@@ -5,16 +5,19 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, tablePaginationProps, OverrideTablePaginationComponent } =
-    useMaterialReactTable();
+  const {
+    tableInstance,
+    tablePaginationProps,
+    overrideTablePaginationComponent,
+  } = useMaterialReactTable();
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
     tableInstance.setPageSize(+event.target.value);
     tableInstance.gotoPage(0);
   };
 
-  if (OverrideTablePaginationComponent) {
-    return <>{OverrideTablePaginationComponent(tableInstance)}</>;
+  if (overrideTablePaginationComponent) {
+    return <>{overrideTablePaginationComponent(tableInstance)}</>;
   }
 
   return (

package/src/head/MRT_TableHead.tsx

@@ -8,21 +8,21 @@ interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
   const {
-    OverrideTableHeadComponent,
+    overrideTableHeadComponent,
     tableInstance,
     tableHeadProps,
     enablePagination,
-    isReloading,
+    isFetching,
     positionPagination,
   } = useMaterialReactTable();
 
-  if (OverrideTableHeadComponent) {
-    return <>{OverrideTableHeadComponent(tableInstance)}</>;
+  if (overrideTableHeadComponent) {
+    return <>{overrideTableHeadComponent(tableInstance)}</>;
   }
 
   return (
     <TableHead {...tableHeadProps}>
-      {isReloading && <LinearProgress />}
+      {isFetching && <LinearProgress />}
       {enablePagination &&
         ['top', 'both'].includes(positionPagination ?? '') && (
           <MRT_TablePagination />

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';
@@ -22,18 +22,27 @@ 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',
+});
+
+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,
+    overrideTableHeadCellComponent,
     enableColumnActions,
     enableColumnResizing,
     enableFiltering,
@@ -41,14 +50,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ column, index }) => {
     tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableHeadCellComponent) {
-    return <>{OverrideTableHeadCellComponent(column, tableInstance)}</>;
+  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);
 
   return (
     <TableCell
@@ -59,29 +65,29 @@ export const MRT_TableHeadCell: FC<Props> = ({ column, index }) => {
         <TableCellText
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
         >
-          <span {...column.getSortByToggleProps()}>
+          <CellFlexItem {...column.getSortByToggleProps()}>
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
               <TableSortLabel
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
+                style={{ margin: 0 }}
               />
             )}
-          </span>
-          <span style={{ display: 'flex' }}>
+          </CellFlexItem>
+          <CellFlexItem>
             {enableColumnActions && !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}>

package/src/head/MRT_TableHeadRow.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
-    OverrideTableHeadRowComponent,
+    overrideTableHeadRowComponent,
     anyRowsCanExpand,
     enableColumnHiding,
     enableExpandAll,
@@ -23,8 +23,8 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
     tableInstance,
   } = useMaterialReactTable();
 
-  if (OverrideTableHeadRowComponent) {
-    return <>{OverrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
+  if (overrideTableHeadRowComponent) {
+    return <>{overrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
   }
 
   const isParentHeader = useMemo(
@@ -39,7 +39,9 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
-            width={`${tableInstance.expandedDepth + 0.5}rem`}
+            width={`${
+              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+            }rem`}
           />
         )
       ) : null}
@@ -51,11 +53,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         )
       ) : null}
       {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell
-          key={`${index}-${column.id}`}
-          column={column}
-          index={index}
-        />
+        <MRT_TableHeadCell key={`${index}-${column.id}`} column={column} />
       ))}
       {enableColumnHiding && !isParentHeader && <MRT_ShowHideColumnsButton />}
     </TableRow>

package/src/index.tsx

@@ -1 +1,6 @@
-export * from './MaterialReactTable';
+import {
+  MaterialReactTable,
+  MaterialReactTableProps,
+} from './MaterialReactTable';
+export default MaterialReactTable;
+export type { MaterialReactTableProps };

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,
+    tableSearchTextfieldProps,
+    localization,
+    onSearchChange,
+  } = 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);
+      onSearchChange?.(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"

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -8,7 +8,10 @@ export const MRT_SelectAllCheckbox = () => {
   return (
     <TableCell style={{ width: '2rem', padding: '0.5rem' }} variant="head">
       {enableSelectAll ? (
-        <Checkbox aria-label='' {...tableInstance.getToggleAllPageRowsSelectedProps()} />
+        <Checkbox
+          aria-label=""
+          {...tableInstance.getToggleAllPageRowsSelectedProps()}
+        />
       ) : null}
     </TableCell>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -12,7 +12,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
-    onRowSelectChange?.(event, row.state, tableInstance.selectedFlatRows);
+    onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
   };
 
   return (

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,6 +5,7 @@ import { ColumnInstance } from 'react-table';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -22,8 +23,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   column,
   setAnchorEl,
 }) => {
-  const { enableColumnHiding, enableSorting, localization } =
-    useMaterialReactTable();
+  const {
+    enableColumnHiding,
+    enableColumnGrouping,
+    enableSorting,
+    localization,
+  } = useMaterialReactTable();
 
   const handleClearSort = () => {
     column.clearSortBy();
@@ -45,38 +50,53 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleGroupByColumn = () => {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      {enableSorting && (
-        <>
-          <MenuItem disabled={!column.isSorted} onClick={handleClearSort}>
-            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
-          </MenuItem>
-          <MenuItem
-            disabled={column.isSorted && !column.isSortedDesc}
-            onClick={handleSortAsc}
-          >
-            <SortIcon /> {localization?.columnActionMenuItemSortAsc}
-          </MenuItem>
-          <MenuItem
-            disabled={column.isSorted && column.isSortedDesc}
-            onClick={handleSortDesc}
-          >
-            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc}
-          </MenuItem>
-          <Divider />
-        </>
-      )}
+      {enableSorting && [
+        <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
+          <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+        </MenuItem>,
+        <MenuItem
+          key={2}
+          disabled={column.isSorted && !column.isSortedDesc}
+          onClick={handleSortAsc}
+        >
+          <SortIcon /> {localization?.columnActionMenuItemSortAsc}
+        </MenuItem>,
+        <MenuItem
+          key={3}
+          disabled={column.isSorted && column.isSortedDesc}
+          onClick={handleSortDesc}
+        >
+          <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
+          {localization?.columnActionMenuItemSortDesc}
+        </MenuItem>,
+        <Divider key={4} />,
+      ]}
       {enableColumnHiding && (
         <MenuItem onClick={handleHideColumn}>
           <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
         </MenuItem>
       )}
+      {enableColumnGrouping && column.canGroupBy && (
+        <MenuItem disabled={column.isGrouped} onClick={handleGroupByColumn}>
+          <DynamicFeedIcon /> {localization?.columnActionMenuItemGroupBy}
+        </MenuItem>
+      )}
+      {enableColumnGrouping && column.canGroupBy && (
+        <MenuItem disabled={!column.isGrouped} onClick={handleGroupByColumn}>
+          <DynamicFeedIcon /> {localization?.columnActionMenuItemUnGroupBy}
+        </MenuItem>
+      )}
     </Menu>
   );
 };

package/src/toolbar/MRT_Toolbar.tsx

@@ -13,7 +13,7 @@ interface Props {}
 
 export const MRT_Toolbar: FC<Props> = () => {
   const {
-    OverrideTableToolbarComponent,
+    overrideTableToolbarComponent,
     enableSearch,
     tableInstance,
     tableTitleProps,
@@ -21,8 +21,8 @@ export const MRT_Toolbar: FC<Props> = () => {
     title,
   } = useMaterialReactTable();
 
-  if (OverrideTableToolbarComponent) {
-    return <>{OverrideTableToolbarComponent(tableInstance)}</>;
+  if (overrideTableToolbarComponent) {
+    return <>{overrideTableToolbarComponent(tableInstance)}</>;
   }
 
   //if no features in the toolbar are enabled, don't render anything