material-react-table 0.9.7 → 0.10.0

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -17,13 +17,10 @@ const commonIconButtonStyles = {
 
 interface Props {
   row: MRT_Row;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
-  row,
-  tableInstance,
-}) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
   const {
     getState,
     options: {
@@ -34,7 +31,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
       renderRowActions,
     },
     setCurrentEditingRow,
-  } = tableInstance;
+  } = instance;
 
   const { currentEditingRow } = getState();
 
@@ -54,9 +51,9 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions({ row, tableInstance })}</>
+        <>{renderRowActions({ row, instance })}</>
       ) : row.id === currentEditingRow?.id ? (
-        <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
+        <MRT_EditActionButtons row={row} instance={instance} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
@@ -85,7 +82,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
             handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
-            tableInstance={tableInstance}
+            instance={instance}
           />
         </>
       ) : null}

package/src/footer/MRT_TableFooter.tsx

@@ -4,19 +4,19 @@ import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableFooter: FC<Props> = ({ tableInstance }) => {
+export const MRT_TableFooter: FC<Props> = ({ instance }) => {
   const {
     getFooterGroups,
 
     options: { muiTableFooterProps },
-  } = tableInstance;
+  } = instance;
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
-      ? muiTableFooterProps({ tableInstance })
+      ? muiTableFooterProps({ instance })
       : muiTableFooterProps;
 
   return (
@@ -25,7 +25,7 @@ export const MRT_TableFooter: FC<Props> = ({ tableInstance }) => {
         <MRT_TableFooterRow
           footerGroup={footerGroup as any}
           key={footerGroup.id}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterCell.tsx

@@ -4,14 +4,14 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   footer: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
+export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
   const {
     getState,
     options: { muiTableFooterCellProps, enableColumnResizing },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
@@ -21,12 +21,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps({ column, tableInstance })
+      ? muiTableFooterCellProps({ column, instance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
     columnDef.muiTableFooterCellProps instanceof Function
-      ? columnDef.muiTableFooterCellProps({ column, tableInstance })
+      ? columnDef.muiTableFooterCellProps({ column, instance })
       : columnDef.muiTableFooterCellProps;
 
   const tableCellProps = {
@@ -62,7 +62,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
           : (columnDef.Footer instanceof Function
               ? columnDef.Footer?.({
                   footer,
-                  tableInstance,
+                  instance,
                 })
               : columnDef.Footer) ??
             columnDef.footer ??

package/src/footer/MRT_TableFooterRow.tsx

@@ -5,16 +5,13 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableFooterRow: FC<Props> = ({
-  footerGroup,
-  tableInstance,
-}) => {
+export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, instance }) => {
   const {
     options: { muiTableFooterRowProps },
-  } = tableInstance;
+  } = instance;
 
   // if no content in row, skip row
   if (
@@ -29,7 +26,7 @@ export const MRT_TableFooterRow: FC<Props> = ({
 
   const tableRowProps =
     muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps({ footerGroup, tableInstance })
+      ? muiTableFooterRowProps({ footerGroup, instance })
       : muiTableFooterRowProps;
 
   return (
@@ -38,7 +35,7 @@ export const MRT_TableFooterRow: FC<Props> = ({
         <MRT_TableFooterCell
           footer={footer}
           key={footer.id}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       ))}
     </TableRow>

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -6,18 +6,15 @@ import { reorderColumn } from '../utils';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_DraggableTableHeadCell: FC<Props> = ({
-  header,
-  tableInstance,
-}) => {
+export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
   const {
     getState,
     options: {},
     setColumnOrder,
-  } = tableInstance;
+  } = instance;
 
   const { columnOrder } = getState();
 
@@ -44,7 +41,7 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
       header={header}
       isDragging={isDragging}
       previewRef={previewRef}
-      tableInstance={tableInstance}
+      instance={instance}
     />
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -4,18 +4,18 @@ import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({ tableInstance }) => {
+export const MRT_TableHead: FC<Props> = ({ instance }) => {
   const {
     getHeaderGroups,
     options: { muiTableHeadProps },
-  } = tableInstance;
+  } = instance;
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
-      ? muiTableHeadProps({ tableInstance })
+      ? muiTableHeadProps({ instance })
       : muiTableHeadProps;
 
   return (
@@ -24,7 +24,7 @@ export const MRT_TableHead: FC<Props> = ({ tableInstance }) => {
         <MRT_TableHeadRow
           headerGroup={headerGroup as any}
           key={headerGroup.id}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       ))}
     </TableHead>

package/src/head/MRT_TableHeadCell.tsx

@@ -14,7 +14,7 @@ interface Props {
   header: MRT_Header;
   isDragging?: boolean;
   previewRef?: Ref<HTMLTableCellElement>;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({
@@ -23,7 +23,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
   header,
   isDragging,
   previewRef,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -35,7 +35,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
       enableGrouping,
       muiTableHeadCellProps,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
@@ -45,12 +45,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps({ column, tableInstance })
+      ? muiTableHeadCellProps({ column, instance })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
     columnDef.muiTableHeadCellProps instanceof Function
-      ? columnDef.muiTableHeadCellProps({ column, tableInstance })
+      ? columnDef.muiTableHeadCellProps({ column, instance })
       : columnDef.muiTableHeadCellProps;
 
   const tableCellProps = {
@@ -61,7 +61,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
   const headerElement = ((columnDef?.Header instanceof Function
     ? columnDef?.Header?.({
         header,
-        tableInstance,
+        instance,
       })
     : columnDef?.Header) ??
     header.renderHeader() ??
@@ -70,7 +70,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
-      tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+      instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
     );
   };
 
@@ -80,9 +80,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (tableInstance.getRightLeafHeaders().length -
-        1 -
-        column.getPinnedIndex()) *
+      (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) *
       150
     );
   };
@@ -171,17 +169,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
           >
             {headerElement}
             {columnDefType === 'data' && column.getCanSort() && (
-              <MRT_TableHeadCellSortLabel
-                header={header}
-                tableInstance={tableInstance}
-              />
+              <MRT_TableHeadCellSortLabel header={header} instance={instance} />
             )}
             {columnDefType === 'data' &&
               enableColumnFilters &&
               column.getCanFilter() && (
                 <MRT_TableHeadCellFilterLabel
                   header={header}
-                  tableInstance={tableInstance}
+                  instance={instance}
                 />
               )}
           </Box>
@@ -192,7 +187,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
                 <MRT_GrabHandleButton
                   ref={dragRef as Ref<HTMLButtonElement>}
-                  tableInstance={tableInstance}
+                  instance={instance}
                 />
               )}
             {(enableColumnActions || columnDef.enableColumnActions) &&
@@ -200,23 +195,20 @@ export const MRT_TableHeadCell: FC<Props> = ({
               columnDefType !== 'group' && (
                 <MRT_ToggleColumnActionMenuButton
                   header={header}
-                  tableInstance={tableInstance}
+                  instance={instance}
                 />
               )}
           </Box>
           {column.getCanResize() && (
             <MRT_TableHeadCellResizeHandle
               header={header}
-              tableInstance={tableInstance}
+              instance={instance}
             />
           )}
         </Box>
       )}
       {columnDefType === 'data' && column.getCanFilter() && (
-        <MRT_TableHeadCellFilterContainer
-          header={header}
-          tableInstance={tableInstance}
-        />
+        <MRT_TableHeadCellFilterContainer header={header} instance={instance} />
       )}
     </TableCell>
   );

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -2,19 +2,18 @@ import React, { FC } from 'react';
 import { Collapse } from '@mui/material';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
-import { MRT_FILTER_OPTION } from '../enums';
 import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   header,
-  tableInstance,
+  instance,
 }) => {
-  const { getState } = tableInstance;
+  const { getState } = instance;
 
   const { currentFilterFns, showFilters } = getState();
 
@@ -22,10 +21,10 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
 
   return (
     <Collapse in={showFilters} mountOnEnter unmountOnExit>
-      {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
-        <MRT_FilterRangeFields header={header} tableInstance={tableInstance} />
+      {currentFilterFns[column.id] === 'between' ? (
+        <MRT_FilterRangeFields header={header} instance={instance} />
       ) : (
-        <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+        <MRT_FilterTextField header={header} instance={instance} />
       )}
     </Collapse>
   );

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -4,12 +4,12 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
   header,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -18,7 +18,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
       localization,
     },
     setShowFilters,
-  } = tableInstance;
+  } = instance;
 
   const { showFilters } = getState();
 

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -4,14 +4,14 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
   header,
-  tableInstance,
+  instance,
 }) => {
-  const { getState } = tableInstance;
+  const { getState } = instance;
 
   const { showFilters } = getState();
 

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -4,16 +4,13 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellSortLabel: FC<Props> = ({
-  header,
-  tableInstance,
-}) => {
+export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, instance }) => {
   const {
     options: { localization },
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 

package/src/head/MRT_TableHeadRow.tsx

@@ -6,17 +6,17 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, instance }) => {
   const {
     options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
-  } = tableInstance;
+  } = instance;
 
   const tableRowProps =
     muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps({ headerGroup, tableInstance })
+      ? muiTableHeadRowProps({ headerGroup, instance })
       : muiTableHeadRowProps;
 
   return (
@@ -33,13 +33,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
           <MRT_DraggableTableHeadCell
             header={header}
             key={header.id || index}
-            tableInstance={tableInstance}
+            instance={instance}
           />
         ) : (
           <MRT_TableHeadCell
             header={header}
             key={header.id || index}
-            tableInstance={tableInstance}
+            instance={instance}
           />
         ),
       )}

