conventional-tan•6mo ago

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

3 Replies

kapa.ai•6mo ago

Hi @PercivalFigaro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you are experiencing an issue with the horizontal scaling of the MUI DataGrid after a recent Chrome update. This could be related to how the DataGrid handles resizing events. Based on the provided code and the knowledge sources, here are a few suggestions to address this issue: 1. Ensure Flex Property is Correctly Applied: The flex property should be correctly applied to the columns that need to be flexible. Your code already does this, so this might not be the issue. 2. Check for CSS Issues: Sometimes, CSS can interfere with the resizing behavior. Ensure that there are no CSS rules that might be affecting the DataGrid's container or the DataGrid itself. 3. Use autoHeight Property: Ensure that the autoHeight property is set for the DataGrid. This property allows the DataGrid to automatically adjust its height based on the number of rows. While this primarily affects vertical scaling, it can sometimes help with overall responsiveness. 4. Force Update on Resize: You can add an event listener to force the DataGrid to update its layout when the window is resized. This can be done using a custom hook or directly within your component. Here is an updated version of your component with a resize event listener:

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid';
import { useGo } from '@refinedev/core';
import { EditButton, List, useDataGrid } from '@refinedev/mui';
import { useMemo, useEffect } 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,
      },
    ],
    []
  );

  useEffect(() => {
    const handleResize = () => {
      // Force DataGrid to re-render on window resize
      window.dispatchEvent(new Event('resize'));
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

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

import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid';
import { useGo } from '@refinedev/core';
import { EditButton, List, useDataGrid } from '@refinedev/mui';
import { useMemo, useEffect } 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,
      },
    ],
    []
  );

  useEffect(() => {
    const handleResize = () => {
      // Force DataGrid to re-render on window resize
      window.dispatchEvent(new Event('resize'));
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

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

This code adds a resize event listener that forces the DataGrid to re-render when the window is resized. This should help with the issue of the DataGrid not properly resizing when the browser window is reduced in size. For more information on the useDataGrid hook and its properties, you ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@286938231826808832> kapa.ai is still learning and improving, please let us know how it did by reacting below

conventional-tanOP•6mo ago

This did not solve it. Seems that the official examples using MUI's data grid are also broken