CODEWITHSUNDEEP
reactjsmaterial-ui
Berk Can
Berk Can

Reputation: 302

MUI DataGrid dynamic width according to longest data for column

I am using DataGrid from MUI and inside GridColDef I dont use anything related to width, I want to have columns to have width of longest data so that every letter is shown, is it possible?

Below is my GridColDef:

{
field: 'lastLogin',
type: 'dateTime',
headerName: 'Last login',
align: 'right',
headerAlign: 'right',
}

Upvotes: 16

Views: 8376

Answers (2)

Archit Garg
Archit Garg

Reputation: 3277

(Pro plan only)

Autosizing Reference: https://mui.com/x/react-data-grid/column-dimensions/#autosizing

<DataGrid
  {...otherProps}
  autosizeOptions={{
    columns: ['name', 'status', 'createdBy'],
    includeOutliers: true,
    includeHeaders: false,
  }}
/>

Upvotes: 2

Zack Amin
Zack Amin

Reputation: 536

I believe you can use minWidth, see here - material-ui / data-grid flexible column width min-width

It has been a while since I have used any of that myself but I do remember having a minWidth with elipsis.

Upvotes: 2

Related Questions