package/src/inputs/MRT_EditCellTextField.tsx

@@ -10,10 +10,10 @@ import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
+export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
   const {
     getState,
     options: {
@@ -25,7 +25,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
-  } = tableInstance;
+  } = instance;
 
   const [value, setValue] = useState(cell.getValue());
 
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onMrtCellEditChange?.({ event, cell, tableInstance });
-    onMrtCellEditChange?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditChange?.({ event, cell, instance });
+    onMrtCellEditChange?.({ event, cell, instance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,20 +46,20 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onMrtCellEditBlur?.({ event, cell, tableInstance });
-    onMrtCellEditBlur?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditBlur?.({ event, cell, instance });
+    onMrtCellEditBlur?.({ event, cell, instance });
   };
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
+      ? muiTableBodyCellEditTextFieldProps({ cell, instance })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
       ? columnDef.muiTableBodyCellEditTextFieldProps({
           cell,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableBodyCellEditTextFieldProps;
 
@@ -69,7 +69,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   };
 
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, tableInstance })}</>;
+    return <>{columnDef.Edit?.({ cell, instance })}</>;
   }
 
   return (

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -5,21 +5,17 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
+export const MRT_FilterRangeFields: FC<Props> = ({ header, instance }) => {
   const {
     options: { localization },
-  } = tableInstance;
+  } = instance;
 
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '6fr auto 5fr' }}>
-      <MRT_FilterTextField
-        header={header}
-        inputIndex={0}
-        tableInstance={tableInstance}
-      />
+      <MRT_FilterTextField header={header} inputIndex={0} instance={instance} />
       <Box
         sx={{
           width: '100%',
@@ -29,11 +25,7 @@ export const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
       >
         {localization.to}
       </Box>
-      <MRT_FilterTextField
-        header={header}
-        inputIndex={1}
-        tableInstance={tableInstance}
-      />
+      <MRT_FilterTextField header={header} inputIndex={1} instance={instance} />
     </Box>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -15,20 +15,19 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { MRT_FILTER_OPTION } from '../enums';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
   inputIndex?: number;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({
   header,
   inputIndex,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -39,7 +38,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       muiTableHeadCellFilterTextFieldProps,
     },
     setCurrentFilterFns,
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -51,14 +50,14 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
+      ? muiTableHeadCellFilterTextFieldProps({ column, instance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
       ? columnDef.muiTableHeadCellFilterTextFieldProps({
           column,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableHeadCellFilterTextFieldProps;
 
@@ -110,12 +109,12 @@ export const MRT_FilterTextField: FC<Props> = ({
     column.setFilterValue(undefined);
     setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_OPTION.FUZZY,
+      [header.id]: 'fuzzy',
     }));
   };
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ header, tableInstance })}</>;
+    return <>{columnDef.Filter?.({ header, instance })}</>;
   }
 
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
@@ -124,10 +123,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!columnDef.filterSelectOptions;
   const filterChipLabel =
-    !(filterFn instanceof Function) &&
-    [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
-      filterFn as MRT_FILTER_OPTION,
-    )
+    !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn)
       ? //@ts-ignore
         localization[
           `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
@@ -292,7 +288,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </>
   );