material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/types.ts

@@ -2,18 +2,20 @@ import {
   type Dispatch,
   type MutableRefObject,
   type ReactNode,
+  type RefObject,
   type SetStateAction,
 } from 'react';
 import { type AlertProps } from '@mui/material/Alert';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
+import { type DialogProps } from '@mui/material/Dialog';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
 import { type SkeletonProps } from '@mui/material/Skeleton';
-import { type SliderProps } from '@mui/material';
+import { type SliderProps } from '@mui/material/Slider';
 import { type TableBodyProps } from '@mui/material/TableBody';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type TableContainerProps } from '@mui/material/TableContainer';
@@ -63,14 +65,19 @@ import { type MRT_SortingFns } from './sortingFns';
 import { type MRT_Icons } from './icons';
 
 export type { MRT_Icons };
+export type LiteralUnion<T extends U, U = string> =
+  | T
+  | (U & Record<never, never>);
 
-type Prettify<T> = { [K in keyof T]: T[K] } & {};
+export type Prettify<T> = { [K in keyof T]: T[K] } & unknown;
 
-type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export type Xor<A, B> =
+  | Prettify<A & { [k in keyof B]?: never }>
+  | Prettify<B & { [k in keyof A]?: never }>;
 
 export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 
-export type MRT_FilterFnsState = Record<string, MRT_FilterOption>;
+export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
 
 export type {
   ColumnFiltersState as MRT_ColumnFiltersState,
@@ -122,9 +129,10 @@ export interface MRT_Localization {
   filterFuzzy: string;
   filterGreaterThan: string;
   filterGreaterThanOrEqualTo: string;
-  filterInNumberRange: string;
   filterIncludesString: string;
   filterIncludesStringSensitive: string;
+  filteringByColumn: string;
+  filterInNumberRange: string;
   filterLessThan: string;
   filterLessThanOrEqualTo: string;
   filterMode: string;
@@ -132,7 +140,6 @@ export interface MRT_Localization {
   filterNotEquals: string;
   filterStartsWith: string;
   filterWeakEquals: string;
-  filteringByColumn: string;
   goToFirstPage: string;
   goToLastPage: string;
   goToNextPage: string;
@@ -149,6 +156,7 @@ export interface MRT_Localization {
   noResultsFound: string;
   of: string;
   or: string;
+  pin?: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -179,382 +187,386 @@ export interface MRT_Localization {
   ungroupByColumn: string;
   unpin: string;
   unpinAll: string;
-  unsorted: string;
 }
 
-export interface MRT_RowModel<TData extends Record<string, any> = {}> {
+export interface MRT_RowModel<TData extends Record<string, any>> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
   rowsById: { [key: string]: MRT_Row<TData> };
 }
 
-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<MRT_FilterFnsState>>;
-      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>>;
-      setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
-      setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
-      setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
-    }
-  >;
-
-export type MRT_TableState<TData extends Record<string, any> = {}> = Prettify<
-  TableState & {
-    columnFilterFns: MRT_FilterFnsState;
-    density: MRT_DensityState;
-    draggingColumn: MRT_Column<TData> | null;
-    draggingRow: MRT_Row<TData> | null;
-    editingCell: MRT_Cell<TData> | null;
-    editingRow: MRT_Row<TData> | null;
-    globalFilterFn: MRT_FilterOption;
-    hoveredColumn: MRT_Column<TData> | { id: string } | null;
-    hoveredRow: MRT_Row<TData> | { id: string } | null;
-    isFullScreen: boolean;
-    isLoading: boolean;
-    showAlertBanner: boolean;
-    showColumnFilters: boolean;
-    showGlobalFilter: boolean;
-    showProgressBars: boolean;
-    showSkeletons: boolean;
-    showToolbarDropZone: boolean;
-  }
->;
-
-export type MRT_ColumnDef<TData extends Record<string, any> = {}> =
-  // Prettify<
-  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?: (string & {}) | 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?:
-      | 'checkbox'
-      | 'multi-select'
-      | 'range'
-      | 'range-slider'
-      | 'select'
-      | 'text';
-    /**
-     * 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);
-    muiTableHeadCellFilterSliderProps?:
-      | SliderProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          column: MRT_Column<TData>;
-        }) => TextFieldProps);
-    muiTableHeadCellProps?:
-      | TableCellProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          column: MRT_Column<TData>;
-        }) => TableCellProps);
-    renderColumnActionsMenuItems?: (props: {
-      closeMenu: () => void;
-      column: MRT_Column<TData>;
-      internalColumnMenuItems: ReactNode[];
-      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_TableInstance<TData extends Record<string, any>> = Omit<
+  Table<TData>,
+  | 'getAllColumns'
+  | 'getAllFlatColumns'
+  | 'getAllLeafColumns'
+  | 'getBottomRows'
+  | 'getCenterLeafColumns'
+  | 'getCenterRows'
+  | 'getColumn'
+  | 'getExpandedRowModel'
+  | 'getFlatHeaders'
+  | 'getHeaderGroups'
+  | 'getLeftLeafColumns'
+  | 'getPaginationRowModel'
+  | 'getPreFilteredRowModel'
+  | 'getPrePaginationRowModel'
+  | 'getRightLeafColumns'
+  | 'getRowModel'
+  | 'getSelectedRowModel'
+  | 'getState'
+  | 'getTopRows'
+  | 'options'
+> & {
+  getAllColumns: () => MRT_Column<TData>[];
+  getAllFlatColumns: () => MRT_Column<TData>[];
+  getAllLeafColumns: () => MRT_Column<TData>[];
+  getBottomRows: () => MRT_Row<TData>[];
+  getCenterLeafColumns: () => MRT_Column<TData>[];
+  getCenterRows: () => MRT_Row<TData>[];
+  getColumn: (columnId: string) => MRT_Column<TData>;
+  getExpandedRowModel: () => MRT_RowModel<TData>;
+  getFlatHeaders: () => MRT_Header<TData>[];
+  getHeaderGroups: () => MRT_HeaderGroup<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>;
+  getTopRows: () => MRT_Row<TData>[];
+  options: MRT_DefinedTableOptions<TData>;
+  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>;
+    tableHeadRef: MutableRefObject<HTMLTableSectionElement>;
+    tableFooterRef: MutableRefObject<HTMLTableSectionElement>;
   };
-// >
+  setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
+  setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
+  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>>;
+  setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
+  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+  setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
+};
 
-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_DefinedTableOptions<TData extends Record<string, any>> =
+  MRT_TableOptions<TData> & {
+    localization: MRT_Localization;
+    icons: MRT_Icons;
   };
-// >
 
-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_TableState<TData extends Record<string, any>> = TableState & {
+  columnFilterFns: MRT_ColumnFilterFnsState;
+  creatingRow: MRT_Row<TData> | null;
+  density: MRT_DensityState;
+  draggingColumn: MRT_Column<TData> | null;
+  draggingRow: MRT_Row<TData> | null;
+  editingCell: MRT_Cell<TData> | null;
+  editingRow: MRT_Row<TData> | null;
+  globalFilterFn: MRT_FilterOption;
+  hoveredColumn: MRT_Column<TData> | { id: string } | null;
+  hoveredRow: MRT_Row<TData> | { id: string } | null;
+  isFullScreen: boolean;
+  isLoading: boolean;
+  isSaving: boolean;
+  showAlertBanner: boolean;
+  showColumnFilters: boolean;
+  showGlobalFilter: boolean;
+  showProgressBars: boolean;
+  showSkeletons: boolean;
+  showToolbarDropZone: boolean;
+};
 
-export type MRT_Header<TData extends Record<string, any> = {}> = Prettify<
-  Omit<Header<TData, unknown>, 'column'> & {
+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>;
+    rowRef?: RefObject<HTMLTableRowElement>;
+    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?: (string & {}) | 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?:
+    | 'checkbox'
+    | 'multi-select'
+    | 'range'
+    | 'range-slider'
+    | 'select'
+    | 'text';
+  /**
+   * 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>;
+  muiCopyButtonProps?:
+    | ButtonProps
+    | ((props: {
+        cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ButtonProps);
+  muiEditTextFieldProps?:
+    | 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);
+  muiColumnActionsButtonProps?:
+    | IconButtonProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => IconButtonProps);
+  muiColumnDragHandleProps?:
+    | IconButtonProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => IconButtonProps);
+  muiFilterCheckboxProps?:
+    | CheckboxProps
+    | ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => CheckboxProps);
+  muiFilterTextFieldProps?:
+    | TextFieldProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+      }) => TextFieldProps);
+  muiFilterSliderProps?:
+    | SliderProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => SliderProps);
+  muiTableHeadCellProps?:
+    | TableCellProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => TableCellProps);
+  renderColumnActionsMenuItems?: (props: {
+    closeMenu: () => void;
+    column: MRT_Column<TData>;
+    internalColumnMenuItems: ReactNode[];
+    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_HeaderGroup<TData extends Record<string, any> = {}> = Prettify<
-  Omit<HeaderGroup<TData>, 'headers'> & {
-    headers: MRT_Header<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_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_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_Cell<TData extends Record<string, any> = {}> = Prettify<
-  Omit<Cell<TData, unknown>, 'column' | 'row'> & {
-    column: MRT_Column<TData>;
-    row: MRT_Row<TData>;
-  }
->;
+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> = {}> =
+export type MRT_AggregationFn<TData extends Record<string, any>> =
   | AggregationFn<TData>
   | MRT_AggregationOption;
 
@@ -562,7 +574,7 @@ export type MRT_SortingOption = LiteralUnion<
   string & keyof typeof MRT_SortingFns
 >;
 
-export type MRT_SortingFn<TData extends Record<string, any> = {}> =
+export type MRT_SortingFn<TData extends Record<string, any>> =
   | SortingFn<TData>
   | MRT_SortingOption;
 
@@ -570,15 +582,15 @@ export type MRT_FilterOption = LiteralUnion<
   string & keyof typeof MRT_FilterFns
 >;
 
-export type MRT_FilterFn<TData extends Record<string, any> = {}> =
+export type MRT_FilterFn<TData extends Record<string, any>> =
   | FilterFn<TData>
   | MRT_FilterOption;
 
 export type MRT_InternalFilterOption = {
+  divider: boolean;
+  label: string;
   option: string;
   symbol: string;
-  label: string;
-  divider: boolean;
 };
 
 export type MRT_DisplayColumnIds =
@@ -586,12 +598,8 @@ export type MRT_DisplayColumnIds =
   | '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;
+  | 'mrt-row-select'
+  | 'mrt-row-pin';
 
 /**
  * `columns` and `data` props are the only required props, but there are over 170 other optional props.
@@ -602,400 +610,425 @@ export type MRT_CreateTableFeature<
  * 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> = {}> =
-  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;
-    enableFacetedValues?: 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>;
-          staticRowIndex: number;
-          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);
-    muiTableHeadCellFilterSliderProps?:
-      | SliderProps
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-          column: MRT_Column<TData>;
-        }) => 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<Omit<TablePaginationProps, 'rowsPerPage'>>
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-        }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>);
-    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>;
-    onShowColumnFiltersChange?: 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;
-      internalColumnMenuItems: ReactNode[];
-      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[];
-    renderEmptyRowsFallback?: (props: {
-      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
-    > | null>;
-    columnVirtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-        }) => Partial<
-          VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>
-        >);
-    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
-      HTMLDivElement,
-      HTMLTableRowElement
-    > | null>;
-    rowVirtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
-      | ((props: {
-          table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
-  };
+export type MRT_TableOptions<TData extends Record<string, any>> = 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>[];
+  columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
+    HTMLDivElement,
+    HTMLTableCellElement
+  > | null>;
+  columnVirtualizerOptions?:
+    | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+      }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>);
+  /**
+   * 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<TData>>;
+  }>;
+  createDisplayMode?: 'modal' | 'row' | 'custom';
+  editDisplayMode?: 'modal' | 'row' | 'cell' | 'table' | 'custom';
+  columnFilterDisplayMode?: 'subheader' | 'popover' | 'custom';
+  paginationDisplayMode?: 'default' | 'pages' | 'custom';
+  selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
+  rowPinningDisplayMode?:
+    | 'sticky'
+    | 'top'
+    | 'bottom'
+    | 'top-and-bottom'
+    | 'select-sticky'
+    | 'select-top'
+    | 'select-bottom';
+  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;
+  enableFacetedValues?: 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);
+  muiCopyButtonProps?:
+    | ButtonProps
+    | ((props: {
+        cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ButtonProps);
+  muiEditTextFieldProps?:
+    | 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);
+  muiSkeletonProps?:
+    | 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);
+  muiRowDragHandleProps?:
+    | IconButtonProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        row: MRT_Row<TData>;
+      }) => IconButtonProps);
+  muiTableBodyRowProps?:
+    | TableRowProps
+    | ((props: {
+        isDetailPanel?: boolean;
+        row: MRT_Row<TData>;
+        staticRowIndex: number;
+        table: MRT_TableInstance<TData>;
+      }) => TableRowProps);
+  muiTableContainerProps?:
+    | TableContainerProps
+    | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps);
+  muiDetailPanelProps?:
+    | 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);
+  muiColumnActionsButtonProps?:
+    | IconButtonProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => IconButtonProps);
+  muiColumnDragHandleProps?:
+    | IconButtonProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => IconButtonProps);
+  muiFilterCheckboxProps?:
+    | CheckboxProps
+    | ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => CheckboxProps);
+  muiFilterTextFieldProps?:
+    | TextFieldProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+      }) => TextFieldProps);
+  muiFilterSliderProps?:
+    | SliderProps
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => SliderProps);
+  muiCreateRowModalProps?:
+    | DialogProps
+    | ((props: {
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => DialogProps);
+  muiEditRowModalProps?:
+    | DialogProps
+    | ((props: {
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => DialogProps);
+  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<Omit<TablePaginationProps, 'rowsPerPage'>>
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+      }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>);
+  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);
+  onCreatingRowCancel?: (props: {
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => void;
+  onCreatingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+  onCreatingRowSave?: (props: {
+    exitCreatingMode: () => void;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+    values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
+  }) => void;
+  onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
+  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;
+  onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+  onEditingRowSave?: (props: {
+    exitEditingMode: () => void;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+    values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
+  }) => Promise<void> | void;
+  onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+  onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | { id: string } | null>;
+  onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | { id: string } | null>;
+  onIsFullScreenChange?: OnChangeFn<boolean>;
+  onShowAlertBannerChange?: OnChangeFn<boolean>;
+  onShowColumnFiltersChange?: 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;
+  renderCreateRowModalContent?: (props: {
+    internalEditComponents: ReactNode[];
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
+  renderEditRowModalContent?: (props: {
+    internalEditComponents: ReactNode[];
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
+  renderColumnActionsMenuItems?: (props: {
+    column: MRT_Column<TData>;
+    closeMenu: () => void;
+    internalColumnMenuItems: ReactNode[];
+    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[];
+  renderEmptyRowsFallback?: (props: {
+    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';
+  rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
+    HTMLDivElement,
+    HTMLTableRowElement
+  > | null>;
+  rowVirtualizerOptions?:
+    | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+      }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+  selectAllMode?: 'all' | 'page';
+  /**
+   * Manage state externally any way you want, then pass it back into MRT.
+   */
+  state?: Partial<MRT_TableState<TData>>;
+};