material-react-table 1.8.1 → 1.8.3

package/src/MaterialReactTable.tsx

@@ -70,6 +70,10 @@ export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
  * Most of this file is just TypeScript types
  */
 
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+
+type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+
 export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 
 export type {
@@ -89,8 +93,6 @@ export type {
   VisibilityState as MRT_VisibilityState,
 };
 
-type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
-
 export interface MRT_Localization {
   actions: string;
   and: string;
@@ -189,77 +191,82 @@ export interface MRT_RowModel<TData extends Record<string, any> = {}> {
   rowsById: { [key: string]: MRT_Row<TData> };
 }
 
-export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
-  Table<TData>,
-  | 'getAllColumns'
-  | 'getAllFlatColumns'
-  | 'getAllLeafColumns'
-  | 'getCenterLeafColumns'
-  | 'getColumn'
-  | 'getExpandedRowModel'
-  | 'getFlatHeaders'
-  | 'getLeftLeafColumns'
-  | 'getPaginationRowModel'
-  | 'getPreFilteredRowModel'
-  | 'getPrePaginationRowModel'
-  | 'getRightLeafColumns'
-  | 'getRowModel'
-  | 'getSelectedRowModel'
-  | 'getState'
-  | 'options'
-> & {
-  getAllColumns: () => MRT_Column<TData>[];
-  getAllFlatColumns: () => MRT_Column<TData>[];
-  getAllLeafColumns: () => MRT_Column<TData>[];
-  getCenterLeafColumns: () => MRT_Column<TData>[];
-  getColumn: (columnId: string) => MRT_Column<TData>;
-  getExpandedRowModel: () => MRT_RowModel<TData>;
-  getFlatHeaders: () => MRT_Header<TData>[];
-  getLeftLeafColumns: () => MRT_Column<TData>[];
-  getPaginationRowModel: () => MRT_RowModel<TData>;
-  getPreFilteredRowModel: () => MRT_RowModel<TData>;
-  getPrePaginationRowModel: () => MRT_RowModel<TData>;
-  getRightLeafColumns: () => MRT_Column<TData>[];
-  getRowModel: () => MRT_RowModel<TData>;
-  getSelectedRowModel: () => MRT_RowModel<TData>;
-  getState: () => MRT_TableState<TData>;
-  options: MaterialReactTableProps<TData> & {
-    icons: MRT_Icons;
-    localization: MRT_Localization;
-  };
-  refs: {
-    bottomToolbarRef: MutableRefObject<HTMLDivElement>;
-    editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
-    filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
-    searchInputRef: MutableRefObject<HTMLInputElement>;
-    tableContainerRef: MutableRefObject<HTMLDivElement>;
-    tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
-    tablePaperRef: MutableRefObject<HTMLDivElement>;
-    topToolbarRef: MutableRefObject<HTMLDivElement>;
-  };
-  setColumnFilterFns: Dispatch<
-    SetStateAction<{ [key: string]: MRT_FilterOption }>
-  >;
-  setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
-  setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
-  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
-  setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
-  setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
-  setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setHoveredColumn: Dispatch<
-    SetStateAction<MRT_Column<TData> | { id: string } | null>
-  >;
-  setHoveredRow: Dispatch<
-    SetStateAction<MRT_Row<TData> | { id: string } | null>
+export type MRT_TableInstance<TData extends Record<string, any> = {}> =
+  Prettify<
+    Omit<
+      Table<TData>,
+      | 'getAllColumns'
+      | 'getAllFlatColumns'
+      | 'getAllLeafColumns'
+      | 'getCenterLeafColumns'
+      | 'getColumn'
+      | 'getExpandedRowModel'
+      | 'getFlatHeaders'
+      | 'getLeftLeafColumns'
+      | 'getPaginationRowModel'
+      | 'getPreFilteredRowModel'
+      | 'getPrePaginationRowModel'
+      | 'getRightLeafColumns'
+      | 'getRowModel'
+      | 'getSelectedRowModel'
+      | 'getState'
+      | 'options'
+    > & {
+      getAllColumns: () => MRT_Column<TData>[];
+      getAllFlatColumns: () => MRT_Column<TData>[];
+      getAllLeafColumns: () => MRT_Column<TData>[];
+      getCenterLeafColumns: () => MRT_Column<TData>[];
+      getColumn: (columnId: string) => MRT_Column<TData>;
+      getExpandedRowModel: () => MRT_RowModel<TData>;
+      getFlatHeaders: () => MRT_Header<TData>[];
+      getLeftLeafColumns: () => MRT_Column<TData>[];
+      getPaginationRowModel: () => MRT_RowModel<TData>;
+      getPreFilteredRowModel: () => MRT_RowModel<TData>;
+      getPrePaginationRowModel: () => MRT_RowModel<TData>;
+      getRightLeafColumns: () => MRT_Column<TData>[];
+      getRowModel: () => MRT_RowModel<TData>;
+      getSelectedRowModel: () => MRT_RowModel<TData>;
+      getState: () => MRT_TableState<TData>;
+      options: MaterialReactTableProps<TData> & {
+        icons: MRT_Icons;
+        localization: MRT_Localization;
+      };
+      refs: {
+        bottomToolbarRef: MutableRefObject<HTMLDivElement>;
+        editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        searchInputRef: MutableRefObject<HTMLInputElement>;
+        tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tableHeadCellRefs: MutableRefObject<
+          Record<string, HTMLTableCellElement>
+        >;
+        tablePaperRef: MutableRefObject<HTMLDivElement>;
+        topToolbarRef: MutableRefObject<HTMLDivElement>;
+      };
+      setColumnFilterFns: Dispatch<
+        SetStateAction<{ [key: string]: MRT_FilterOption }>
+      >;
+      setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
+      setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+      setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
+      setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
+      setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
+      setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
+      setHoveredColumn: Dispatch<
+        SetStateAction<MRT_Column<TData> | { id: string } | null>
+      >;
+      setHoveredRow: Dispatch<
+        SetStateAction<MRT_Row<TData> | { id: string } | null>
+      >;
+      setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+      setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
+      setShowFilters: Dispatch<SetStateAction<boolean>>;
+      setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+      setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
+    }
   >;
-  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
-  setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
-  setShowFilters: Dispatch<SetStateAction<boolean>>;
-  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
-  setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
-};
 
-export type MRT_TableState<TData extends Record<string, any> = {}> =
+export type MRT_TableState<TData extends Record<string, any> = {}> = Prettify<
   TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
     density: MRT_DensityState;
@@ -278,437 +285,135 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     showProgressBars: boolean;
     showSkeletons: boolean;
     showToolbarDropZone: boolean;
-  };
-
-export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
-  ColumnDef<TData, unknown>,
-  | 'accessorKey'
-  | 'aggregatedCell'
-  | 'aggregationFn'
-  | 'cell'
-  | 'columns'
-  | 'filterFn'
-  | 'footer'
-  | 'header'
-  | 'id'
-  | 'sortingFn'
-> & {
-  AggregatedCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Cell?: (props: {
-    cell: MRT_Cell<TData>;
-    renderedCellValue: number | string | ReactNode;
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Edit?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Filter?: (props: {
-    column: MRT_Column<TData>;
-    header: MRT_Header<TData>;
-    rangeFilterIndex?: number;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Footer?:
-    | ReactNode
-    | ((props: {
-        column: MRT_Column<TData>;
-        footer: MRT_Header<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => ReactNode);
-  GroupedCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Header?:
-    | ReactNode
-    | ((props: {
-        column: MRT_Column<TData>;
-        header: MRT_Header<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => ReactNode);
-  PlaceholderCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify a function here to point to the correct property in the data object.
-   *
-   * @example accessorFn: (row) => row.username
-   */
-  accessorFn?: (originalRow: TData) => any;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify which key in the row this column should use to access the correct data.
-   * Also supports Deep Key Dot Notation.
-   *
-   * @example accessorKey: 'username' //simple
-   * @example accessorKey: 'name.firstName' //deep key dot notation
-   */
-  accessorKey?: DeepKeys<TData>;
-  aggregationFn?: MRT_AggregationFn<TData> | Array<MRT_AggregationFn<TData>>;
-  /**
-   * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
-   * Leave this blank if you are just creating a normal data column.
-   *
-   * @default 'data'
-   *
-   * @example columnDefType: 'display'
-   */
-  columnDefType?: 'data' | 'display' | 'group';
-  columnFilterModeOptions?: Array<
-    LiteralUnion<string & MRT_FilterOption>
-  > | null;
-  columns?: MRT_ColumnDef<TData>[];
-  editSelectOptions?: (string | { text: string; value: any })[];
-  editVariant?: 'text' | 'select';
-  enableClickToCopy?: boolean;
-  enableColumnActions?: boolean;
-  enableColumnDragging?: boolean;
-  enableColumnFilterModes?: boolean;
-  enableColumnOrdering?: boolean;
-  enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
-  enableFilterMatchHighlighting?: boolean;
-  filterFn?: MRT_FilterFn<TData>;
-  filterSelectOptions?: (string | { text: string; value: any })[];
-  filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
-  /**
-   * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
-   */
-  footer?: string;
-  /**
-   * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
-   */
-  header: string;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   *
-   * If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
-   *
-   * `id` defaults to the `accessorKey` or `header` if not specified.
-   *
-   * @default gets set to the same value as `accessorKey` by default
-   */
-  id?: LiteralUnion<string & keyof TData>;
-  muiTableBodyCellCopyButtonProps?:
-    | ButtonProps
-    | ((props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
-        row: MRT_Row<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => ButtonProps);
-  muiTableBodyCellEditTextFieldProps?:
-    | TextFieldProps
-    | ((props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
-        row: MRT_Row<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => TextFieldProps);
-  muiTableBodyCellProps?:
-    | TableCellProps
-    | ((props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
-        row: MRT_Row<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => TableCellProps);
-  muiTableFooterCellProps?:
-    | TableCellProps
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-        column: MRT_Column<TData>;
-      }) => TableCellProps);
-  muiTableHeadCellColumnActionsButtonProps?:
-    | IconButtonProps
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-        column: MRT_Column<TData>;
-      }) => IconButtonProps);
-  muiTableHeadCellDragHandleProps?:
-    | IconButtonProps
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-        column: MRT_Column<TData>;
-      }) => IconButtonProps);
-  muiTableHeadCellFilterCheckboxProps?:
-    | CheckboxProps
-    | ((props: {
-        column: MRT_Column<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => CheckboxProps);
-  muiTableHeadCellFilterTextFieldProps?:
-    | TextFieldProps
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-        column: MRT_Column<TData>;
-        rangeFilterIndex?: number;
-      }) => TextFieldProps);
-  muiTableHeadCellProps?:
-    | TableCellProps
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-        column: MRT_Column<TData>;
-      }) => TableCellProps);
-  renderColumnActionsMenuItems?: (props: {
-    closeMenu: () => void;
-    column: MRT_Column<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode[];
-  renderColumnFilterModeMenuItems?: (props: {
-    column: MRT_Column<TData>;
-    internalFilterOptions: MRT_InternalFilterOption[];
-    onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode[];
-  sortingFn?: MRT_SortingFn<TData>;
-};
-
-export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
-  MRT_ColumnDef<TData>,
-  'id' | 'defaultDisplayColumn'
-> & {
-  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
-  id: string;
-  _filterFn: MRT_FilterOption;
-};
-
-export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
-  Column<TData, unknown>,
-  'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
-> & {
-  columnDef: MRT_DefinedColumnDef<TData>;
-  columns?: MRT_Column<TData>[];
-  filterFn?: MRT_FilterFn<TData>;
-  footer: string;
-  header: string;
-};
-
-export type MRT_Header<TData extends Record<string, any> = {}> = Omit<
-  Header<TData, unknown>,
-  'column'
-> & {
-  column: MRT_Column<TData>;
-};
-
-export type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<
-  HeaderGroup<TData>,
-  'headers'
-> & {
-  headers: MRT_Header<TData>[];
-};
-
-export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
-  Row<TData>,
-  'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'
-> & {
-  getAllCells: () => MRT_Cell<TData>[];
-  getVisibleCells: () => MRT_Cell<TData>[];
-  subRows?: MRT_Row<TData>[];
-  _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
-};
-
-export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
-  Cell<TData, unknown>,
-  'column' | 'row'
-> & {
-  column: MRT_Column<TData>;
-  row: MRT_Row<TData>;
-};
-
-export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
-
-export type MRT_AggregationFn<TData extends Record<string, any> = {}> =
-  | AggregationFn<TData>
-  | MRT_AggregationOption;
-
-export type MRT_SortingOption = LiteralUnion<
-  string & keyof typeof MRT_SortingFns
->;
-
-export type MRT_SortingFn<TData extends Record<string, any> = {}> =
-  | SortingFn<TData>
-  | MRT_SortingOption;
-
-export type MRT_FilterOption = LiteralUnion<
-  string & keyof typeof MRT_FilterFns
+  }
 >;
 
-export type MRT_FilterFn<TData extends Record<string, any> = {}> =
-  | FilterFn<TData>
-  | MRT_FilterOption;
-
-export type MRT_InternalFilterOption = {
-  option: string;
-  symbol: string;
-  label: string;
-  divider: boolean;
-};
-
-export type MRT_DisplayColumnIds =
-  | 'mrt-row-actions'
-  | 'mrt-row-drag'
-  | 'mrt-row-expand'
-  | 'mrt-row-numbers'
-  | 'mrt-row-select';
-
-/**
- * `columns` and `data` props are the only required props, but there are over 150 other optional props.
- *
- * See more info on creating columns and data on the official docs site:
- * @link https://www.material-react-table.com/docs/getting-started/usage
- *
- * See the full props list on the official docs site:
- * @link https://www.material-react-table.com/docs/api/props
- */
-export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
+export type MRT_ColumnDef<TData extends Record<string, any> = {}> =
+  // Prettify<
   Omit<
-    Partial<TableOptions<TData>>,
+    ColumnDef<TData, unknown>,
+    | 'accessorKey'
+    | 'aggregatedCell'
+    | 'aggregationFn'
+    | 'cell'
     | 'columns'
-    | 'data'
-    | 'defaultColumn'
-    | 'enableRowSelection'
-    | 'expandRowsFn'
-    | 'getRowId'
-    | 'globalFilterFn'
-    | 'initialState'
-    | 'onStateChange'
-    | 'state'
+    | 'filterFn'
+    | 'footer'
+    | 'header'
+    | 'id'
+    | 'sortingFn'
   > & {
-    columnFilterModeOptions?: Array<
-      LiteralUnion<string & MRT_FilterOption>
-    > | null;
+    AggregatedCell?: (props: {
+      cell: MRT_Cell<TData>;
+      column: MRT_Column<TData>;
+      row: MRT_Row<TData>;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
+    Cell?: (props: {
+      cell: MRT_Cell<TData>;
+      renderedCellValue: number | string | ReactNode;
+      column: MRT_Column<TData>;
+      row: MRT_Row<TData>;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
+    Edit?: (props: {
+      cell: MRT_Cell<TData>;
+      column: MRT_Column<TData>;
+      row: MRT_Row<TData>;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
+    Filter?: (props: {
+      column: MRT_Column<TData>;
+      header: MRT_Header<TData>;
+      rangeFilterIndex?: number;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
+    Footer?:
+      | ReactNode
+      | ((props: {
+          column: MRT_Column<TData>;
+          footer: MRT_Header<TData>;
+          table: MRT_TableInstance<TData>;
+        }) => ReactNode);
+    GroupedCell?: (props: {
+      cell: MRT_Cell<TData>;
+      column: MRT_Column<TData>;
+      row: MRT_Row<TData>;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
+    Header?:
+      | ReactNode
+      | ((props: {
+          column: MRT_Column<TData>;
+          header: MRT_Header<TData>;
+          table: MRT_TableInstance<TData>;
+        }) => ReactNode);
+    PlaceholderCell?: (props: {
+      cell: MRT_Cell<TData>;
+      column: MRT_Column<TData>;
+      row: MRT_Row<TData>;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     /**
-     * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
-     *
-     * See more info on creating columns on the official docs site:
-     * @link https://www.material-react-table.com/docs/guides/data-columns
-     * @link https://www.material-react-table.com/docs/guides/display-columns
+     * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+     * Specify a function here to point to the correct property in the data object.
      *
-     * See all Columns Options on the official docs site:
-     * @link https://www.material-react-table.com/docs/api/column-options
+     * @example accessorFn: (row) => row.username
      */
-    columns: MRT_ColumnDef<TData>[];
+    accessorFn?: (originalRow: TData) => any;
     /**
-     * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
+     * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+     * Specify which key in the row this column should use to access the correct data.
+     * Also supports Deep Key Dot Notation.
      *
-     * See the usage guide for more info on creating columns and data:
-     * @link https://www.material-react-table.com/docs/getting-started/usage
+     * @example accessorKey: 'username' //simple
+     * @example accessorKey: 'name.firstName' //deep key dot notation
      */
-    data: TData[];
+    accessorKey?: DeepKeys<TData>;
+    aggregationFn?: MRT_AggregationFn<TData> | Array<MRT_AggregationFn<TData>>;
     /**
-     * Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` prop to change a default option for all columns.
-     */
-    defaultColumn?: Partial<MRT_ColumnDef<TData>>;
-    /**
-     * Change the default options for display columns.
+     * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
+     * Leave this blank if you are just creating a normal data column.
+     *
+     * @default 'data'
+     *
+     * @example columnDefType: 'display'
      */
-    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
-    displayColumnDefOptions?: Partial<{
-      [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
-    }>;
-    editingMode?: 'table' | 'modal' | 'row' | 'cell';
-    enableBottomToolbar?: boolean;
+    columnDefType?: 'data' | 'display' | 'group';
+    columnFilterModeOptions?: Array<
+      LiteralUnion<string & MRT_FilterOption>
+    > | null;
+    columns?: MRT_ColumnDef<TData>[];
+    editSelectOptions?: (string | { text: string; value: any })[];
+    editVariant?: 'text' | 'select';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
     enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
-    enableColumnVirtualization?: boolean;
-    enableDensityToggle?: boolean;
     enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
-    enableExpandAll?: boolean;
     enableFilterMatchHighlighting?: boolean;
-    enableFullScreenToggle?: boolean;
-    enableGlobalFilterModes?: boolean;
-    enableGlobalFilterRankedResults?: boolean;
-    enablePagination?: boolean;
-    enableRowActions?: boolean;
-    enableRowDragging?: boolean;
-    enableRowNumbers?: boolean;
-    enableRowOrdering?: boolean;
-    enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
-    enableRowVirtualization?: boolean;
-    enableSelectAll?: boolean;
-    enableStickyFooter?: boolean;
-    enableStickyHeader?: boolean;
-    enableTableFooter?: boolean;
-    enableTableHead?: boolean;
-    enableToolbarInternalActions?: boolean;
-    enableTopToolbar?: boolean;
-    expandRowsFn?: (dataRow: TData) => TData[];
-    getRowId?: (
-      originalRow: TData,
-      index: number,
-      parentRow: MRT_Row<TData>,
-    ) => string;
-    globalFilterFn?: MRT_FilterOption;
-    globalFilterModeOptions?: MRT_FilterOption[] | null;
-    icons?: Partial<MRT_Icons>;
-    initialState?: Partial<MRT_TableState<TData>>;
+    filterFn?: MRT_FilterFn<TData>;
+    filterSelectOptions?: (string | { text: string; value: any })[];
+    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
     /**
-     * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
+     * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
-    layoutMode?: 'semantic' | 'grid';
+    footer?: string;
     /**
-     * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
-     *
-     * See the localization (i18n) guide for more info:
-     * @link https://www.material-react-table.com/docs/guides/localization
+     * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
      */
-    localization?: Partial<MRT_Localization>;
+    header: string;
     /**
-     * Memoize cells, rows, or the entire table body to potentially improve render performance.
+     * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+     *
+     * If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
+     *
+     * `id` defaults to the `accessorKey` or `header` if not specified.
      *
-     * @warning This will break some dynamic rendering features. See the memoization guide for more info:
-     * @link https://www.material-react-table.com/docs/guides/memoize-components
+     * @default gets set to the same value as `accessorKey` by default
      */
-    memoMode?: 'cells' | 'rows' | 'table-body';
-    muiBottomToolbarProps?:
-      | ToolbarProps
-      | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    muiExpandAllButtonProps?:
-      | IconButtonProps
-      | ((props: { table: MRT_TableInstance<TData> }) => IconButtonProps);
-    muiExpandButtonProps?:
-      | IconButtonProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          row: MRT_Row<TData>;
-        }) => IconButtonProps);
-    muiLinearProgressProps?:
-      | LinearProgressProps
-      | ((props: {
-          isTopToolbar: boolean;
-          table: MRT_TableInstance<TData>;
-        }) => LinearProgressProps);
-    muiSearchTextFieldProps?:
-      | TextFieldProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TextFieldProps);
-    muiSelectAllCheckboxProps?:
-      | CheckboxProps
-      | ((props: { table: MRT_TableInstance<TData> }) => CheckboxProps);
-    muiSelectCheckboxProps?:
-      | (CheckboxProps | RadioProps)
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          row: MRT_Row<TData>;
-        }) => CheckboxProps | RadioProps);
+    id?: LiteralUnion<string & keyof TData>;
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
       | ((props: {
@@ -733,54 +438,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           row: MRT_Row<TData>;
           table: MRT_TableInstance<TData>;
         }) => TableCellProps);
-    muiTableBodyCellSkeletonProps?:
-      | SkeletonProps
-      | ((props: {
-          cell: MRT_Cell<TData>;
-          column: MRT_Column<TData>;
-          row: MRT_Row<TData>;
-          table: MRT_TableInstance<TData>;
-        }) => SkeletonProps);
-    muiTableBodyProps?:
-      | TableBodyProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TableBodyProps);
-    muiTableBodyRowDragHandleProps?:
-      | IconButtonProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          row: MRT_Row<TData>;
-        }) => IconButtonProps);
-    muiTableBodyRowProps?:
-      | TableRowProps
-      | ((props: {
-          isDetailPanel?: boolean;
-          row: MRT_Row<TData>;
-          table: MRT_TableInstance<TData>;
-        }) => TableRowProps);
-    muiTableContainerProps?:
-      | TableContainerProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps);
-    muiTableDetailPanelProps?:
-      | TableCellProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          row: MRT_Row<TData>;
-        }) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
       | ((props: {
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
         }) => TableCellProps);
-    muiTableFooterProps?:
-      | TableFooterProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TableFooterProps);
-    muiTableFooterRowProps?:
-      | TableRowProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          footerGroup: MRT_HeaderGroup<TData>;
-        }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
       | IconButtonProps
       | ((props: {
@@ -812,74 +475,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
         }) => TableCellProps);
