material-react-table 0.6.10 → 0.7.0-alpha.11

package/src/MaterialReactTable.tsx

@@ -1,10 +1,19 @@
-import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
+import React, {
+  ChangeEvent,
+  Dispatch,
+  FC,
+  FocusEvent,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+} from 'react';
 import {
   AlertProps,
   ButtonProps,
   CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
+  PaperProps,
   SkeletonProps,
   TableBodyProps,
   TableCellProps,
@@ -20,237 +29,315 @@ import {
 import {
   Cell,
   Column,
-  ColumnInstance,
+  ColumnDef,
+  DefaultGenerics,
   FilterType,
-  ColumnInterface,
+  Header,
   HeaderGroup,
+  Options,
+  Overwrite,
+  PaginationState,
   Row,
   TableInstance,
-  TableOptions,
   TableState,
-  UseColumnOrderInstanceProps,
-  UseColumnOrderState,
-  UseExpandedInstanceProps,
-  UseExpandedOptions,
-  UseExpandedRowProps,
-  UseExpandedState,
-  UseFiltersColumnOptions,
-  UseFiltersColumnProps,
-  UseFiltersInstanceProps,
-  UseFiltersOptions,
-  UseFiltersState,
-  UseGlobalFiltersColumnOptions,
-  UseGlobalFiltersInstanceProps,
-  UseGlobalFiltersOptions,
-  UseGlobalFiltersState,
-  UseGroupByCellProps,
-  UseGroupByColumnOptions,
-  UseGroupByColumnProps,
-  UseGroupByInstanceProps,
-  UseGroupByOptions,
-  UseGroupByRowProps,
-  UseGroupByState,
-  UsePaginationInstanceProps,
-  UsePaginationOptions,
-  UsePaginationState,
-  UseResizeColumnsColumnOptions,
-  UseResizeColumnsColumnProps,
-  UseResizeColumnsOptions,
-  UseResizeColumnsState,
-  UseRowSelectInstanceProps,
-  UseRowSelectOptions,
-  UseRowSelectRowProps,
-  UseRowSelectState,
-  UseRowStateCellProps,
-  UseRowStateInstanceProps,
-  UseRowStateOptions,
-  UseRowStateRowProps,
-  UseRowStateState,
-  UseSortByColumnOptions,
-  UseSortByColumnProps,
-  UseSortByInstanceProps,
-  UseSortByOptions,
-  UseSortByState,
-  UseTableHeaderGroupProps,
-  UseTableInstanceProps,
-  UseTableOptions,
-} from 'react-table';
-import { MaterialReactTableProvider } from './useMRT';
-import { MRT_TableContainer } from './table/MRT_TableContainer';
+  VisibilityState,
+} from '@tanstack/react-table';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
-import { defaultFilterFNs } from './filtersFNs';
+import { MRT_TableRoot } from './table/MRT_TableRoot';
 
-export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
-  UseExpandedOptions<D> &
-  UseFiltersOptions<D> &
-  UseGlobalFiltersOptions<D> &
-  UseGroupByOptions<D> &
-  UsePaginationOptions<D> &
-  UseResizeColumnsOptions<D> &
-  UseRowSelectOptions<D> &
-  UseRowStateOptions<D> &
-  UseSortByOptions<D> & {
-    columns: MRT_ColumnInterface[];
-    data: D[];
-    initialState?: Partial<MRT_TableState>;
-  };
+//@ts-ignore
+global.performance = global.performance || {
+  now: () => new Date().getTime(),
+};
 
-export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
-  UseTableInstanceProps<D> &
-  UseColumnOrderInstanceProps<D> &
-  UseExpandedInstanceProps<D> &
-  UseFiltersInstanceProps<D> &
-  UseGlobalFiltersInstanceProps<D> &
-  UseGroupByInstanceProps<D> &
-  UsePaginationInstanceProps<D> &
-  UseRowSelectInstanceProps<D> &
-  UseRowStateInstanceProps<D> &
-  UseSortByInstanceProps<D> & {
-    columns: (Column<D> & MRT_ColumnInstance<D>)[];
-    footerGroups: MRT_HeaderGroup<D>[];
-    getToggleAllRowsExpandedProps: () => void;
-    headerGroups: MRT_HeaderGroup<D>[];
-    page: MRT_Row<D>[];
-    resetResizing: () => void;
-    rows: MRT_Row<D>[];
-    state: MRT_TableState<D>;
-  };
+export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
+  Omit<
+    Options<D>,
+    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
+  >
+> & {
+  columns: MRT_ColumnInterface<D>[];
+  data: D[];
+  initialState?: Partial<MRT_TableState<D>>;
+  state?: Partial<MRT_TableState<D>>;
+  expandRowsFn?: (dataRow: D) => D[];
+};
 
-export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
-  UseFiltersColumnOptions<D> &
-  UseGlobalFiltersColumnOptions<D> &
-  UseGroupByColumnOptions<D> &
-  UseResizeColumnsColumnOptions<D> &
-  UseSortByColumnOptions<D> & {
-    Edit?: ({
-      cell,
-      onChange,
-    }: {
-      cell: MRT_Cell<D>;
-      onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    }) => ReactNode;
-    Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
-    Footer?: string;
-    Header?: string;
-    accessor?: string;
-    columns?: MRT_ColumnInterface<D>[];
-    disableClickToCopy?: boolean;
-    disableColumnActions?: boolean;
-    disableColumnHiding?: boolean;
-    disableEditing?: boolean;
-    disableFilters?: boolean;
-    enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
-    filter?: MRT_FilterType | string | FilterType<D>;
-    filterSelectOptions?: (string | { text: string; value: string })[];
-    muiTableBodyCellCopyButtonProps?:
-      | ButtonProps
-      | ((cell?: MRT_Cell<D>) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?:
-      | TextFieldProps
-      | ((cell: MRT_Cell<D>) => TextFieldProps);
-    muiTableBodyCellProps?:
-      | TableCellProps
-      | ((cell: MRT_Cell<D>) => TableCellProps);
-    muiTableFooterCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
-    muiTableHeadCellColumnActionsButtonProps?:
-      | IconButtonProps
-      | ((column: Column<D>) => IconButtonProps);
-    muiTableHeadCellFilterTextFieldProps?:
-      | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
-    muiTableHeadCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
-    onCellEditChange?: (
-      event: ChangeEvent<HTMLInputElement>,
-      cell: MRT_Cell<D>,
-    ) => void;
-    onFilterChange?: (
-      event: ChangeEvent<HTMLInputElement>,
-      filterValue: any,
-    ) => void;
+export interface MRT_RowModel<D extends Record<string, any> = {}> {
+  flatRows: MRT_Row<D>[];
+  rows: MRT_Row<D>[];
+  rowsById: { [key: string]: MRT_Row<D> };
+}
+
+export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
+  TableInstance<
+    Overwrite<
+      Partial<DefaultGenerics>,
+      {
+        Row: D;
+      }
+    >
+  >,
+  | 'getAllColumns'
+  | 'getAllLeafColumns'
+  | 'getExpandedRowModel'
+  | 'getPaginationRowModel'
+  | 'getPrePaginationRowModel'
+  | 'getRowModel'
+  | 'getSelectedRowModel'
+  | 'getState'
+  | 'options'
+> & {
+  getAllColumns: () => MRT_ColumnInstance<D>[];
+  getAllLeafColumns: () => MRT_ColumnInstance<D>[];
+  getExpandedRowModel: () => MRT_RowModel<D>;
+  getPaginationRowModel: () => MRT_RowModel<D>;
+  getPrePaginationRowModel: () => MRT_RowModel<D>;
+  getRowModel: () => MRT_RowModel<D>;
+  getSelectedRowModel: () => MRT_RowModel<D>;
+  getState: () => MRT_TableState<D>;
+  options: MaterialReactTableProps<D> & {
+    icons: MRT_Icons;
+    idPrefix: string;
+    filterTypes: { [key in MRT_FILTER_TYPE]: any };
+    localization: MRT_Localization;
   };
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentFilterTypes: Dispatch<
+    SetStateAction<{
+      [key: string]: MRT_FilterType;
+    }>
+  >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  setShowSearch: Dispatch<SetStateAction<boolean>>;
+};
+
+export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
+  TableState,
+  'pagination'
+> & {
+  currentEditingRow: MRT_Row<D> | null;
+  currentFilterTypes: Record<string, string | Function>;
+  currentGlobalFilterType: Record<string, string | Function>;
+  isDensePadding: boolean;
+  isFullScreen: boolean;
+  showFilters: boolean;
+  showSearch: boolean;
+  pagination: Partial<PaginationState>;
+};
+
+export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
+  ColumnDef<D>,
+  'header' | 'footer' | 'columns'
+> & {
+  Edit?: ({
+    cell,
+    tableInstance,
+  }: // onChange,
+  {
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  }) => ReactNode;
+  Filter?: ({
+    // onChange,
+    header,
+    tableInstance,
+  }: {
+    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    header: MRT_Header<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => ReactNode;
+  Footer?: ({
+    footer,
+    tableInstance,
+  }: {
+    footer: MRT_Header<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => ReactNode;
+  Header?: ({
+    header,
+    tableInstance,
+  }: {
+    header: MRT_Header<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => ReactNode;
+  Cell?: ({
+    cell,
+    tableInstance,
+  }: {
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => ReactNode;
+  id: keyof D | string;
+  columns?: MRT_ColumnInterface<D>[];
+  enableClickToCopy?: boolean;
+  enableColumnActions?: boolean;
+  enableEditing?: boolean;
+  enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
+  filter?: MRT_FilterType | string | FilterType<D>;
+  filterSelectOptions?: (string | { text: string; value: string })[];
+  footer?: string;
+  header: string;
+  muiTableBodyCellCopyButtonProps?:
+    | ButtonProps
+    | (({
+        tableInstance,
+        cell,
+      }: {
+        tableInstance: MRT_TableInstance;
+        cell: MRT_Cell<D>;
+      }) => ButtonProps);
+  muiTableBodyCellEditTextFieldProps?:
+    | TextFieldProps
+    | (({
+        tableInstance,
+        cell,
+      }: {
+        tableInstance: MRT_TableInstance;
+        cell: MRT_Cell<D>;
+      }) => TextFieldProps);
+  muiTableBodyCellProps?:
+    | TableCellProps
+    | (({
+        tableInstance,
+        cell,
+      }: {
+        tableInstance: MRT_TableInstance;
+        cell: MRT_Cell<D>;
+      }) => TableCellProps);
+  muiTableFooterCellProps?:
+    | TableCellProps
+    | (({
+        tableInstance,
+        column,
+      }: {
+        tableInstance: MRT_TableInstance;
+        column: MRT_ColumnInstance<D>;
+      }) => TableCellProps);
+  muiTableHeadCellColumnActionsButtonProps?:
+    | IconButtonProps
+    | (({
+        tableInstance,
+        column,
+      }: {
+        tableInstance: MRT_TableInstance;
+        column: MRT_ColumnInstance<D>;
+      }) => IconButtonProps);
+  muiTableHeadCellFilterTextFieldProps?:
+    | TextFieldProps
+    | (({
+        tableInstance,
+        column,
+      }: {
+        tableInstance: MRT_TableInstance;
+        column: MRT_ColumnInstance<D>;
+      }) => TextFieldProps);
+  muiTableHeadCellProps?:
+    | TableCellProps
+    | (({
+        tableInstance,
+        column,
+      }: {
+        tableInstance: MRT_TableInstance;
+        column: MRT_ColumnInstance<D>;
+      }) => TableCellProps);
+  onCellEditBlur?: ({
+    cell,
+    event,
+    tableInstance,
+  }: {
+    event: FocusEvent<HTMLInputElement>;
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => void;
+  onCellEditChange?: ({
+    cell,
+    event,
+    tableInstance,
+  }: {
+    event: ChangeEvent<HTMLInputElement>;
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => void;
+  onColumnFilterValueChange?: ({
+    event,
+    filterValue,
+  }: {
+    event: ChangeEvent<HTMLInputElement>;
+    filterValue: any;
+  }) => void;
+};
 
-export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
-  UseFiltersColumnProps<D> &
-  UseGroupByColumnProps<D> &
-  UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> &
+export type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<
+  Column<D>,
+  'header' | 'footer' | 'columns'
+> &
   MRT_ColumnInterface<D> & {
     columns?: MRT_ColumnInstance<D>[];
   };
 
-export type MRT_HeaderGroup<D extends {} = {}> = HeaderGroup<D> &
-  MRT_ColumnInstance<D> &
-  UseTableHeaderGroupProps<D> & {
-    headers: MRT_HeaderGroup<D>[];
-  };
+export type MRT_Header<D extends Record<string, any> = {}> = Omit<
+  Header<D>,
+  'column'
+> & {
+  column: MRT_ColumnInstance<D>;
+};
 
-export type MRT_Row<D extends {} = {}> = Row<D> &
-  UseExpandedRowProps<D> &
-  UseGroupByRowProps<D> &
-  UseRowSelectRowProps<D> &
-  UseRowStateRowProps<D> & {
-    cells: MRT_Cell<D>[];
-  };
+export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
+  HeaderGroup<D>,
+  'headers'
+> & {
+  headers: MRT_Header<D>[];
+};
 
-export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
-  UseGroupByCellProps<D> &
-  UseRowStateCellProps<D> & {
-    column: MRT_ColumnInstance<D>;
-  };
+export type MRT_Row<D extends Record<string, any> = {}> = Omit<
+  Row<D>,
+  | 'getVisibleCells'
+  | 'getAllCells'
+  | 'subRows'
+  | 'original'
+  | 'getLeftVisibleCells'
+  | 'getRightVisibleCells'
+  | 'getCenterVisibleCells'
+> & {
+  getAllCells: () => MRT_Cell<D>[];
+  getCenterVisibleCells: () => MRT_Cell<D>[];
+  getLeftVisibleCells: () => MRT_Cell<D>[];
+  getRightVisibleCells: () => MRT_Cell<D>[];
+  getVisibleCells: () => MRT_Cell<D>[];
+  subRows?: MRT_Row<D>[];
+  original: D;
+};
 
-export type MRT_FilterType = MRT_FILTER_TYPE | Function;
+export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
+  Cell<D>,
+  'column' | 'row'
+> & {
+  column: MRT_ColumnInstance<D>;
+  row: MRT_Row<D>;
+};
 
-export type MRT_TableState<D extends {} = {}> = TableState<D> &
-  UseColumnOrderState<D> &
-  UseExpandedState<D> &
-  UseFiltersState<D> &
-  UseGlobalFiltersState<D> &
-  UseGroupByState<D> &
-  UsePaginationState<D> &
-  UseResizeColumnsState<D> &
-  UseRowSelectState<D> &
-  UseRowStateState<D> &
-  UseSortByState<D> & {
-    currentEditingRow: MRT_Row<D> | null;
-    currentFilterTypes: { [key: string]: MRT_FilterType };
-    currentGlobalFilterType: MRT_FilterType;
-    densePadding: boolean;
-    fullScreen: boolean;
-    showFilters: boolean;
-    showSearch: boolean;
-  };
+export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
-export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
-  UseExpandedOptions<D> &
-  UseFiltersOptions<D> &
-  UseGlobalFiltersOptions<D> &
-  UseGroupByOptions<D> &
-  UsePaginationOptions<D> &
-  UseResizeColumnsOptions<D> &
-  UseRowSelectOptions<D> &
-  UseRowStateOptions<D> &
-  UseSortByOptions<D> &
+export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
-    disableColumnActions?: boolean;
-    disableColumnHiding?: boolean;
-    disableDensePaddingToggle?: boolean;
-    disableExpandAll?: boolean;
-    disableFullScreenToggle?: boolean;
-    disableSelectAll?: boolean;
-    disableSubRowTree?: boolean;
     enableClickToCopy?: boolean;
-    enableColumnGrouping?: boolean;
-    enableColumnResizing?: boolean;
+    enableColumnActions?: boolean;
+    enableDensePaddingToggle?: boolean;
+    enableEditing?: boolean;
+    enableExpandAll?: boolean;
+    enableFullScreenToggle?: boolean;
+    enablePagination?: boolean;
     enableRowActions?: boolean;
-    enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
-    enableSelection?: boolean;
+    enableSelectAll?: boolean;
+    enableStickyHeader?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
@@ -260,144 +347,364 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isFetching?: boolean;
     isLoading?: boolean;
+    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
-      | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
-    muiSearchTextFieldProps?: TextFieldProps;
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => LinearProgressProps);
+    muiSearchTextFieldProps?:
+      | TextFieldProps
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TextFieldProps);
     muiSelectCheckboxProps?:
       | CheckboxProps
-      | ((
-          isSelectAll?: boolean,
-          row?: MRT_Row<D>,
-          tableInstance?: MRT_TableInstance<D>,
-        ) => CheckboxProps);
+      | (({
+          tableInstance,
+          isSelectAll,
+          row,
+        }: {
+          tableInstance: MRT_TableInstance;
+          isSelectAll: boolean;
+          row?: MRT_Row<D>;
+        }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
-      | ((cell?: MRT_Cell<D>) => ButtonProps);
+      | (({
+          tableInstance,
+          cell,
+        }: {
+          tableInstance: MRT_TableInstance;
+          cell: MRT_Cell<D>;
+        }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
-      | ((cell?: MRT_Cell<D>) => TextFieldProps);
+      | (({
+          tableInstance,
+          cell,
+        }: {
+          tableInstance: MRT_TableInstance;
+          cell: MRT_Cell<D>;
+        }) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
-      | ((cell?: MRT_Cell<D>) => TableCellProps);
+      | (({
+          tableInstance,
+          cell,
+        }: {
+          tableInstance: MRT_TableInstance;
+          cell: MRT_Cell<D>;
+        }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
       | SkeletonProps
-      | ((cell?: MRT_Cell<D>) => SkeletonProps);
+      | (({
+          tableInstance,
+          cell,
+        }: {
+          tableInstance: MRT_TableInstance;
+          cell: MRT_Cell<D>;
+        }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
-      | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
-    muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TableBodyProps);
+    muiTableBodyRowProps?:
+      | TableRowProps
+      | (({
+          tableInstance,
+          row,
+        }: {
+          tableInstance: MRT_TableInstance;
+          row: MRT_Row<D>;
+        }) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
-      | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
-      | ((row: Row<D>) => TableCellProps);
+      | (({
+          tableInstance,
+          row,
+        }: {
+          tableInstance: MRT_TableInstance;
+          row: MRT_Row<D>;
+        }) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+      | (({
+          tableInstance,
+          column,
+        }: {
+          tableInstance: MRT_TableInstance;
+          column: MRT_ColumnInstance<D>;
+        }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
-      | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
+      | (({
+          tableInstance,
+          footerGroup,
+        }: {
+          tableInstance: MRT_TableInstance;
+          footerGroup: MRT_HeaderGroup<D>;
+        }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
       | IconButtonProps
-      | ((column: Column<D>) => IconButtonProps);
+      | (({
+          tableInstance,
+          column,
+        }: {
+          tableInstance: MRT_TableInstance;
+          column: MRT_ColumnInstance<D>;
+        }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
+      | (({
+          tableInstance,
+          column,
+        }: {
+          tableInstance: MRT_TableInstance;
+          column: MRT_ColumnInstance<D>;
+        }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+      | (({
+          tableInstance,
+          column,
+        }: {
+          tableInstance: MRT_TableInstance;
+          column: MRT_ColumnInstance<D>;
+        }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
-      | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
-      | ((row: MRT_HeaderGroup<D>) => TableRowProps);
+      | (({
+          tableInstance,
+          headerGroup,
+        }: {
+          tableInstance: MRT_TableInstance;
+          headerGroup: MRT_HeaderGroup<D>;
+        }) => TableRowProps);
+    muiTablePaperProps?:
+      | PaperProps
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => PaperProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
-      | ((
-          tableInstance: MRT_TableInstance<D>,
-        ) => Partial<TablePaginationProps>);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => Partial<TablePaginationProps>);
     muiTableProps?:
       | TableProps
-      | ((tableInstance: MRT_TableInstance<D>) => TableProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | ((tableInstance: MRT_TableInstance<D>) => AlertProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
-    onCellClick?: (
-      event: MouseEvent<HTMLTableCellElement>,
-      cell: MRT_Cell<D>,
-    ) => void;
-    onColumnHide?: (column: Column<D>, hiddenColumns?: string[]) => void;
-    onDetailPanelClick?: (
-      event: MouseEvent<HTMLTableCellElement>,
-      row: Row<D>,
-    ) => void;
-    onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
-    onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
-    onRowExpandChange?: (
-      event: MouseEvent<HTMLButtonElement>,
-      row: Row<D>,
-    ) => void;
-    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
-    onSelectChange?: (
-      event: ChangeEvent,
-      row: Row<D>,
-      selectedRows: Row<D>[],
-    ) => void;
+      | (({
+          tableInstance,
+        }: {
+          tableInstance: MRT_TableInstance;
+        }) => ToolbarProps);
+    onCellClick?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+      event: MouseEvent<HTMLTableCellElement>;
+    }) => void;
+    onColumnHide?: ({
+      column,
+      columnVisibility,
+      tableInstance,
+    }: {
+      column: MRT_ColumnInstance<D>;
+      columnVisibility: VisibilityState;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onDetailPanelClick?: ({
+      event,
+      row,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLTableCellElement>;
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onGlobalFilterChange?: ({
+      event,
+      tableInstance,
+    }: {
+      event: ChangeEvent<HTMLInputElement>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onRowClick?: ({
+      event,
+      row,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLTableRowElement>;
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onEditSubmit?: ({
+      row,
+      tableInstance,
+    }: {
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => Promise<void> | void;
+    onRowExpandChange?: ({
+      event,
+      row,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onSelectAllChange?: ({
+      event,
+      selectedRows,
+      tableInstance,
+    }: {
+      event: ChangeEvent;
+      selectedRows: MRT_Row<D>[];
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onSelectChange?: ({
+      event,
+      row,
+      selectedRows,
+      tableInstance,
+    }: {
+      event: ChangeEvent;
+      row: MRT_Row<D>;
+      selectedRows: MRT_Row<D>[];
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
-    renderDetailPanel?: (row: Row<D>) => ReactNode;
-    renderRowActionMenuItems?: (
-      rowData: Row<D>,
-      tableInstance: MRT_TableInstance<D>,
-      closeMenu: () => void,
-    ) => ReactNode[];
-    renderRowActions?: (
-      row: Row<D>,
-      tableInstance: MRT_TableInstance<D>,
-    ) => ReactNode;
-    renderToolbarCustomActions?: (
-      tableInstance: MRT_TableInstance<D>,
-    ) => ReactNode;
-    renderToolbarInternalActions?: (
-      tableInstance: MRT_TableInstance<D>,
-      {
-        MRT_ToggleSearchButton,
-        MRT_ToggleFiltersButton,
-        MRT_ShowHideColumnsButton,
-        MRT_ToggleDensePaddingButton,
-        MRT_FullScreenToggleButton,
-      }: {
-        MRT_ToggleSearchButton: FC<IconButtonProps>;
-        MRT_ToggleFiltersButton: FC<IconButtonProps>;
-        MRT_ShowHideColumnsButton: FC<IconButtonProps>;
-        MRT_ToggleDensePaddingButton: FC<IconButtonProps>;
-        MRT_FullScreenToggleButton: FC<IconButtonProps>;
-      },
-    ) => ReactNode;
+    renderDetailPanel?: ({
+      row,
+      tableInstance,
+    }: {
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderRowActionMenuItems?: ({
+      closeMenu,
+      row,
+      tableInstance,
+    }: {
+      closeMenu: () => void;
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => ReactNode[];
+    renderRowActions?: ({
+      row,
+      tableInstance,
+    }: {
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderToolbarCustomActions?: ({
+      tableInstance,
+    }: {
+      tableInstance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderToolbarInternalActions?: ({
+      tableInstance,
+      MRT_ToggleSearchButton,
+      MRT_ToggleFiltersButton,
+      MRT_ShowHideColumnsButton,
+      MRT_ToggleDensePaddingButton,
+      MRT_FullScreenToggleButton,
+    }: {
+      tableInstance: MRT_TableInstance<D>;
+      MRT_ToggleSearchButton: FC<
+        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+      >;
+      MRT_ToggleFiltersButton: FC<
+        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+      >;
+      MRT_ShowHideColumnsButton: FC<
+        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+      >;
+      MRT_ToggleDensePaddingButton: FC<
+        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+      >;
+      MRT_FullScreenToggleButton: FC<
+        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+      >;
+    }) => ReactNode;
   };
 
-export default <D extends {} = {}>({
-  defaultColumn = { minWidth: 50, maxWidth: 1000 },
-  filterTypes,
-  globalFilter = MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+export default <D extends Record<string, any> = {}>({
+  autoResetExpanded = false,
+  enableColumnActions = true,
+  enableColumnFilters = true,
+  enableDensePaddingToggle = true,
+  enableExpandAll = true,
+  enableFilters = true,
+  enableFullScreenToggle = true,
+  enableGlobalFilter = true,
+  enableHiding = true,
+  enableMultiRowSelection = true,
+  enablePagination = true,
+  enableSelectAll = true,
+  enableSorting = true,
+  enableStickyHeader = true,
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -406,13 +713,21 @@ export default <D extends {} = {}>({
   positionToolbarAlertBanner = 'top',
   ...rest
 }: MaterialReactTableProps<D>) => (
-  <MaterialReactTableProvider
-    //@ts-ignore
-    defaultColumn={defaultColumn}
-    //@ts-ignore
-    filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
-    //@ts-ignore
-    globalFilter={globalFilter}
+  <MRT_TableRoot
+    autoResetExpanded={autoResetExpanded}
+    enableColumnActions={enableColumnActions}
+    enableColumnFilters={enableColumnFilters}
+    enableDensePaddingToggle={enableDensePaddingToggle}
+    enableExpandAll={enableExpandAll}
+    enableFilters={enableFilters}
+    enableFullScreenToggle={enableFullScreenToggle}
+    enableGlobalFilter={enableGlobalFilter}
+    enableHiding={enableHiding}
+    enableMultiRowSelection={enableMultiRowSelection}
+    enablePagination={enablePagination}
+    enableSelectAll={enableSelectAll}
+    enableSorting={enableSorting}
+    enableStickyHeader={enableStickyHeader}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
@@ -420,7 +735,5 @@ export default <D extends {} = {}>({
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
     {...rest}
-  >
-    <MRT_TableContainer />
-  </MaterialReactTableProvider>
+  />
 );