Data grid - Column dimensions
Customize the dimensions and resizing behavior of your columns.
Column width
By default, the columns have a width of 100px.
This is an arbitrary, easy-to-remember value.
To change the width of a column, use the width property available in GridColDef.
<DataGrid
columns={[{ field: 'username', width: 200 }, { field: 'age' }]}
rows={rows}
/>Minimum width
By default, the columns have a minimum width of 50px.
This is an arbitrary, easy-to-remember value.
To change the minimum width of a column, use the minWidth property available in GridColDef.
<DataGrid
columns={[{ field: 'username', minWidth: 150 }, { field: 'age' }]}
rows={rows}
/>Fluid width
Column fluidity or responsiveness can be achieved by setting the flex property in GridColDef.
The flex property accepts a value between 0 and ∞.
It works by dividing the remaining space in the grid among all flex columns in proportion to their flex value.
For example, consider a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and the third with flex: 0.5.
The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 is twice the size of flex: 0.5, which means that final sizes will be: 200px, 200px, 100px.
To set a minimum and maximum width for a flex column set the minWidth and the maxWidth property in GridColDef.
Resizing
By default, DataGridPro allows all columns to be resized by dragging the right portion of the column separator.
To prevent the resizing of a column, set resizable: false in the GridColDef.
Alternatively, to disable all columns resize, set the prop disableColumnResize={true}.
To restrict resizing a column under a certain width set the minWidth property in GridColDef.
To restrict resizing a column above a certain width set the maxWidth property in GridColDef.
<DataGridPro
columns={[
{ field: 'id' },
{ field: 'username', width: 125, minWidth: 150, maxWidth: 200 },
{ field: 'age', resizable: false },
]}
rows={rows}
/>