score:51

Accepted answer

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

score:9

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

Related Query

More Query from same tag