CODEWITHSUNDEEP
reactjsdatagridmaterial-ui
Vikas Acharya
Vikas Acharya

Reputation: 4152

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

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

enter image description here

Upvotes: 75

Views: 75331

Answers (3)

Ahmed Moustafa
Ahmed Moustafa

Reputation: 11

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

Upvotes: 1

Junaid Sikander Hakro
Junaid Sikander Hakro

Reputation: 534

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} ]

Upvotes: 39

Sarun UK
Sarun UK

Reputation: 6736

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

Upvotes: 149

Related Questions