material-react-table 0.9.5 → 0.10.0

package/src/body/MRT_TableBody.tsx

@@ -5,26 +5,28 @@ import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
   tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({
-  tableInstance,
-  tableContainerRef,
-}) => {
+export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
   const {
     getPaginationRowModel,
     getPrePaginationRowModel,
     getState,
-    options: { enablePagination, enableRowVirtualization, muiTableBodyProps },
-  } = tableInstance;
+    options: {
+      enablePagination,
+      enableRowVirtualization,
+      muiTableBodyProps,
+      virtualizerProps,
+    },
+  } = instance;
 
   const { isDensePadding } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
-      ? muiTableBodyProps({ tableInstance })
+      ? muiTableBodyProps({ instance })
       : muiTableBodyProps;
 
   const rows = enablePagination
@@ -36,6 +38,7 @@ export const MRT_TableBody: FC<Props> = ({
         overscan: isDensePadding ? 15 : 5,
         size: rows.length,
         parentRef: tableContainerRef,
+        ...virtualizerProps,
       })
     : ({} as any);
 
@@ -66,7 +69,7 @@ export const MRT_TableBody: FC<Props> = ({
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
-              tableInstance={tableInstance}
+              instance={instance}
             />
           );
         },

package/src/body/MRT_TableBodyCell.tsx

@@ -10,14 +10,14 @@ interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -35,7 +35,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
     },
     setColumnOrder,
     setCurrentEditingCell,
-  } = tableInstance;
+  } = instance;
 
   const {
     columnOrder,
@@ -58,12 +58,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, tableInstance })
+      ? muiTableBodyCellProps({ cell, instance })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, tableInstance })
+      ? columnDef.muiTableBodyCellProps({ cell, instance })
       : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {
@@ -112,7 +112,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
-      tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+      instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
     );
   };
 
@@ -122,9 +122,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (tableInstance.getRightLeafHeaders().length -
-        1 -
-        column.getPinnedIndex()) *
+      (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) *
       150
     );
   };
@@ -132,7 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onMrtCellClick?.({ event, cell, tableInstance })
+        onMrtCellClick?.({ event, cell, instance })
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
@@ -184,12 +182,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
               : undefined,
         },
         ...(tableCellProps?.sx as any),
-      })}
-      style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: column.getSize(),
-      }}
+      })}
     >
       <>
         {isLoading || showSkeletons ? (
@@ -204,28 +200,26 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : columnDefType === 'display' ? (
-          columnDef.Cell?.({ cell, tableInstance })
+          columnDef.Cell?.({ cell, instance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
             column.id !==
               row.groupingColumnId) ? null : cell.getIsAggregated() ? (
+          columnDef.AggregatedCell?.({ cell, instance }) ??
           cell.renderAggregatedCell()
         ) : isEditing ? (
-          <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
+          <MRT_EditCellTextField cell={cell} instance={instance} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
           <>
-            <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-              <>
-                {columnDef?.Cell?.({ cell, tableInstance }) ??
-                  cell.renderCell()}
-              </>
+            <MRT_CopyButton cell={cell} instance={instance}>
+              <>{columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}</>
             </MRT_CopyButton>
             {row.getIsGrouped() && <> ({row.subRows?.length})</>}
           </>
         ) : (
           <>
-            {columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
+            {columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}
             {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/body/MRT_TableBodyRow.tsx

@@ -7,18 +7,18 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row: MRT_Row;
   rowIndex: number;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, tableInstance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
-  } = tableInstance;
+  } = instance;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, tableInstance })
+      ? muiTableBodyRowProps({ row, instance })
       : muiTableBodyRowProps;
 
   return (
@@ -26,7 +26,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, tableInstance }) =>
       <TableRow
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onMrtRowClick?.({ event, row, tableInstance })
+          onMrtRowClick?.({ event, row, instance })
         }
         selected={row.getIsSelected()}
         {...tableRowProps}
@@ -50,12 +50,12 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, tableInstance }) =>
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
-            tableInstance={tableInstance}
+            instance={instance}
           />
         ))}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
-        <MRT_TableDetailPanel row={row} tableInstance={tableInstance} />
+        <MRT_TableDetailPanel row={row} instance={instance} />
       )}
     </>
   );

package/src/body/MRT_TableDetailPanel.tsx

@@ -4,36 +4,36 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
+export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
   const {
-    getVisibleFlatColumns,
+    getVisibleLeafColumns,
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
       onMrtDetailPanelClick,
       renderDetailPanel,
     },
-  } = tableInstance;
+  } = instance;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, tableInstance })
+      ? muiTableBodyRowProps({ row, instance })
       : muiTableBodyRowProps;
 
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, tableInstance })
+      ? muiTableDetailPanelProps({ row, instance })
       : muiTableDetailPanelProps;
 
   return (
     <TableRow {...tableRowProps}>
       <TableCell
-        colSpan={getVisibleFlatColumns().length + 10}
+        colSpan={getVisibleLeafColumns().length}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onMrtDetailPanelClick?.({ event, row, tableInstance })
+          onMrtDetailPanelClick?.({ event, row, instance })
         }
         {...tableCellProps}
         sx={{
@@ -41,12 +41,15 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
+          width: `${instance.getTotalSize()}px`,
           ...tableCellProps?.sx,
         }}
       >
