如何为移动端视口更改MUI DataGrid显示模式

一、MUI DataGrid 社区版的实现方案 #

MUI DataGrid 社区版**没有原生支持移动端行列布局切换（比如从横向表格转为竖排明细/卡片样式）**的功能，默认仅提供横向滚动适配小屏幕。你可以通过以下自定义方式实现需求：

1. 基于视口动态切换组件 #

利用MUI的useMediaQuery监听屏幕尺寸，在移动端渲染自定义的竖排列表，桌面端保留DataGrid组件，这种方式成本低且可控性强：

import { useMediaQuery, useTheme } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

const ResponsiveTable = ({ rows, columns }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  if (isMobile) {
    return (
      <div style={{ gap: '16px', padding: '8px' }}>
        {rows.map(row => (
          <div key={row.id} style={{ padding: '12px', border: '1px solid #eee', borderRadius: '8px' }}>
            {columns.map(col => (
              <div key={col.field} style={{ margin: '8px 0' }}>
                <span style={{ fontWeight: 500, marginRight: '8px' }}>{col.headerName}:</span>
                <span>{row[col.field]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

  return <DataGrid rows={rows} columns={columns} autoHeight />;
};

2. 自定义单元格渲染（进阶） #

如果想在DataGrid框架内调整移动端显示，可以通过renderCell自定义列内容，同时隐藏非必要列，但这种方式仅适合简单的折叠显示，无法完全改成竖排布局：

const columns = [
  {
    field: 'fullDetail',
    headerName: '详情',
    renderCell: (params) => (
      <div>
        <p>姓名: {params.row.name}</p>
        <p>邮箱: {params.row.email}</p>
        <p>电话: {params.row.phone}</p>
      </div>
    ),
    hide: !isMobile,
  },
  { field: 'name', headerName: '姓名', hide: isMobile },
  { field: 'email', headerName: '邮箱', hide: isMobile },
];

二、支持移动端布局切换的替代表格组件 #

如果不想自定义开发，以下组件原生支持响应式布局切换（自动适配移动端竖排/卡片模式）：

• MUI X DataGrid Pro版：Pro版提供detailPanel和更灵活的响应式配置，可实现移动端布局切换，不过需要付费。
• TanStack Table（原React Table v8）：轻量级高自由度表格库，结合CSS框架可快速实现视口驱动的布局切换，社区示例丰富。
• Ant Design Table：内置responsive属性，可配置在移动端自动隐藏列或切换为卡片式显示，文档有完整的响应式适配示例。

总结 #

MUI DataGrid社区版无原生移动端行列切换功能，需通过动态切换组件的方式自定义实现；若想降低开发成本，可考虑切换到上述支持响应式布局的表格组件。

内容的提问来源于stack exchange，提问作者Zohreh Khaghani