material-react-table 1.6.5 → 1.7.0

package/src/head/MRT_TableHeadRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
@@ -13,13 +13,13 @@ interface Props {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({
+export const MRT_TableHeadRow = ({
   headerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}) => {
+}: Props) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
@@ -10,7 +10,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_FilterCheckbox: FC<Props> = ({ column, table }) => {
+export const MRT_FilterCheckbox = ({ column, table }: Props) => {
   const {
     getState,
     options: { localization, muiTableHeadCellFilterCheckboxProps },

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
 import { MRT_Header, MRT_TableInstance } from '..';
@@ -8,7 +8,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_FilterRangeFields: FC<Props> = ({ header, table }) => {
+export const MRT_FilterRangeFields = ({ header, table }: Props) => {
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,6 +1,5 @@
 import React, {
   ChangeEvent,
-  FC,
   MouseEvent,
   useCallback,
   useEffect,
@@ -26,11 +25,11 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_FilterTextField: FC<Props> = ({
+export const MRT_FilterTextField = ({
   header,
   rangeFilterIndex,
   table,
-}) => {
+}: Props) => {
   const {
     options: {
       enableColumnFilterModes,

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import Tooltip from '@mui/material/Tooltip';
 import Radio from '@mui/material/Radio';
@@ -11,7 +11,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
+export const MRT_SelectCheckbox = ({ row, selectAll, table }: Props) => {
   const {
     getState,
     options: {

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -27,12 +27,12 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_ColumnActionMenu: FC<Props> = ({
+export const MRT_ColumnActionMenu = ({
   anchorEl,
   header,
   setAnchorEl,
   table,
-}) => {
+}: Props) => {
   const {
     getState,
     toggleAllColumnsVisible,
@@ -62,6 +62,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnSizingInfo,
     setShowFilters,
   } = table;
   const { column } = header;
@@ -89,6 +90,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   };
 
   const handleResetColumnSize = () => {
+    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
     column.resetSize();
     setAnchorEl(null);
   };

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
@@ -17,13 +17,13 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_RowActionMenu: FC<Props> = ({
+export const MRT_RowActionMenu = ({
   anchorEl,
   handleEdit,
   row,
   setAnchorEl,
   table,
-}) => {
+}: Props) => {
   const {
     getState,
     options: {

package/src/table/MRT_Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   defaultRangeExtractor,
   Range,
@@ -15,10 +15,12 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ table }) => {
+export const MRT_Table = ({ table }: Props) => {
   const {
+    getFlatHeaders,
     getState,
     options: {
+      columns,
       columnVirtualizerInstanceRef,
       columnVirtualizerProps,
       enableColumnResizing,
@@ -33,7 +35,13 @@ export const MRT_Table: FC<Props> = ({ table }) => {
     },
     refs: { tableContainerRef },
   } = table;
-  const { isFullScreen, columnPinning, columnVisibility } = getState();
+  const {
+    columnPinning,
+    columnSizing,
+    columnSizingInfo,
+    columnVisibility,
+    isFullScreen,
+  } = getState();
 
   const tableProps =
     muiTableProps instanceof Function
@@ -122,6 +130,16 @@ export const MRT_Table: FC<Props> = ({ table }) => {
     virtualPaddingRight,
   };
 
+  const columnSizeVars = useMemo(() => {
+    const headers = getFlatHeaders();
+    const colSizes: { [key: string]: number } = {};
+    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 (
     <Table
       stickyHeader={enableStickyHeader || isFullScreen}
@@ -135,9 +153,10 @@ export const MRT_Table: FC<Props> = ({ table }) => {
           ? tableProps.sx(theme)
           : (tableProps?.sx as any)),
       })}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
     >
       {enableTableHead && <MRT_TableHead {...props} />}
-      {memoMode === 'table-body' ? (
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
         <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
       ) : (
         <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
 import type { MRT_TableInstance } from '..';
@@ -10,7 +10,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableContainer: FC<Props> = ({ table }) => {
+export const MRT_TableContainer = ({ table }: Props) => {
   const {
     getState,
     options: { enableStickyHeader, muiTableContainerProps },

package/src/table/MRT_TablePaper.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Paper from '@mui/material/Paper';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
@@ -9,7 +9,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TablePaper: FC<Props> = ({ table }) => {
+export const MRT_TablePaper = ({ table }: Props) => {
   const {
     getState,
     options: {