-        <Collapse in={row.getIsExpanded()}>
-          {renderDetailPanel?.({ row, tableInstance })}
-        </Collapse>
+        {renderDetailPanel && (
+          <Collapse in={row.getIsExpanded()}>
+            {renderDetailPanel({ row, instance })}
+          </Collapse>
+        )}
       </TableCell>
     </TableRow>
   );

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -4,19 +4,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   column: MRT_Column;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({
-  column,
-  tableInstance,
-}) => {
+export const MRT_ColumnPinningButtons: FC<Props> = ({ column, instance }) => {
   const {
     options: {
       icons: { PushPinIcon },
       localization,
     },
-  } = tableInstance;
+  } = instance;
 
   const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
     column.pin(pinDirection);

package/src/buttons/MRT_CopyButton.tsx

@@ -5,17 +5,13 @@ import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
   cell: MRT_Cell;
   children: ReactNode;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_CopyButton: FC<Props> = ({
-  cell,
-  children,
-  tableInstance,
-}) => {
+export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
-  } = tableInstance;
+  } = instance;
 
   const { column } = cell;
 
@@ -31,14 +27,14 @@ export const MRT_CopyButton: FC<Props> = ({
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, tableInstance })
+      ? muiTableBodyCellCopyButtonProps({ cell, instance })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
     columnDef.muiTableBodyCellCopyButtonProps instanceof Function
       ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableBodyCellCopyButtonProps;
 

package/src/buttons/MRT_EditActionButtons.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
+export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
   const {
     getState,
     options: {
@@ -16,7 +16,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
       onMrtEditRowSubmit,
     },
     setCurrentEditingRow,
-  } = tableInstance;
+  } = instance;
 
   const { currentEditingRow } = getState();
 
@@ -26,7 +26,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
   };
 
   const handleSave = () => {
-    onMrtEditRowSubmit?.({ row: currentEditingRow ?? row, tableInstance });
+    onMrtEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -3,10 +3,10 @@ import { IconButton, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
+export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
@@ -18,7 +18,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
+export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
   const {
     getState,
     options: {
@@ -16,13 +16,13 @@ export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
       onMrtRowExpandChange,
       renderDetailPanel,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
-    onMrtRowExpandChange?.({ event, row, tableInstance });
+    onMrtRowExpandChange?.({ event, row, instance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -3,11 +3,11 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FullScreenToggleButton: FC<Props> = ({
-  tableInstance,
+  instance,
   ...rest
 }) => {
   const {
@@ -18,7 +18,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
       onMrtToggleFullScreen,
     },
     setIsFullScreen,
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen } = getState();
 
@@ -26,7 +26,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     onMrtToggleFullScreen?.({
       event,
       isFullScreen: !isFullScreen,
-      tableInstance,
+      instance,
     });
     setIsFullScreen(!isFullScreen);
   };

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -4,17 +4,17 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   ref: Ref<HTMLButtonElement>;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_GrabHandleButton: FC<Props> = forwardRef(
-  ({ tableInstance }, ref) => {
+  ({ instance }, ref) => {
     const {
       options: {
         icons: { DragHandleIcon },
         localization,
       },
-    } = tableInstance;
+    } = instance;
 
     return (
       <Tooltip

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,19 +4,16 @@ import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({
-  tableInstance,
-  ...rest
-}) => {
+export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
   const {
     options: {
       icons: { ViewColumnIcon },
       localization,
     },
-  } = tableInstance;
+  } = instance;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -38,7 +35,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({
       <MRT_ShowHideColumnsMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </>
   );

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -5,12 +5,12 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
   header,
-  tableInstance,
+  instance,
 }) => {
   const {
     options: {
@@ -18,7 +18,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
       localization,
       muiTableHeadCellColumnActionsButtonProps,
     },
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -34,14 +34,14 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
 
   const mTableHeadCellColumnActionsButtonProps =
     muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps({ column, tableInstance })
+      ? muiTableHeadCellColumnActionsButtonProps({ column, instance })
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
     columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
       ? columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
@@ -84,7 +84,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </>
   );

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -3,11 +3,11 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ToggleDensePaddingButton: FC<Props> = ({
-  tableInstance,
+  instance,
   ...rest
 }) => {
   const {
@@ -18,7 +18,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
       onMrtToggleDensePadding,
     },
     setIsDensePadding,
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
@@ -26,7 +26,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     onMrtToggleDensePadding?.({
       event,
       isDensePadding: !isDensePadding,
-      tableInstance,
+      instance,
     });
     setIsDensePadding(!isDensePadding);
   };

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({
-  tableInstance,
-  ...rest
-}) => {
+export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
   const {
     getState,
     options: {
@@ -18,7 +15,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
       onMrtToggleShowFilters,
     },
     setShowFilters,
-  } = tableInstance;
+  } = instance;
 
   const { showFilters } = getState();
 
@@ -26,7 +23,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     onMrtToggleShowFilters?.({
       event,
       showFilters: !showFilters,
-      tableInstance,
+      instance,
     });
     setShowFilters(!showFilters);
   };

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -3,11 +3,11 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
-  tableInstance,
+  instance,
   ...rest
 }) => {
   const {
@@ -20,20 +20,20 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       onMrtToggleShowGlobalFilter,
     },
     setShowGlobalFilter,
-  } = tableInstance;
+  } = instance;
 
   const { showGlobalFilter } = getState();
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ tableInstance })
+      ? muiSearchTextFieldProps({ instance })
       : muiSearchTextFieldProps;
 
   const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
     onMrtToggleShowGlobalFilter?.({
       event,
       showGlobalFilter: !showGlobalFilter,
-      tableInstance,
+      instance,
     });
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(