[DataGrid] Columns to have a fluid width

[amiranga]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

As the data-grid document says, By default, the columns have a width of 100 pixels. We can override it by using the width property available in ColDef.
Is there an option for columns to have a fluid width so that columns will get a proportion of the width of the container?

Examples 🌈

<div style={{ width: "100%"}}>
<DataGrid
  columns={[
    { field: 'id' },
    { field: 'username' },
    { field: 'age' },
  ]}
  rows={rows}
/>
</div>

If my window width is 900px. The column with for 'id', 'username' and 'age' should be 300px each.
Columns should resize automatically when window width changes.

Motivation 🔦

In most of the table components, I have worked with, this is the default behavior. Is there a way to accomplish this using column props?? or should this be a new feature??

Benchmark

• https://ag-grid.com/javascript-grid-resizing/#column-flex
• https://www.telerik.com/kendo-react-ui/components/grid/columns/width/
• https://baseweb.design/components/unstable-data-table/

[oliviertassinari]

@amiranga What do you think about we use the flexbox model? Columns without the width property but flexbox would share. the same available, the higher the flexbox value is the more space it takes, like a barycenter and like flexbox implements it.

[ronnyroeller]

Running into the same issue here.

What do you think about we use the flexbox model? Columns without the width property but flexbox would share. the same available, the higher the flexbox value is the more space it takes, like a barycenter and like flexbox implements it.

This would definitely solve my issue.

[DanailH]

Ok, I did a little bit of research and I have a question regarding the ability to resize columns and this improvement.

More specifically are we going to add the option to set min-width and max-width of a column or should we scope it out for now and add it later?

PS. Not including this in the initial version will make delivering this faster.

[danielMugisha]

how do I set fixed datagrid width or atleast limit it to the sum of column widths??

[oliviertassinari]

@danielMugisha It's not clear to me. Could you detail the problem you are facing? Thanks.

[loopmode]

Is there an alternative approach to at least have the last column automatically fill the remaining width?
I just want to have some classic action buttons in the last column, and it really looks weird when those action buttons cannot be right-aligned and their column can't have "auto width".
There even is an extra cell rendered after the last defined column, and it does fill the remaining space. Can we place content there? :)

[oliviertassinari]

I just want to have some classic action buttons in the last column

@loopmode See #517

[loopmode]

Thank you @oliviertassinari !

[ruslan-balashov]

hey @loopmode
did you have the solution for your problem ?

[MAfzalKhan1997]

@amiranga did you find out the solution ?

[MAfzalKhan1997]

any solution for the same problem ? instead of adding flex prop to each column?

[ahmed-zhran]

I have a lot of columns and I want to show them all and allow horizontal scrolling I am trying to do that from a while
...(flex property allow you to control the size within the container only, while I want each column to take its own size and over flow the container while I can horizontally scrolling throw them)

"@mui/x-data-grid": "^5.11.0",

any help would be appreciated