Search code examples
reactjsdatagridmaterial-ui

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

Solution

  • 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