Skip to content
Edit this page

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.

username
age
@MUI
38

Rows per page:

1–1 of 1

<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.

username
age
@MUI
38

Rows per page:

1–1 of 1

<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.

Note

  • flex doesn't work together with width. If you set both flex and width in GridColDef, flex will override width.
  • flex doesn't work if the combined width of the columns that have width is more than the width of the grid itself. If that is the case a scroll bar will be visible, and the columns that have flex will default back to their base value of 100px.
id
username
age
1
@MUI
20

Rows per page:

1–1 of 1

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.

id
username
age
1
@MUI
20
Total Rows: 1
<DataGridPro
  columns={[
    { field: 'id' },
    { field: 'username', width: 125, minWidth: 150, maxWidth: 200 },
    { field: 'age', resizable: false },
  ]}
  rows={rows}
/>

To capture changes in the width of a column there are two callbacks that are called:

  • onColumnResize: Called while a column is being resized.
  • onColumnWidthChange: Called after the width of a column is changed, but not during resizing.

API