material-react-table 0.33.6 → 0.35.0

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const internalFilterOptions: (localization: MRT_Localization) => {
@@ -7,12 +6,12 @@ export declare const internalFilterOptions: (localization: MRT_Localization) =>
     label: string;
     divider: boolean;
 }[];
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_FilterOptionMenu: FC<Props>;
+export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,10 +1,9 @@
-import { FC } from 'react';
 import type { MRT_TableInstance } from '..';
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     isSubMenu?: boolean;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenu: FC<Props>;
+export declare const MRT_ShowHideColumnsMenu: <TData extends Record<string, any> = {}>({ anchorEl, isSubMenu, setAnchorEl, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,12 +1,12 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
-interface Props {
-    allColumns: MRT_Column[];
-    column: MRT_Column;
-    currentHoveredColumn: MRT_Column | null;
+interface Props<TData extends Record<string, any> = {}> {
+    allColumns: MRT_Column<TData>[];
+    column: MRT_Column<TData>;
+    hoveredColumn: MRT_Column<TData> | null;
     isSubMenu?: boolean;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
-    table: MRT_TableInstance;
+    setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;
+export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/esm/toolbar/MRT_ToolbarInternalButtons.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent, FC } from 'react';
+import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
-import { VirtualizerOptions } from '@tanstack/react-virtual';
+import { Options } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
@@ -226,40 +226,40 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
         tableId: string;
         localization: MRT_Localization;
     };
-    setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
-    setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
-    setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
-    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
     setColumnFilterFns: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterOption;
     }>>;
+    setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
+    setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+    setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
+    setEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
+    setEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
     setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
+    setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
         id: string;
     } | null>>;
-    setCurrentHoveredRow: Dispatch<SetStateAction<MRT_Row<TData> | {
+    setHoveredRow: Dispatch<SetStateAction<MRT_Row<TData> | {
         id: string;
     } | null>>;
-    setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
-    currentDraggingColumn: MRT_Column<TData> | null;
-    currentDraggingRow: MRT_Row<TData> | null;
-    currentEditingCell: MRT_Cell<TData> | null;
-    currentEditingRow: MRT_Row<TData> | null;
     columnFilterFns: Record<string, MRT_FilterOption>;
-    globalFilterFn: Record<string, MRT_FilterOption>;
-    currentHoveredColumn: MRT_Column<TData> | {
+    density: 'comfortable' | 'compact' | 'spacious';
+    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;
-    currentHoveredRow: MRT_Row<TData> | {
+    hoveredRow: MRT_Row<TData> | {
         id: string;
     } | null;
-    density: 'comfortable' | 'compact' | 'spacious';
     isFullScreen: boolean;
     isLoading: boolean;
     showAlertBanner: boolean;
@@ -389,15 +389,17 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    onCellEditBlur?: ({ cell, event, table, }: {
+    onCellEditBlur?: ({ cell, event, table, value, }: {
         event: FocusEvent<HTMLInputElement>;
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
+        value: string;
     }) => void;
-    onCellEditChange?: ({ cell, event, table, }: {
+    onCellEditChange?: ({ cell, event, table, value, }: {
         event: ChangeEvent<HTMLInputElement>;
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
+        value: string;
     }) => void;
     sortingFn?: MRT_SortingFn;
 };
@@ -422,7 +424,7 @@ declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>,
     getAllCells: () => MRT_Cell<TData>[];
     getVisibleCells: () => MRT_Cell<TData>[];
     subRows?: MRT_Row<TData>[];
-    _valuesCache?: TData;
+    _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
 };
 declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
     column: MRT_Column<TData>;
@@ -442,10 +444,11 @@ declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-ro
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
+declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
     columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
+    defaultColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -467,6 +470,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     enableRowDragging?: boolean;
     enableRowNumbers?: boolean;
     enableRowOrdering?: boolean;
+    enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
@@ -587,15 +591,17 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
-    onCellEditBlur?: ({ cell, event, table, }: {
+    onCellEditBlur?: ({ cell, event, table, value, }: {
         event: FocusEvent<HTMLInputElement>;
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
+        value: string;
     }) => void;
-    onCellEditChange?: ({ cell, event, table, }: {
+    onCellEditChange?: ({ cell, event, table, value, }: {
         event: ChangeEvent<HTMLInputElement>;
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
+        value: string;
     }) => void;
     onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
         event: DragEvent<HTMLButtonElement>;
@@ -604,21 +610,22 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
             id: string;
         } | null;
     }) => void;
-    onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
-    onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onCurrentFilterFnsChange?: OnChangeFn<{
-        [key: string]: MRT_FilterOption;
-    }>;
-    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onDensityChange?: OnChangeFn<boolean>;
-    onEditRowSubmit?: ({ row, table, }: {
+    onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onEditRowSubmit?: ({ row, table, values, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
+        values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
+    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+    onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onFilterFnsChange?: OnChangeFn<{
+        [key: string]: MRT_FilterOption;
+    }>;
+    onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+    onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onRowDrop?: ({ event, draggedRow, targetRow, }: {
         event: DragEvent<HTMLButtonElement>;
@@ -652,23 +659,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
-        table: MRT_TableInstance<TData>;
-        MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ToggleFiltersButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ShowHideColumnsButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ToggleDensePaddingButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_FullScreenToggleButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
+    renderToolbarInternalActions?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
     }) => ReactNode;
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
@@ -678,10 +670,40 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
+    virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    }) => Partial<Options<HTMLDivElement>>);
 };
 declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, _default as default };
+interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$5<TData>) => JSX.Element;
+
+interface Props$4<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$4<TData>) => JSX.Element;
+
+interface Props$3<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$3<TData>) => JSX.Element;
+
+interface Props$2<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$2<TData>) => JSX.Element;
+
+interface Props$1<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$1<TData>) => JSX.Element;
+
+interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
+
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.33.6",
+  "version": "0.35.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -68,7 +68,7 @@
     "@storybook/addon-storysource": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/react": "^6.5.10",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
     "eslint": "^8.21.0",