-    muiTableHeadProps?:
-      | TableHeadProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TableHeadProps);
-    muiTableHeadRowProps?:
-      | TableRowProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          headerGroup: MRT_HeaderGroup<TData>;
-        }) => TableRowProps);
-    muiTablePaginationProps?:
-      | Partial<TablePaginationProps>
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-        }) => Partial<TablePaginationProps>);
-    muiTablePaperProps?:
-      | PaperProps
-      | ((props: { table: MRT_TableInstance<TData> }) => PaperProps);
-    muiTableProps?:
-      | TableProps
-      | ((props: { table: MRT_TableInstance<TData> }) => TableProps);
-    muiToolbarAlertBannerChipProps?:
-      | ChipProps
-      | ((props: { table: MRT_TableInstance<TData> }) => ChipProps);
-    muiToolbarAlertBannerProps?:
-      | AlertProps
-      | ((props: { table: MRT_TableInstance<TData> }) => AlertProps);
-    muiTopToolbarProps?:
-      | ToolbarProps
-      | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    onDensityChange?: OnChangeFn<MRT_DensityState>;
-    onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
-    onEditingRowCancel?: (props: {
-      row: MRT_Row<TData>;
-      table: MRT_TableInstance<TData>;
-    }) => void;
-    onEditingRowSave?: (props: {
-      exitEditingMode: () => void;
-      row: MRT_Row<TData>;
-      table: MRT_TableInstance<TData>;
-      values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
-    }) => Promise<void> | void;
-    onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
-    onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onIsFullScreenChange?: OnChangeFn<boolean>;
-    onShowAlertBannerChange?: OnChangeFn<boolean>;
-    onShowFiltersChange?: OnChangeFn<boolean>;
-    onShowGlobalFilterChange?: OnChangeFn<boolean>;
-    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
-    positionActionsColumn?: 'first' | 'last';
-    positionExpandColumn?: 'first' | 'last';
-    positionGlobalFilter?: 'left' | 'right' | 'none';
-    positionPagination?: 'bottom' | 'top' | 'both' | 'none';
-    positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
-    positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
-    renderBottomToolbar?:
-      | ReactNode
-      | ((props: { table: MRT_TableInstance<TData> }) => ReactNode);
-    renderBottomToolbarCustomActions?: (props: {
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderColumnActionsMenuItems?: (props: {
-      column: MRT_Column<TData>;
       closeMenu: () => void;
+      column: MRT_Column<TData>;
       table: MRT_TableInstance<TData>;
     }) => ReactNode[];
     renderColumnFilterModeMenuItems?: (props: {
@@ -888,38 +486,480 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
       table: MRT_TableInstance<TData>;
     }) => ReactNode[];
-    renderDetailPanel?: (props: {
-      row: MRT_Row<TData>;
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
-    renderGlobalFilterModeMenuItems?: (props: {
-      internalFilterOptions: MRT_InternalFilterOption[];
-      onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode[];
-    renderRowActionMenuItems?: (props: {
-      closeMenu: () => void;
-      row: MRT_Row<TData>;
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode[];
-    renderRowActions?: (props: {
-      cell: MRT_Cell<TData>;
-      row: MRT_Row<TData>;
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
-    renderToolbarInternalActions?: (props: {
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
-    renderTopToolbar?:
-      | ReactNode
-      | ((props: { table: MRT_TableInstance<TData> }) => ReactNode);
-    renderTopToolbarCustomActions?: (props: {
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
-    rowCount?: number;
-    rowNumberMode?: 'original' | 'static';
-    selectAllMode?: 'all' | 'page';
-    state?: Partial<MRT_TableState<TData>>;
+    sortingFn?: MRT_SortingFn<TData>;
+  };
+// >
+
+export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> =
+  // Prettify<
+  Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+    id: string;
+    _filterFn: MRT_FilterOption;
+  };
+// >
+
+export type MRT_Column<TData extends Record<string, any> = {}> =
+  // Prettify<
+  Omit<
+    Column<TData, unknown>,
+    'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
+  > & {
+    columnDef: MRT_DefinedColumnDef<TData>;
+    columns?: MRT_Column<TData>[];
+    filterFn?: MRT_FilterFn<TData>;
+    footer: string;
+    header: string;
+  };
+// >;
+
+export type MRT_Header<TData extends Record<string, any> = {}> = Prettify<
+  Omit<Header<TData, unknown>, 'column'> & {
+    column: MRT_Column<TData>;
+  }
+>;
+
+export type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Prettify<
+  Omit<HeaderGroup<TData>, 'headers'> & {
+    headers: MRT_Header<TData>[];
+  }
+>;
+
+export type MRT_Row<TData extends Record<string, any> = {}> = Prettify<
+  Omit<
+    Row<TData>,
+    'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'
+  > & {
+    getAllCells: () => MRT_Cell<TData>[];
+    getVisibleCells: () => MRT_Cell<TData>[];
+    subRows?: MRT_Row<TData>[];
+    _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
+  }
+>;
+
+export type MRT_Cell<TData extends Record<string, any> = {}> = Prettify<
+  Omit<Cell<TData, unknown>, 'column' | 'row'> & {
+    column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
+  }
+>;
+
+export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
+
+export type MRT_AggregationFn<TData extends Record<string, any> = {}> =
+  | AggregationFn<TData>
+  | MRT_AggregationOption;
+
+export type MRT_SortingOption = LiteralUnion<
+  string & keyof typeof MRT_SortingFns
+>;
+
+export type MRT_SortingFn<TData extends Record<string, any> = {}> =
+  | SortingFn<TData>
+  | MRT_SortingOption;
+
+export type MRT_FilterOption = LiteralUnion<
+  string & keyof typeof MRT_FilterFns
+>;
+
+export type MRT_FilterFn<TData extends Record<string, any> = {}> =
+  | FilterFn<TData>
+  | MRT_FilterOption;
+
+export type MRT_InternalFilterOption = {
+  option: string;
+  symbol: string;
+  label: string;
+  divider: boolean;
+};
+
+export type MRT_DisplayColumnIds =
+  | 'mrt-row-actions'
+  | 'mrt-row-drag'
+  | 'mrt-row-expand'
+  | 'mrt-row-numbers'
+  | 'mrt-row-select';
+
+export type MRT_CreateTableFeature<
+  TData extends Record<string, any> = {},
+  TFeature = any,
+> = (table: MRT_TableInstance<TData>) => TFeature;
+
+/**
+ * `columns` and `data` props are the only required props, but there are over 170 other optional props.
+ *
+ * See more info on creating columns and data on the official docs site:
+ * @link https://www.material-react-table.com/docs/getting-started/usage
+ *
+ * See the full props list on the official docs site:
+ * @link https://www.material-react-table.com/docs/api/props
+ */
+export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
+  Prettify<
+    Omit<
+      Partial<TableOptions<TData>>,
+      | 'columns'
+      | 'data'
+      | 'defaultColumn'
+      | 'enableRowSelection'
+      | 'expandRowsFn'
+      | 'getRowId'
+      | 'globalFilterFn'
+      | 'initialState'
+      | 'onStateChange'
+      | 'state'
+    > & {
+      columnFilterModeOptions?: Array<
+        LiteralUnion<string & MRT_FilterOption>
+      > | null;
+      /**
+       * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
+       *
+       * See more info on creating columns on the official docs site:
+       * @link https://www.material-react-table.com/docs/guides/data-columns
+       * @link https://www.material-react-table.com/docs/guides/display-columns
+       *
+       * See all Columns Options on the official docs site:
+       * @link https://www.material-react-table.com/docs/api/column-options
+       */
+      columns: MRT_ColumnDef<TData>[];
+      /**
+       * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
+       *
+       * See the usage guide for more info on creating columns and data:
+       * @link https://www.material-react-table.com/docs/getting-started/usage
+       */
+      data: TData[];
+      /**
+       * Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` prop to change a default option for all columns.
+       */
+      defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+      /**
+       * Change the default options for display columns.
+       */
+      defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
+      displayColumnDefOptions?: Partial<{
+        [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+      }>;
+      editingMode?: 'table' | 'modal' | 'row' | 'cell';
+      enableBottomToolbar?: boolean;
+      enableClickToCopy?: boolean;
+      enableColumnActions?: boolean;
+      enableColumnDragging?: boolean;
+      enableColumnFilterModes?: boolean;
+      enableColumnOrdering?: boolean;
+      enableColumnVirtualization?: boolean;
+      enableDensityToggle?: boolean;
+      enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
+      enableExpandAll?: boolean;
+      enableFilterMatchHighlighting?: boolean;
+      enableFullScreenToggle?: boolean;
+      enableGlobalFilterModes?: boolean;
+      enableGlobalFilterRankedResults?: boolean;
+      enablePagination?: boolean;
+      enableRowActions?: boolean;
+      enableRowDragging?: boolean;
+      enableRowNumbers?: boolean;
+      enableRowOrdering?: boolean;
+      enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
+      enableRowVirtualization?: boolean;
+      enableSelectAll?: boolean;
+      enableStickyFooter?: boolean;
+      enableStickyHeader?: boolean;
+      enableTableFooter?: boolean;
+      enableTableHead?: boolean;
+      enableToolbarInternalActions?: boolean;
+      enableTopToolbar?: boolean;
+      expandRowsFn?: (dataRow: TData) => TData[];
+      getRowId?: (
+        originalRow: TData,
+        index: number,
+        parentRow: MRT_Row<TData>,
+      ) => string;
+      globalFilterFn?: MRT_FilterOption;
+      globalFilterModeOptions?: MRT_FilterOption[] | null;
+      icons?: Partial<MRT_Icons>;
+      initialState?: Partial<MRT_TableState<TData>>;
+      /**
+       * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
+       */
+      layoutMode?: 'semantic' | 'grid';
+      /**
+       * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
+       *
+       * See the localization (i18n) guide for more info:
+       * @link https://www.material-react-table.com/docs/guides/localization
+       */
+      localization?: Partial<MRT_Localization>;
+      /**
+       * Memoize cells, rows, or the entire table body to potentially improve render performance.
+       *
+       * @warning This will break some dynamic rendering features. See the memoization guide for more info:
+       * @link https://www.material-react-table.com/docs/guides/memoize-components
+       */
+      memoMode?: 'cells' | 'rows' | 'table-body';
+      muiBottomToolbarProps?:
+        | ToolbarProps
+        | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
+      muiExpandAllButtonProps?:
+        | IconButtonProps
+        | ((props: { table: MRT_TableInstance<TData> }) => IconButtonProps);
+      muiExpandButtonProps?:
+        | IconButtonProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            row: MRT_Row<TData>;
+          }) => IconButtonProps);
+      muiLinearProgressProps?:
+        | LinearProgressProps
+        | ((props: {
+            isTopToolbar: boolean;
+            table: MRT_TableInstance<TData>;
+          }) => LinearProgressProps);
+      muiSearchTextFieldProps?:
+        | TextFieldProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TextFieldProps);
+      muiSelectAllCheckboxProps?:
+        | CheckboxProps
+        | ((props: { table: MRT_TableInstance<TData> }) => CheckboxProps);
+      muiSelectCheckboxProps?:
+        | (CheckboxProps | RadioProps)
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            row: MRT_Row<TData>;
+          }) => CheckboxProps | RadioProps);
+      muiTableBodyCellCopyButtonProps?:
+        | ButtonProps
+        | ((props: {
+            cell: MRT_Cell<TData>;
+            column: MRT_Column<TData>;
+            row: MRT_Row<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => ButtonProps);
+      muiTableBodyCellEditTextFieldProps?:
+        | TextFieldProps
+        | ((props: {
+            cell: MRT_Cell<TData>;
+            column: MRT_Column<TData>;
+            row: MRT_Row<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => TextFieldProps);
+      muiTableBodyCellProps?:
+        | TableCellProps
+        | ((props: {
+            cell: MRT_Cell<TData>;
+            column: MRT_Column<TData>;
+            row: MRT_Row<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => TableCellProps);
+      muiTableBodyCellSkeletonProps?:
+        | SkeletonProps
+        | ((props: {
+            cell: MRT_Cell<TData>;
+            column: MRT_Column<TData>;
+            row: MRT_Row<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => SkeletonProps);
+      muiTableBodyProps?:
+        | TableBodyProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TableBodyProps);
+      muiTableBodyRowDragHandleProps?:
+        | IconButtonProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            row: MRT_Row<TData>;
+          }) => IconButtonProps);
+      muiTableBodyRowProps?:
+        | TableRowProps
+        | ((props: {
+            isDetailPanel?: boolean;
+            row: MRT_Row<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => TableRowProps);
+      muiTableContainerProps?:
+        | TableContainerProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps);
+      muiTableDetailPanelProps?:
+        | TableCellProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            row: MRT_Row<TData>;
+          }) => TableCellProps);
+      muiTableFooterCellProps?:
+        | TableCellProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+          }) => TableCellProps);
+      muiTableFooterProps?:
+        | TableFooterProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TableFooterProps);
+      muiTableFooterRowProps?:
+        | TableRowProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            footerGroup: MRT_HeaderGroup<TData>;
+          }) => TableRowProps);
+      muiTableHeadCellColumnActionsButtonProps?:
+        | IconButtonProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+          }) => IconButtonProps);
+      muiTableHeadCellDragHandleProps?:
+        | IconButtonProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+          }) => IconButtonProps);
+      muiTableHeadCellFilterCheckboxProps?:
+        | CheckboxProps
+        | ((props: {
+            column: MRT_Column<TData>;
+            table: MRT_TableInstance<TData>;
+          }) => CheckboxProps);
+      muiTableHeadCellFilterTextFieldProps?:
+        | TextFieldProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+            rangeFilterIndex?: number;
+          }) => TextFieldProps);
+      muiTableHeadCellProps?:
+        | TableCellProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+          }) => TableCellProps);
+      muiTableHeadProps?:
+        | TableHeadProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TableHeadProps);
+      muiTableHeadRowProps?:
+        | TableRowProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            headerGroup: MRT_HeaderGroup<TData>;
+          }) => TableRowProps);
+      muiTablePaginationProps?:
+        | Partial<TablePaginationProps>
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+          }) => Partial<TablePaginationProps>);
+      muiTablePaperProps?:
+        | PaperProps
+        | ((props: { table: MRT_TableInstance<TData> }) => PaperProps);
+      muiTableProps?:
+        | TableProps
+        | ((props: { table: MRT_TableInstance<TData> }) => TableProps);
+      muiToolbarAlertBannerChipProps?:
+        | ChipProps
+        | ((props: { table: MRT_TableInstance<TData> }) => ChipProps);
+      muiToolbarAlertBannerProps?:
+        | AlertProps
+        | ((props: { table: MRT_TableInstance<TData> }) => AlertProps);
+      muiTopToolbarProps?:
+        | ToolbarProps
+        | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
+      onDensityChange?: OnChangeFn<MRT_DensityState>;
+      onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+      onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+      onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+      onEditingRowCancel?: (props: {
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => void;
+      onEditingRowSave?: (props: {
+        exitEditingMode: () => void;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+        values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
+      }) => Promise<void> | void;
+      onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+      onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
+      onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+      onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+      onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+      onIsFullScreenChange?: OnChangeFn<boolean>;
+      onShowAlertBannerChange?: OnChangeFn<boolean>;
+      onShowFiltersChange?: OnChangeFn<boolean>;
+      onShowGlobalFilterChange?: OnChangeFn<boolean>;
+      onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
+      positionActionsColumn?: 'first' | 'last';
+      positionExpandColumn?: 'first' | 'last';
+      positionGlobalFilter?: 'left' | 'right' | 'none';
+      positionPagination?: 'bottom' | 'top' | 'both' | 'none';
+      positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
+      positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+      renderBottomToolbar?:
+        | ReactNode
+        | ((props: { table: MRT_TableInstance<TData> }) => ReactNode);
+      renderBottomToolbarCustomActions?: (props: {
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
+      renderColumnActionsMenuItems?: (props: {
+        column: MRT_Column<TData>;
+        closeMenu: () => void;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode[];
+      renderColumnFilterModeMenuItems?: (props: {
+        column: MRT_Column<TData>;
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode[];
+      renderDetailPanel?: (props: {
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
+      renderGlobalFilterModeMenuItems?: (props: {
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode[];
+      renderRowActionMenuItems?: (props: {
+        closeMenu: () => void;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode[];
+      renderRowActions?: (props: {
+        cell: MRT_Cell<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
+      renderToolbarInternalActions?: (props: {
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
+      renderTopToolbar?:
+        | ReactNode
+        | ((props: { table: MRT_TableInstance<TData> }) => ReactNode);
+      renderTopToolbarCustomActions?: (props: {
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
+      rowCount?: number;
+      rowNumberMode?: 'original' | 'static';
+      selectAllMode?: 'all' | 'page';
+      /**
+       * Manage state externally any way you want, then pass it back into MRT.
+       */
+      state?: Partial<MRT_TableState<TData>>;
+      /**
+       * Sequence of features important any dependent feature must be defined first
+       */
+      tableFeatures?: Array<MRT_CreateTableFeature<TData>>;
+      /**
+       * Get access to the table instance via a ref to read state or call built-in methods
+       */
+      tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
+      /**
+       * @deprecated Use `rowVirtualizerInstanceRef` instead
+       */
+      virtualizerInstanceRef?: any;
+      /**
+       * @deprecated Use `rowVirtualizerProps` instead
+       */
+      virtualizerProps?: any;
+    }
+  > & {
     columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
       HTMLDivElement,
       HTMLTableCellElement
@@ -940,15 +980,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       | ((props: {
           table: MRT_TableInstance<TData>;
         }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
-    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
-    /**
-     * @deprecated Use `rowVirtualizerInstanceRef` instead
-     */
-    virtualizerInstanceRef?: any;
-    /**
-     * @deprecated Use `rowVirtualizerProps` instead
-     */
-    virtualizerProps?: any;
   };
 
 const MaterialReactTable = <TData extends Record<string, any> = {}>({