How do I enable column resize for user on MUI DataGrid, it is enable by default on XGrid, but I want to enable it on Datagrid, please help.

   <DataGrid
       className={classes.table}                
       autoHeight
       disableColumnMenu
       rows={rows}
       columns={columns}
       pageSize={50}
       onPageChange={handlePageChange}
       rowCount={rowCount}
       paginationMode="server"
       loading={loading}
       rowsPerPageOptions={[]}
     />

How do I enable column resize for user on MUI DataGrid, it is enable by default on XGrid, but I want to enable it on Datagrid, please help.

   <DataGrid
       className={classes.table}                
       autoHeight
       disableColumnMenu
       rows={rows}
       columns={columns}
       pageSize={50}
       onPageChange={handlePageChange}
       rowCount={rowCount}
       paginationMode="server"
       loading={loading}
       rowsPerPageOptions={[]}
     />

• javascript
• reactjs
• material-ui

• There is a prop resizable on GridColDef interface. You provide list of column definitions to the columns prop on DataGrid. Maybe the solution is to set it on column level. – Sebastian.Belczyk Commented Jul 24, 2021 at 12:53
• Upgrade to v7 solved it – Nijat Aliyev Commented May 2, 2024 at 21:11

2 Answers 2

If you are using MUI V6, resizable columns are available only in the comercial version (XGrid).

In the new V7 it is available to the free MIT version https://mui.com/x/react-data-grid/#mit-version-free-forever

Since MUI X v7.0.0 column resizing and auto-sizing are now available on the community plan. source