MUI DataGrid dynamic width according to longest data for column

Question

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',
}

Answer 1

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.

Answer 2

(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,
  }}
/>