@@ -95,7 +95,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.17"
+    "@tanstack/react-table": "8.5.11",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -2,7 +2,6 @@ import React, {
   ChangeEvent,
   Dispatch,
   DragEvent,
-  FC,
   FocusEvent,
   ReactNode,
   SetStateAction,
@@ -41,7 +40,8 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { VirtualizerOptions } from '@tanstack/react-virtual';
+import type { Options as VirtualizerOptions } from 'react-virtual';
+// import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
@@ -96,23 +96,21 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     tableId: string;
     localization: MRT_Localization;
   };
-  setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
-  setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
-  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
-  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setColumnFilterFns: Dispatch<
-    SetStateAction<{
-      [key: string]: MRT_FilterOption;
-    }>
+    SetStateAction<{ [key: string]: MRT_FilterOption }>
   >;
+  setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
+  setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
+  setEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
+  setEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setCurrentHoveredColumn: Dispatch<
+  setHoveredColumn: Dispatch<
     SetStateAction<MRT_Column<TData> | { id: string } | null>
   >;
-  setCurrentHoveredRow: Dispatch<
+  setHoveredRow: Dispatch<
     SetStateAction<MRT_Row<TData> | { id: string } | null>
   >;
-  setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -121,15 +119,15 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
 
 export type MRT_TableState<TData extends Record<string, any> = {}> =
   TableState & {
-    currentDraggingColumn: MRT_Column<TData> | null;
-    currentDraggingRow: MRT_Row<TData> | null;
-    currentEditingCell: MRT_Cell<TData> | null;
-    currentEditingRow: MRT_Row<TData> | null;
     columnFilterFns: Record<string, MRT_FilterOption>;
-    globalFilterFn: Record<string, MRT_FilterOption>;
-    currentHoveredColumn: MRT_Column<TData> | { id: string } | null;
-    currentHoveredRow: MRT_Row<TData> | { id: string } | null;
     density: 'comfortable' | 'compact' | 'spacious';
+    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;
@@ -340,19 +338,23 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     cell,
     event,
     table,
+    value,
   }: {
     event: FocusEvent<HTMLInputElement>;
     cell: MRT_Cell<TData>;
     table: MRT_TableInstance<TData>;
+    value: string;
   }) => void;
   onCellEditChange?: ({
     cell,
     event,
     table,
+    value,
   }: {
     event: ChangeEvent<HTMLInputElement>;
     cell: MRT_Cell<TData>;
     table: MRT_TableInstance<TData>;
+    value: string;
   }) => void;
   sortingFn?: MRT_SortingFn;
 };
