Material UI Data Grid点击事件触发列隐藏的正确实现方式

你当前通过useState管理列配置、修改hide属性的方案是完全可用的，属于免费版支持的合法实现方式，不需要依赖付费版的专属功能。除此之外还有另一种更解耦的实现方案可选：

• 方案1：直接修改列配置的hide属性（当前方案）
  适合列配置不需要复用的场景，核心逻辑是把列定义存入响应式状态，触发单元格点击时更新对应列的hide值即可，参考代码：

  const [cols, setCols] = React.useState(columns);
  
  // 单元格点击事件回调
  const handleCellClick = (params) => {
    // 按需替换为你要隐藏的列field
    const targetColumnField = 'needHideColumn';
    setCols(prev => prev.map(col => 
      col.field === targetColumnField ? {...col, hide: true} : col
    ));
  };
  
  // DataGrid绑定配置
  <DataGrid
    columns={cols}
    rows={rows}
    onCellClick={handleCellClick}
    {/* 其他配置 */}
  />
  

• 方案2：独立维护列显隐状态（更推荐）
  从MUI DataGrid v5开始，免费版就支持columnVisibilityModel属性，不需要修改原始列配置，单独维护显隐状态即可，和列定义完全解耦，适合需要频繁切换列显隐的场景，参考代码：

  // 显隐模型中key为列field，value为true时显示、false时隐藏
  const [columnVisibility, setColumnVisibility] = React.useState({});
  
  const handleCellClick = (params) => {
    const targetColumnField = 'needHideColumn';
    setColumnVisibility(prev => ({...prev, [targetColumnField]: false}));
  };
  
  <DataGrid
    columns={columns}
    rows={rows}
    columnVisibilityModel={columnVisibility}
    onColumnVisibilityModelChange={setColumnVisibility}
    onCellClick={handleCellClick}
    {/* 其他配置 */}
  />
  

两种方案都不需要付费版支持，你可以根据自己的业务场景选择。

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