material-react-table 1.6.5 → 1.7.0

package/dist/cjs/types/_locales/sv.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_SV: MRT_Localization;

package/dist/cjs/types/body/MRT_TableBody.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
@@ -8,6 +8,6 @@ interface Props {
     virtualPaddingLeft?: number;
     virtualPaddingRight?: number;
 }
-export declare const MRT_TableBody: FC<Props>;
-export declare const Memo_MRT_TableBody: React.NamedExoticComponent<Props>;
+export declare const MRT_TableBody: ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element;
+export declare const Memo_MRT_TableBody: React.MemoExoticComponent<({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element>;
 export {};

package/dist/cjs/types/body/MRT_TableBodyCell.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React, { RefObject } from 'react';
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
@@ -11,6 +11,6 @@ interface Props {
     table: MRT_TableInstance;
     virtualCell?: VirtualItem;
 }
-export declare const MRT_TableBodyCell: FC<Props>;
-export declare const Memo_MRT_TableBodyCell: React.NamedExoticComponent<Props>;
+export declare const MRT_TableBodyCell: ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }: Props) => JSX.Element;
+export declare const Memo_MRT_TableBodyCell: React.MemoExoticComponent<({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }: Props) => JSX.Element>;
 export {};

package/dist/cjs/types/body/MRT_TableBodyCellValue.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableBodyCellValue: FC<Props>;
+export declare const MRT_TableBodyCellValue: ({ cell, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/body/MRT_TableBodyRow.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
@@ -13,6 +13,6 @@ interface Props {
     virtualPaddingRight?: number;
     virtualRow?: VirtualItem;
 }
-export declare const MRT_TableBodyRow: FC<Props>;
-export declare const Memo_MRT_TableBodyRow: React.NamedExoticComponent<Props>;
+export declare const MRT_TableBodyRow: ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props) => JSX.Element;
+export declare const Memo_MRT_TableBodyRow: React.MemoExoticComponent<({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props) => JSX.Element>;
 export {};

package/dist/cjs/types/body/MRT_TableBodyRowGrabHandle.d.ts

@@ -1,9 +1,9 @@
-import { FC, RefObject } from 'react';
+import { RefObject } from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableBodyRowGrabHandle: FC<Props>;
+export declare const MRT_TableBodyRowGrabHandle: ({ cell, rowRef, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
@@ -7,5 +7,5 @@ interface Props {
     table: MRT_TableInstance;
     virtualRow?: VirtualItem;
 }
-export declare const MRT_TableDetailPanel: FC<Props>;
+export declare const MRT_TableDetailPanel: ({ parentRowRef, row, table, virtualRow, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/buttons/MRT_ExpandAllButton.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_ExpandAllButton: FC<Props>;
+export declare const MRT_ExpandAllButton: ({ table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/buttons/MRT_ExpandButton.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     row: MRT_Row;
     table: MRT_TableInstance;
 }
-export declare const MRT_ExpandButton: FC<Props>;
+export declare const MRT_ExpandButton: ({ row, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/column.utils.d.ts

@@ -4,7 +4,7 @@ import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import type { TableCellProps } from '@mui/material/TableCell';
 import type { Theme } from '@mui/material/styles';
-import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
+import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_TableInstance } from '.';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
@@ -111,9 +111,8 @@ export declare const getIsLastColumn: (column: MRT_Column, table: MRT_TableInsta
 export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
 export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
 export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;
-export declare const getCommonCellStyles: ({ column, header, table, tableCellProps, theme, }: {
+export declare const getCommonCellStyles: ({ column, table, tableCellProps, theme, }: {
     column: MRT_Column;
-    header?: MRT_Header<{}> | undefined;
     table: MRT_TableInstance;
     tableCellProps: TableCellProps;
     theme: Theme;

package/dist/cjs/types/footer/MRT_TableFooter.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
@@ -7,5 +7,5 @@ interface Props {
     virtualPaddingLeft?: number;
     virtualPaddingRight?: number;
 }
-export declare const MRT_TableFooter: FC<Props>;
+export declare const MRT_TableFooter: ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/footer/MRT_TableFooterCell.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     footer: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableFooterCell: FC<Props>;
+export declare const MRT_TableFooterCell: ({ footer, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
@@ -8,5 +8,5 @@ interface Props {
     virtualPaddingLeft?: number;
     virtualPaddingRight?: number;
 }
-export declare const MRT_TableFooterRow: FC<Props>;
+export declare const MRT_TableFooterRow: ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element | null;
 export {};

package/dist/cjs/types/head/MRT_TableHead.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
@@ -7,5 +7,5 @@ interface Props {
     virtualPaddingLeft?: number;
     virtualPaddingRight?: number;
 }
-export declare const MRT_TableHead: FC<Props>;
+export declare const MRT_TableHead: ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCell.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableHeadCell: FC<Props>;
+export declare const MRT_TableHeadCell: ({ header, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellColumnActionsButton.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableHeadCellColumnActionsButton: FC<Props>;
+export declare const MRT_TableHeadCellColumnActionsButton: ({ header, table, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellFilterContainer.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableHeadCellFilterContainer: FC<Props>;
+export declare const MRT_TableHeadCellFilterContainer: ({ header, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellFilterLabel.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableHeadCellFilterLabel: FC<Props>;
+export declare const MRT_TableHeadCellFilterLabel: ({ header, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellGrabHandle.d.ts

@@ -1,9 +1,9 @@
-import { FC, RefObject } from 'react';
+import { RefObject } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
     column: MRT_Column;
     table: MRT_TableInstance;
     tableHeadCellRef: RefObject<HTMLTableCellElement>;
 }
-export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
+export declare const MRT_TableHeadCellGrabHandle: ({ column, table, tableHeadCellRef, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellResizeHandle.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableHeadCellResizeHandle: FC<Props>;
+export declare const MRT_TableHeadCellResizeHandle: ({ header, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadCellSortLabel.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_Header, MRT_TableInstance } from '..';
 import type { TableCellProps } from '@mui/material/TableCell';
 interface Props {
@@ -6,5 +6,5 @@ interface Props {
     table: MRT_TableInstance;
     tableCellProps?: TableCellProps;
 }
-export declare const MRT_TableHeadCellSortLabel: FC<Props>;
+export declare const MRT_TableHeadCellSortLabel: ({ header, table, tableCellProps, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/head/MRT_TableHeadRow.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
@@ -8,5 +8,5 @@ interface Props {
     virtualPaddingLeft?: number;
     virtualPaddingRight?: number;
 }
-export declare const MRT_TableHeadRow: FC<Props>;
+export declare const MRT_TableHeadRow: ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/inputs/MRT_FilterCheckbox.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
     column: MRT_Column;
     table: MRT_TableInstance;
 }
-export declare const MRT_FilterCheckbox: FC<Props>;
+export declare const MRT_FilterCheckbox: ({ column, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/inputs/MRT_FilterRangeFields.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
 }
-export declare const MRT_FilterRangeFields: FC<Props>;
+export declare const MRT_FilterRangeFields: ({ header, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/inputs/MRT_FilterTextField.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     rangeFilterIndex?: number;
     table: MRT_TableInstance;
 }
-export declare const MRT_FilterTextField: FC<Props>;
+export declare const MRT_FilterTextField: ({ header, rangeFilterIndex, table, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/inputs/MRT_SelectCheckbox.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     row?: MRT_Row;
     selectAll?: boolean;
     table: MRT_TableInstance;
 }
-export declare const MRT_SelectCheckbox: FC<Props>;
+export declare const MRT_SelectCheckbox: ({ row, selectAll, table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/menus/MRT_ColumnActionMenu.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 export declare const commonMenuItemStyles: {
     py: string;
@@ -16,5 +16,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;
 }
-export declare const MRT_ColumnActionMenu: FC<Props>;
+export declare const MRT_ColumnActionMenu: ({ anchorEl, header, setAnchorEl, table, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/menus/MRT_RowActionMenu.d.ts

@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
@@ -7,5 +7,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;
 }
-export declare const MRT_RowActionMenu: FC<Props>;
+export declare const MRT_RowActionMenu: ({ anchorEl, handleEdit, row, setAnchorEl, table, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/table/MRT_Table.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_Table: FC<Props>;
+export declare const MRT_Table: ({ table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/table/MRT_TableContainer.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_TableContainer: FC<Props>;
+export declare const MRT_TableContainer: ({ table }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/table/MRT_TablePaper.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
-export declare const MRT_TablePaper: FC<Props>;
+export declare const MRT_TablePaper: ({ table }: Props) => JSX.Element;
 export {};

package/dist/esm/material-react-table.esm.js

@@ -234,15 +234,17 @@ const getIsFirstRightPinnedColumn = (column) => {
 const getTotalRight = (table, column) => {
     return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
 };
-const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
             ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-                : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', left: column.getIsPinned() === 'left'
+                : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
+            ? `var(--col-${column.id}-size) 0 auto`
+            : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
@@ -263,11 +265,9 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization || column.getIsResizing()
             ? 'none'
-            : `all 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
-            ? `${column.getSize()} 0 auto`
-            : undefined, minWidth: `max(${column.getSize()}px, ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: (_h = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _h !== void 0 ? _h : column.getSize() }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${column.id}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${column.id}-size) * 1px)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -798,7 +798,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -817,6 +817,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         setAnchorEl(null);
     };
     const handleResetColumnSize = () => {
+        setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
         column.resetSize();
         setAnchorEl(null);
     };
@@ -1725,7 +1726,7 @@ const MRT_FilterCheckbox = ({ column, table }) => {
                     : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined })));
 };
 
-const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
     const { getState } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
@@ -1812,12 +1813,15 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
 
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     var _a;
-    const { getState, options: { columnResizeMode }, } = table;
+    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density, showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React.createElement(Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
+    return (React.createElement(Box, { onDoubleClick: () => {
+            setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
+            column.resetSize();
+        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
             position: 'absolute',
@@ -1953,7 +1957,6 @@ const MRT_TableHeadCell = ({ header, table }) => {
                     ? 2
                     : 1 }, getCommonCellStyles({
             column,
-            header,
             table,
             tableCellProps,
             theme,
@@ -2120,7 +2123,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
                 : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
 };
 
-const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
+const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
     const { options: { muiTableBodyRowDragHandleProps }, } = table;
     const { row } = cell;
     const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
@@ -2616,8 +2619,8 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
 
 const MRT_Table = ({ table }) => {
     var _a, _b, _c, _d;
-    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerProps, enableColumnResizing, enableColumnVirtualization, enablePinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
-    const { isFullScreen, columnPinning, columnVisibility } = getState();
+    const { getFlatHeaders, getState, options: { columns, columnVirtualizerInstanceRef, columnVirtualizerProps, enableColumnResizing, enableColumnVirtualization, enablePinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
@@ -2671,11 +2674,20 @@ const MRT_Table = ({ table }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
+    const columnSizeVars = useMemo(() => {
+        const headers = getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const h = headers[i];
+            colSizes[`--col-${h.column.id}-size`] = h.getSize();
+        }
+        return colSizes;
+    }, [columns, columnSizing, columnSizingInfo]);
     return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
-            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
+            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }),
         enableTableHead && React.createElement(MRT_TableHead, Object.assign({}, props)),
-        memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (React.createElement(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))),
+        memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (React.createElement(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (React.createElement(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))),
         enableTableFooter && React.createElement(MRT_TableFooter, Object.assign({}, props))));
 };
 
@@ -3023,7 +3035,7 @@ const MRT_Localization_EN = {
 
 const MaterialReactTable = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onChange', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);