@@ -397,7 +399,7 @@ export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
   getAllCells: () => MRT_Cell<TData>[];
   getVisibleCells: () => MRT_Cell<TData>[];
   subRows?: MRT_Row<TData>[];
-  _valuesCache?: TData;
+  _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
 };
 
 export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
@@ -445,6 +447,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     Partial<TableOptions<TData>>,
     | 'columns'
     | 'data'
+    | 'defaultColumn'
+    | 'enableRowSelection'
     | 'expandRowsFn'
     | 'initialState'
     | 'onStateChange'
@@ -453,6 +457,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
+    defaultColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -474,6 +479,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableRowDragging?: boolean;
     enableRowNumbers?: boolean;
     enableRowOrdering?: boolean;
+    enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
@@ -691,19 +697,23 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       cell,
       event,
       table,
+      value,
     }: {
       event: FocusEvent<HTMLInputElement>;
       cell: MRT_Cell<TData>;
       table: MRT_TableInstance<TData>;
+      value: string;
     }) => void;
     onCellEditChange?: ({
       cell,
       event,
       table,
+      value,
     }: {
       event: ChangeEvent<HTMLInputElement>;
       cell: MRT_Cell<TData>;
       table: MRT_TableInstance<TData>;
+      value: string;
     }) => void;
     onColumnDrop?: ({
       event,
@@ -714,22 +724,24 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       draggedColumn: MRT_Column<TData>;
       targetColumn: MRT_Column<TData> | { id: string } | null;
     }) => void;
-    onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
-    onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
-    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
-    onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onDensityChange?: OnChangeFn<boolean>;
+    onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditRowSubmit?: ({
       row,
       table,
+      values,
     }: {
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
+      values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
+    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+    onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
+    onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+    onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onRowDrop?: ({
       event,
@@ -779,28 +791,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }) => ReactNode;
     renderToolbarInternalActions?: ({
       table,
-      MRT_ToggleGlobalFilterButton,
-      MRT_ToggleFiltersButton,
-      MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton,
-      MRT_FullScreenToggleButton,
     }: {
       table: MRT_TableInstance<TData>;
-      MRT_ToggleGlobalFilterButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleFiltersButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ShowHideColumnsButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleDensePaddingButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_FullScreenToggleButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
     }) => ReactNode;
     renderTopToolbarCustomActions?: ({
       table,
@@ -813,12 +805,19 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+      | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({
           table,
         }: {
           table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+        }) => Partial<VirtualizerOptions<HTMLDivElement>>);
+    // virtualizerProps?:
+    //   | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+    //   | (({
+    //       table,
+    //     }: {
+    //       table: MRT_TableInstance<TData>;
+    //     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
   };
 
 export default <TData extends Record<string, any> = {}>({

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,6 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import { useVirtual } from 'react-virtual';
+// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
@@ -23,7 +24,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       virtualizerProps,
     },
   } = table;
-  const { density, globalFilter, pagination, sorting } = getState();
+  const { globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -61,28 +62,47 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer: Virtualizer = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () => (density === 'compact' ? 20 : 50),
-        getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-        overscan: 10,
+  const rowVirtualizer = enableRowVirtualization
+    ? useVirtual({
+        size: rows.length,
+        parentRef: tableContainerRef,
+        overscan: 15,
         ...vProps,
       })
     : ({} as any);
 
+  // const rowVirtualizer: Virtualizer = enableRowVirtualization
+  //   ? useVirtualizer({
+  //       count: rows.length,
+  //       estimateSize: () => (density === 'compact' ? 25 : 50),
+  //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+  //       overscan: 15,
+  //       ...vProps,
+  //     })
+  //   : ({} as any);
+
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.getVirtualItems()
+    ? rowVirtualizer.virtualItems
     : [];
 
+  // const virtualRows = enableRowVirtualization
+  //   ? rowVirtualizer.getVirtualItems()
+  //   : [];
+
   let paddingTop = 0;
   let paddingBottom = 0;
   if (enableRowVirtualization) {
     paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     paddingBottom = !!virtualRows.length
-      ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
       : 0;
   }
+  // if (enableRowVirtualization) {
+  //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+  //   paddingBottom = !!virtualRows.length
+  //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+  //     : 0;
+  // }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -91,7 +111,6 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization