material-react-table 0.7.1 → 0.7.4

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterFn" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.7.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist  && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
+    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "eslint .",
@@ -59,7 +59,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
-    "@faker-js/faker": "^6.1.2",
+    "@faker-js/faker": "^6.2.0",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.2",
     "@size-limit/preset-small-lib": "^7.0.8",
@@ -75,7 +75,7 @@
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
     "prettier": "^2.6.2",
@@ -86,7 +86,7 @@
     "storybook-addon-paddings": "^4.3.0",
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "typescript": "^4.6.3"
   },
   "peerDependencies": {
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.44",
+    "@tanstack/react-table": "^8.0.0-alpha.45",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -99,6 +99,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
   };
+  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell<D> | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
   setCurrentFilterTypes: Dispatch<
     SetStateAction<{
@@ -116,6 +117,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   TableState,
   'pagination'
 > & {
+  currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
   currentFilterTypes: Record<string, string | Function>;
   currentGlobalFilterType: Record<string, string | Function>;
@@ -261,9 +263,11 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     tableInstance: MRT_TableInstance<D>;
   }) => void;
   onColumnFilterValueChange?: ({
+    column,
     event,
     filterValue,
   }: {
+    column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
   }) => void;
@@ -322,6 +326,7 @@ export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
 export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
+    editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableDensePaddingToggle?: boolean;
@@ -329,6 +334,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
+    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
@@ -557,6 +563,33 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
+    onCellEditBlur?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: FocusEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onCellEditChange?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: ChangeEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnFilterValueChange?: ({
+      column,
+      event,
+      filterValue,
+    }: {
+      column: MRT_Column<D>;
+      event: ChangeEvent<HTMLInputElement>;
+      filterValue: any;
+    }) => void;
     onDetailPanelClick?: ({
       event,
       row,
@@ -662,6 +695,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showGlobalFilter: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -723,8 +757,11 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
+  columnResizeMode = 'onEnd',
+  editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
+  enableColumnResizing = false,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
   enableFilters = true,
@@ -743,6 +780,7 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
+  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
@@ -751,7 +789,10 @@ export default <D extends Record<string, any> = {}>({
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
+    columnResizeMode={columnResizeMode}
+    editingMode={editingMode}
     enableColumnActions={enableColumnActions}
+    enableColumnResizing={enableColumnResizing}
     enableColumnFilters={enableColumnFilters}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
@@ -771,6 +812,7 @@ export default <D extends Record<string, any> = {}>({
     enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
+    persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}

package/src/body/MRT_TableBodyCell.tsx

@@ -14,17 +14,20 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getIsSomeColumnsPinned,
     getState,
     options: {
+      editingMode,
       enableClickToCopy,
-      enablePinning,
       enableEditing,
+      enablePinning,
+      idPrefix,
       isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
     },
+    setCurrentEditingCell,
   } = tableInstance;
 
-  const { currentEditingRow, isDensePadding } = getState();
+  const { currentEditingCell, currentEditingRow, isDensePadding } = getState();
 
   const { column, row } = cell;
 
@@ -53,13 +56,45 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     [column.columnDefType, column.getWidth()],
   );
 
+  const isEditable =
+    (enableEditing || column.enableEditing) && column.enableEditing !== false;
+
+  const isEditing =
+    isEditable &&
+    (editingMode === 'table' ||
+      currentEditingRow?.id === row.id ||
+      currentEditingCell?.id === cell.id);
+
+  const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
+    if (
+      (enableEditing || column.enableEditing) &&
+      column.enableEditing !== false &&
+      editingMode === 'cell'
+    ) {
+      setCurrentEditingCell(cell);
+      setTimeout(() => {
+        const textField = document.getElementById(
+          `mrt-${idPrefix}-edit-cell-text-field-${cell.id}`,
+        ) as HTMLInputElement;
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
+    }
+  };
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.({ event, cell, tableInstance })
       }
+      onDoubleClick={handleDoubleClick}
       {...tableCellProps}
       sx={{
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+        maxWidth: `min(${column.getWidth()}px, fit-content)`,
+        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -76,6 +111,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           isDensePadding || (enablePinning && getIsSomeColumnsPinned())
             ? 'nowrap'
             : 'normal',
+        width: column.getWidth(),
         //@ts-ignore
         ...tableCellProps?.sx,
       }}
@@ -94,9 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : enableEditing &&
-        column.enableEditing !== false &&
-        currentEditingRow?.id === row.id ? (
+      ) : isEditing ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (

package/src/buttons/MRT_CopyButton.tsx

@@ -56,6 +56,7 @@ export const MRT_CopyButton: FC<Props> = ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
+          cursor: 'copy',
           fontFamily: 'inherit',
           fontSize: 'inherit',
           letterSpacing: 'inherit',

package/src/footer/MRT_TableFooterCell.tsx

@@ -46,8 +46,11 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
           0.05,
         )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
+        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
+        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+        width: column.getWidth(),
         verticalAlign: 'text-top',
         //@ts-ignore
         ...tableCellProps?.sx,

package/src/head/MRT_TableHeadCell.tsx

@@ -97,10 +97,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           theme.palette.common.white,
           0.05,
         )},${alpha(theme.palette.common.white, 0.05)})`,
-        boxShadow: `3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
         fontWeight: 'bold',
         height: '100%',
-        minWidth: `max(${header.getWidth()}, 100px)`,
+        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
+        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -115,9 +115,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
             ? '0.75rem'
             : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
+        overflow: 'visible',
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
         width: header.getWidth(),
+        zIndex: column.getIsResizing() ? 2 : 1,
         //@ts-ignore
         ...tableCellProps?.sx,
       })}
@@ -148,7 +150,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
             }}
           >
             {headerElement}
-            {column.columnDefType !== 'group' && column.getCanSort() && (
+            {column.columnDefType === 'data' && column.getCanSort() && (
               <Tooltip arrow placement="top" title={sortTooltip}>
                 <TableSortLabel
                   aria-label={sortTooltip}
@@ -161,7 +163,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                 />
               </Tooltip>
             )}
-            {column.columnDefType !== 'group' &&
+            {column.columnDefType === 'data' &&
               enableColumnFilters &&
               !!column.getCanColumnFilter() && (
                 <Tooltip arrow placement="top" title={filterTooltip}>
@@ -192,59 +194,56 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                 </Tooltip>
               )}
           </Box>
-          <Box
-            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
-          >
-            {(enableColumnActions || column.enableColumnActions) &&
-              column.enableColumnActions !== false &&
-              column.columnDefType !== 'group' && (
-                <MRT_ToggleColumnActionMenuButton
-                  header={header}
-                  tableInstance={tableInstance}
-                />
-              )}
-            {enableColumnResizing && column.columnDefType !== 'group' && (
-              <Divider
-                flexItem
-                orientation="vertical"
-                onDoubleClick={() => header.resetSize()}
-                sx={(theme: Theme) => ({
-                  borderRightWidth: '2px',
-                  borderRadius: '2px',
-                  maxHeight: '2rem',
-                  cursor: 'col-resize',
-                  userSelect: 'none',
-                  touchAction: 'none',
-                  '&:active': {
-                    backgroundColor: theme.palette.secondary.dark,
-                    opacity: 1,
-                  },
-                })}
-                {...(header.getResizerProps((props: ColumnResizerProps) => ({
-                  ...props,
-                  style: {
-                    transform: column.getIsResizing()
-                      ? `translateX(${
-                          getState().columnSizingInfo.deltaOffset
-                        }px)`
-                      : '',
-                  },
-                })) as any)}
+          {(enableColumnActions || column.enableColumnActions) &&
+            column.enableColumnActions !== false &&
+            column.columnDefType !== 'group' && (
+              <MRT_ToggleColumnActionMenuButton
+                header={header}
+                tableInstance={tableInstance}
               />
             )}
-          </Box>
+          {column.getCanResize() && (
+            <Divider
+              flexItem
+              orientation="vertical"
+              onDoubleClick={() => header.resetSize()}
+              sx={(theme: Theme) => ({
+                borderRadius: '2px',
+                borderRightWidth: '2px',
+                cursor: 'col-resize',
+                height:
+                  showFilters && column.columnDefType === 'data'
+                    ? '4rem'
+                    : '2rem',
+                opacity: 0.8,
+                position: 'absolute',
+                right: '1px',
+                touchAction: 'none',
+                transition: 'all 0.2s ease-in-out',
+                userSelect: 'none',
+                zIndex: 2000,
+                '&:active': {
+                  backgroundColor: theme.palette.info.main,
+                  opacity: 1,
+                },
+              })}
+              {...(header.getResizerProps((props: ColumnResizerProps) => ({
+                ...props,
+                style: {
+                  transform: column.getIsResizing()
+                    ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
+                    : '',
+                },
+              })) as any)}
+            />
+          )}
         </Box>
       )}
-      {column.columnDefType === 'data' &&
-        enableColumnFilters &&
-        column.getCanColumnFilter() && (
-          <Collapse in={showFilters}>
-            <MRT_FilterTextField
-              header={header}
-              tableInstance={tableInstance}
-            />
-          </Collapse>
-        )}
+      {column.columnDefType === 'data' && column.getCanColumnFilter() && (
+        <Collapse in={showFilters}>
+          <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+        </Collapse>
+      )}
     </TableCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { TableRow } from '@mui/material';
+import React, { CSSProperties, FC } from 'react';
+import { alpha, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
@@ -24,7 +24,16 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
   };
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) =>
+        ({
+          boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
+          //@ts-ignore
+          ...tableRowProps?.sx,
+        } as CSSProperties)
+      }
+    >
       {headerGroup.headers.map((header: MRT_Header, index) => (
         <MRT_TableHeadCell
           header={header}

package/src/icons.ts

@@ -19,6 +19,7 @@ import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
@@ -48,6 +49,7 @@ export interface MRT_Icons {
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;
+  RestartAltIcon: any;
   SaveIcon: any;
   SearchIcon: any;
   SearchOffIcon: any;
@@ -78,6 +80,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   MoreHorizIcon,
   MoreVertIcon,
   PushPinIcon,
+  RestartAltIcon,
   SaveIcon,
   SearchIcon,
   SearchOffIcon,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,7 +16,14 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    options: {
+      idPrefix,
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur,
+      onCellEditChange,
+    },
+    setCurrentEditingCell,
     setCurrentEditingRow,
   } = tableInstance;
 
@@ -27,6 +34,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     column.onCellEditChange?.({ event, cell, tableInstance });
+    onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -34,7 +42,9 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       row.values[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
+    setCurrentEditingCell(null);
     column.onCellEditBlur?.({ event, cell, tableInstance });
+    onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -58,6 +68,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
+      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/localization.ts

@@ -32,6 +32,7 @@ export interface MRT_Localization {
   hideColumn: string;
   pinToLeft: string;
   pinToRight: string;
+  resetColumnSize: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -92,6 +93,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,9 +35,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enablePinning,
+      enableColumnResizing,
       enableGrouping,
       enableHiding,
+      enablePinning,
       enableSorting,
       icons: {
         ArrowRightIcon,
@@ -48,6 +49,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         FilterListOffIcon,
         PushPinIcon,
         SortIcon,
+        RestartAltIcon,
         VisibilityOffIcon,
       },
       idPrefix,
@@ -58,7 +60,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const { column } = header;
 
-  const { isDensePadding, columnVisibility } = getState();
+  const { columnSizing, columnVisibility, isDensePadding } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -81,6 +83,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleResetColumnSize = () => {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   const handleHideColumn = () => {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -263,7 +270,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enablePinning &&
         column.getCanPin() && [
           <MenuItem
-            disabled={column.getIsPinned() === 'left'}
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('left')}
             sx={commonMenuItemStyles}
@@ -276,7 +283,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
           <MenuItem
-            disabled={column.getIsPinned() === 'right'}
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('right')}
             sx={commonMenuItemStyles}
@@ -303,6 +310,21 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
+      {enableColumnResizing && [
+        <MenuItem
+          disabled={!column.getCanResize() || !columnSizing[column.id]}
+          key={0}
+          onClick={handleResetColumnSize}
+          sx={commonMenuItemStyles}
+        >
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <RestartAltIcon />
+            </ListItemIcon>
+            {localization.resetColumnSize}
+          </Box>
+        </MenuItem>,
+      ]}
       {enableHiding && [
         <MenuItem
           disabled={column.enableHiding === false}

package/src/table/MRT_TableContainer.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { CSSProperties, FC, useEffect, useState } from 'react';
 import { alpha, Box, TableContainer, Theme } from '@mui/material';
-import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
 
@@ -12,10 +11,10 @@ const commonBoxStyles = ({
   pinned?: 'left' | 'right';
   theme: Theme;
   visible?: boolean;
-}): SystemStyleObject<Theme> => ({
+}): CSSProperties => ({
   display: 'grid',
   minWidth: visible ? '200px' : 0,
-  overflowX: 'auto',
+  overflowX: pinned ? 'scroll' : 'auto',
   boxShadow:
     pinned === 'left'
       ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`