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

package/src/MaterialReactTable.tsx

@@ -1,10 +1,18 @@
-import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
+import React, {
+  ChangeEvent,
+  Dispatch,
+  FC,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+} from 'react';
 import {
   AlertProps,
   ButtonProps,
   CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
+  PaperProps,
   SkeletonProps,
   TableBodyProps,
   TableCellProps,
@@ -20,237 +28,251 @@ 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';
+} 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>;
-  };
+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_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 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_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 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;
+  getPaginationRowModel: () => MRT_RowModel;
+  getPrePaginationRowModel: () => MRT_RowModel;
+  getRowModel: () => MRT_RowModel;
+  getSelectedRowModel: () => MRT_RowModel;
+  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_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
-  UseFiltersColumnProps<D> &
-  UseGroupByColumnProps<D> &
-  UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> &
+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?: ({
+    header,
+    tableInstance,
+  }: {
+    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;
+  enableColumnFilters?: boolean;
+  enableHiding?: boolean;
+  enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
+  filter?: MRT_FilterType | string | FilterType<D>;
+  filterSelectOptions?: (string | { text: string; value: string })[];
+  footer?: string;
+  header: 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: MRT_ColumnInstance<D>) => TableCellProps);
+  muiTableHeadCellColumnActionsButtonProps?:
+    | IconButtonProps
+    | ((column: MRT_ColumnInstance<D>) => IconButtonProps);
+  muiTableHeadCellFilterTextFieldProps?:
+    | TextFieldProps
+    | ((column: MRT_ColumnInstance<D>) => TextFieldProps);
+  muiTableHeadCellProps?:
+    | TableCellProps
+    | ((column: MRT_ColumnInstance<D>) => TableCellProps);
+  onCellEditChange?: (
+    event: ChangeEvent<HTMLInputElement>,
+    cell: MRT_Cell<D>,
+  ) => void;
+  onFilterChange?: (
+    event: ChangeEvent<HTMLInputElement>,
+    filterValue: any,
+  ) => void;
+};
+
+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;
+    enableColumnPinning?: boolean;
+    enableDensePaddingToggle?: boolean;
+    enableExpandAll?: boolean;
+    enableFullScreenToggle?: boolean;
+    enablePagination?: boolean;
     enableRowActions?: boolean;
+    enableStickyHeader?: boolean;
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
-    enableSelection?: boolean;
+    enableSelectAll?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
@@ -260,7 +282,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isFetching?: boolean;
+    isReloading?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
@@ -289,16 +311,16 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyProps?:
       | TableBodyProps
       | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
-    muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
+    muiTableBodyRowProps?: TableRowProps | ((row: MRT_Row<D>) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
       | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
-      | ((row: Row<D>) => TableCellProps);
+      | ((row: MRT_Row<D>) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+      | ((column: MRT_ColumnInstance<D>) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
       | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
@@ -307,19 +329,22 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
       | IconButtonProps
-      | ((column: Column<D>) => IconButtonProps);
+      | ((column: MRT_ColumnInstance<D>) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
+      | ((column: MRT_ColumnInstance<D>) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+      | ((column: MRT_ColumnInstance<D>) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
       | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
-      | ((row: MRT_HeaderGroup<D>) => TableRowProps);
+      | ((headerGroup: MRT_HeaderGroup<D>) => TableRowProps);
+    muiTablePaperProps?:
+      | PaperProps
+      | ((tableInstance: MRT_TableInstance<D>) => PaperProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
       | ((
@@ -341,36 +366,45 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLTableCellElement>,
       cell: MRT_Cell<D>,
     ) => void;
-    onColumnHide?: (column: Column<D>, hiddenColumns?: string[]) => void;
+    onColumnHide?: (
+      column: MRT_ColumnInstance<D>,
+      hiddenColumns?: string[],
+    ) => void;
     onDetailPanelClick?: (
       event: MouseEvent<HTMLTableCellElement>,
-      row: Row<D>,
+      row: MRT_Row<D>,
     ) => void;
     onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
-    onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
+    onRowClick?: (
+      event: MouseEvent<HTMLTableRowElement>,
+      row: MRT_Row<D>,
+    ) => void;
+    onRowEditSubmit?: (row: MRT_Row<D>) => Promise<void> | void;
     onRowExpandChange?: (
       event: MouseEvent<HTMLButtonElement>,
-      row: Row<D>,
+      row: MRT_Row<D>,
+    ) => void;
+    onSelectAllChange?: (
+      event: ChangeEvent,
+      selectedRows: MRT_Row<D>[],
     ) => void;
-    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     onSelectChange?: (
       event: ChangeEvent,
-      row: Row<D>,
-      selectedRows: Row<D>[],
+      row: MRT_Row<D>,
+      selectedRows: MRT_Row<D>[],
     ) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
-    renderDetailPanel?: (row: Row<D>) => ReactNode;
+    renderDetailPanel?: (row: MRT_Row<D>) => ReactNode;
     renderRowActionMenuItems?: (
-      rowData: Row<D>,
+      rowData: MRT_Row<D>,
       tableInstance: MRT_TableInstance<D>,
       closeMenu: () => void,
     ) => ReactNode[];
     renderRowActions?: (
-      row: Row<D>,
+      row: MRT_Row<D>,
       tableInstance: MRT_TableInstance<D>,
     ) => ReactNode;
     renderToolbarCustomActions?: (
@@ -385,19 +419,38 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
         MRT_ToggleDensePaddingButton,
         MRT_FullScreenToggleButton,
       }: {
-        MRT_ToggleSearchButton: FC<IconButtonProps>;
-        MRT_ToggleFiltersButton: FC<IconButtonProps>;
-        MRT_ShowHideColumnsButton: FC<IconButtonProps>;
-        MRT_ToggleDensePaddingButton: FC<IconButtonProps>;
-        MRT_FullScreenToggleButton: FC<IconButtonProps>;
+        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 },
+export default <D extends Record<string, any> = {}>({
+  enableColumnActions = true,
+  enableColumnFilters = true,
+  enableDensePaddingToggle = true,
+  enableExpandAll = true,
+  enableFullScreenToggle = true,
+  enableGlobalFilter = true,
+  enableHiding = true,
+  enablePagination = true,
+  enableSelectAll = true,
+  enableSorting = true,
+  enableStickyHeader = true,
   filterTypes,
-  globalFilter = MRT_FILTER_TYPE.BEST_MATCH_FIRST,
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -406,13 +459,18 @@ 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
+    enableColumnActions={enableColumnActions}
+    enableColumnFilters={enableColumnFilters}
+    enableDensePaddingToggle={enableDensePaddingToggle}
+    enableExpandAll={enableExpandAll}
+    enableFullScreenToggle={enableFullScreenToggle}
+    enableGlobalFilter={enableGlobalFilter}
+    enableHiding={enableHiding}
+    enablePagination={enablePagination}
+    enableSelectAll={enableSelectAll}
+    enableSorting={enableSorting}
+    enableStickyHeader={enableStickyHeader}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
@@ -420,7 +478,5 @@ export default <D extends {} = {}>({
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
     {...rest}
-  >
-    <MRT_TableContainer />
-  </MaterialReactTableProvider>
+  />
 );