how to make material data grid width to fill the parent component in react js

Question

I'm trying to display the data grid with all columns should take equal width to fit the parent component. but there is a blank space at the end which I'm not able to remove and cannot make columns to take auto width to fit page width.

can anyone please help me on this

https://codesandbox.io/s/musing-montalcini-tn04y

Draconic

Give flex value for each column - codesandbox.io/s/dry-https-7pp93?file=/src/App.js:554-561 – Sorb

@SarunUK please add this as answer. It's working like charm – Draconic

what does flex: val do? please explain what that means. – Dispassionate

Answer 1

Include flex value for each column level like below,

const columns = [
  { field: "id", headerName: "ID", flex: 1 },
  { field: "firstName", headerName: "First name", flex: 1 },
  { field: "lastName", headerName: "Last name", flex: 1 },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    flex: 1
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    flex: 1,
    valueGetter: (params) =>
      `${params.getValue(params.id, "firstName") || ""} ${
        params.getValue(params.id, "lastName") || ""
      }`
  }
];

codesandbox - https://codesandbox.io/s/dry-https-7pp93?file=/src/App.js:266-850

Sorb

can you please add what that means? what does flex:1 do?. what does flex do? It's just not clear from your answer. thx – Dispassionate

@Dispassionate That would be an unrelated topic, if you are curious about what this does, try these resources instead: css-tricks.com/snippets/css/a-guide-to-flexbox and flexboxfroggy.com to practice. – Outlander

@DaveFunk's recommendation pertains to CSS flexbox properties in general. While useful to know, flexbox is only tangentially related to the 'flex' property of the MUI data grid column definition. A more specific answer to that question may be found here: mui.com/x/react-data-grid/column-dimensions/#fluid-width. – Louislouisa

They become same width in that case. How would I make it adjust according to column's content width – Blades

This should totally be on the documentation page – Scrapple

This should be the default. Maybe it's in the paid version? ;-) – Eighteenth

Answer 2

in my case, I include flex as well as minWidth property which helps the table show full data in SM (small) and (XS) extra small devices.

const columns = [
    {field: "id", hide: true},
    {field: "transaction", headerName: "Transactions", minWidth: 330, flex: 1},
    {field: "date", headerName: "Date", minWidth: 100, flex: 1},
    {field: "type", headerName: "Type", minWidth: 100, flex: 1},
    {field: "price", headerName: "Price", minWidth: 110, flex: 1},
    {field: "gas", headerName: "Gas", minWidth: 110, flex: 1},
    {field: "total", headerName: "Total", minWidth: 110, flex: 1} ]

Expiratory

Setting minWidth helped me. Thanks! – Glioma

Setting a min width will also ensure your table headings do not truncate when using flex 1 when compressing, but will always fill available space. – Outlander

Answer 3

Using flex and minWidth make the dataGrid flicker on page loading. It looks like it is rendered multiple times.

Fairing

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Capability