MUI DataGrid no longer horizontally scaling

EDIT: the official examples are also broken. @contributor

After a Chrome update some time last week, my MUI data grid is not properly horizontally scaling.

If I reduce the size of my browser window, the data grid columns do not reduce in width. A hard refresh resizes it. However, if I increase the browser window size, the data grid columns properly increase in width (the flex property applies).

Here is the code for my relatively simple page using the data grid:

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid'
import { useGo } from '@refinedev/core'
import { EditButton, List, useDataGrid } from '@refinedev/mui'
import { useMemo } from 'react'

export const ProjectList = () => {
  const { dataGridProps } = useDataGrid<Project>({
    pagination: { mode: 'off' },
  })
  const go = useGo()

  const columns = useMemo<GridColDef<Project>[]>(
    () => [
      { field: 'name', headerName: 'Project', flex: 1 },
      {
        field: 'locales',
        headerName: 'Locales',
        flex: 1,
        valueFormatter: ({ value }) => value.map((locale: string) => locale).join(', '),
      },
      {
        field: 'edit',
        headerName: 'Edit',
        sortable: false,
        renderCell: ({ row }) => {
          return (
            <div
              onClick={event => {
                event.stopPropagation()
              }}
            >
              <EditButton hideText recordItemId={row.id} />
            </div>
          )
        },
        align: 'center',
        headerAlign: 'center',
        width: 60,
      },
    ],
    []
  )

  return (
    <List>
      <DataGrid
        {...dataGridProps}
        columns={columns}
        onRowClick={(param: GridRowParams<Project>) =>
          go({
            to: {
              resource: 'translations',
              action: 'list',
              meta: { projectName: param.row.name },
            },
          })
        }
        hideFooter={true}
      />
    </List>
  )
}

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid'
import { useGo } from '@refinedev/core'
import { EditButton, List, useDataGrid } from '@refinedev/mui'
import { useMemo } from 'react'

export const ProjectList = () => {
  const { dataGridProps } = useDataGrid<Project>({
    pagination: { mode: 'off' },
  })
  const go = useGo()

  const columns = useMemo<GridColDef<Project>[]>(
    () => [
      { field: 'name', headerName: 'Project', flex: 1 },
      {
        field: 'locales',
        headerName: 'Locales',
        flex: 1,
        valueFormatter: ({ value }) => value.map((locale: string) => locale).join(', '),
      },
      {
        field: 'edit',
        headerName: 'Edit',
        sortable: false,
        renderCell: ({ row }) => {
          return (
            <div
              onClick={event => {
                event.stopPropagation()
              }}
            >
              <EditButton hideText recordItemId={row.id} />
            </div>
          )
        },
        align: 'center',
        headerAlign: 'center',
        width: 60,
      },
    ],
    []
  )

  return (
    <List>
      <DataGrid
        {...dataGridProps}
        columns={columns}
        onRowClick={(param: GridRowParams<Project>) =>
          go({
            to: {
              resource: 'translations',
              action: 'list',
              meta: { projectName: param.row.name },
            },
          })
        }
        hideFooter={true}
      />
    </List>
  )
}

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid'
import { useGo } from '@refinedev/core'
import { EditButton, List, useDataGrid } from '@refinedev/mui'
import { useMemo } from 'react'

export const ProjectList = () => {
  const { dataGridProps } = useDataGrid<Project>({
    pagination: { mode: 'off' },
  })
  const go = useGo()

  const columns = useMemo<GridColDef<Project>[]>(
    () => [
      { field: 'name', headerName: 'Project', flex: 1 },
      {
        field: 'locales',
        headerName: 'Locales',
        flex: 1,
        valueFormatter: ({ value }) => value.map((locale: string) => locale).join(', '),
      },
      {
        field: 'edit',
        headerName: 'Edit',
        sortable: false,
        renderCell: ({ row }) => {
          return (
            <div
              onClick={event => {
                event.stopPropagation()
              }}
            >
              <EditButton hideText recordItemId={row.id} />
            </div>
          )
        },
        align: 'center',
        headerAlign: 'center',
        width: 60,
      },
    ],
    []
  )

  return (
    <List>
      <DataGrid
        {...dataGridProps}
        columns={columns}
        onRowClick={(param: GridRowParams<Project>) =>
          go({
            to: {
              resource: 'translations',
              action: 'list',
              meta: { projectName: param.row.name },
            },
          })
        }
        hideFooter={true}
      />
    </List>
  )
}

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid'
import { useGo } from '@refinedev/core'
import { EditButton, List, useDataGrid } from '@refinedev/mui'
import { useMemo } from 'react'

export const ProjectList = () => {
  const { dataGridProps } = useDataGrid<Project>({
    pagination: { mode: 'off' },
  })
  const go = useGo()

  const columns = useMemo<GridColDef<Project>[]>(
    () => [
      { field: 'name', headerName: 'Project', flex: 1 },
      {
        field: 'locales',
        headerName: 'Locales',
        flex: 1,
        valueFormatter: ({ value }) => value.map((locale: string) => locale).join(', '),
      },
      {
        field: 'edit',
        headerName: 'Edit',
        sortable: false,
        renderCell: ({ row }) => {
          return (
            <div
              onClick={event => {
                event.stopPropagation()
              }}
            >
              <EditButton hideText recordItemId={row.id} />
            </div>
          )
        },
        align: 'center',
        headerAlign: 'center',
        width: 60,
      },
    ],
    []
  )

  return (
    <List>
      <DataGrid
        {...dataGridProps}
        columns={columns}
        onRowClick={(param: GridRowParams<Project>) =>
          go({
            to: {
              resource: 'translations',
              action: 'list',
              meta: { projectName: param.row.name },
            },
          })
        }
        hideFooter={true}
      />
    </List>
  )
}

MUI DataGrid no longer horizontally scaling

Similar Threads

Similar Threads

Similar Threads