MUI X Data Grid：如何设置初始可见列并实现后续切换

问题原因 #

你直接传递了一个静态常量对象给columnVisibilityModel，React无法追踪这个对象的变化，当你在列管理中切换可见性时，组件感知不到状态更新，所以勾选/取消勾选操作没有效果。

解决方案 #

把visibleColumns转换成React状态（使用useState），并通过onColumnVisibilityModelChange回调同步状态更新，实现双向绑定：

修改后的代码 #

import { useState } from 'react';
// 其他导入保持不变

function DataGridDemo() {
  // 将初始可见性设置为React状态
  const [visibleColumns, setVisibleColumns] = useState({
    id: true,
    name: true,
    publisher: false,
    stickerCount: false,
    createdAt: false,
    createdBy: false,
    updatedAt: false,
    stickersCount: false,
    view: false,
  });

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        apiRef={apiRef}
        rows={rows}
        columns={columns} // 注意：若你的列定义是simpleColumns，请替换为对应变量
        loading={isLoading || rows.length === 0}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
          sorting: {
            sortModel: [
              {
                field: 'createdAt',
                sort: 'asc',
              },
            ],
          }
        }}
        // 绑定状态到列可见性模型
        columnVisibilityModel={visibleColumns}
        // 监听可见性变化，实时更新状态
        onColumnVisibilityModelChange={setVisibleColumns}
      />
    </Box>
  );
}

export default DataGridDemo;

关键说明 #

• 使用useState将列可见性设置为可追踪的状态，确保React能感知到变化
• onColumnVisibilityModelChange会在列管理切换时触发，同步更新状态，让DataGrid实时响应可见性变化
• 初始状态里设置的true/false会直接生效，满足你初始仅显示少数列的需求

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