求助：如何基于MUI X Data Grid实现列选择与高亮功能？

当然有不少开发者实现过这个功能，下面是一套简洁可行的实现方案，基于MUI X Data Grid的原生API和React状态管理就能搞定：

• 维护选中列状态
  用React的useState存储当前选中的列字段名，初始值设为null表示无选中列。

• 配置列定义与动态样式
  在columnDefs中给每个列添加cellClassName属性，根据当前选中列是否匹配该列field来动态添加高亮类；同时给列头绑定onClick事件，触发选中列的更新逻辑。

• 自定义高亮样式
  编写CSS类定义高亮时的单元格、表头样式，可根据需求调整颜色、透明度等。

完整代码示例 #

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import './ColumnHighlight.css';

// 示例数据
const rows = [
  { id: 1, name: 'John Doe', age: 35, email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', age: 28, email: 'jane@example.com' },
  { id: 3, name: 'Bob Brown', age: 42, email: 'bob@example.com' },
];

const ColumnHighlightDemo = () => {
  const [selectedColumn, setSelectedColumn] = useState(null);

  const columnDefs = [
    { 
      field: 'name', 
      headerName: 'Name', 
      width: 150,
      cellClassName: (params) => params.field === selectedColumn ? 'highlight-column' : '',
      headerClassName: (params) => params.field === selectedColumn ? 'highlight-header' : '',
      onClick: () => setSelectedColumn(selectedColumn === 'name' ? null : 'name')
    },
    { 
      field: 'age', 
      headerName: 'Age', 
      width: 100,
      cellClassName: (params) => params.field === selectedColumn ? 'highlight-column' : '',
      headerClassName: (params) => params.field === selectedColumn ? 'highlight-header' : '',
      onClick: () => setSelectedColumn(selectedColumn === 'age' ? null : 'age')
    },
    { 
      field: 'email', 
      headerName: 'Email', 
      width: 250,
      cellClassName: (params) => params.field === selectedColumn ? 'highlight-column' : '',
      headerClassName: (params) => params.field === selectedColumn ? 'highlight-header' : '',
      onClick: () => setSelectedColumn(selectedColumn === 'email' ? null : 'email')
    },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columnDefs}
        disableRowSelectionOnClick
      />
    </div>
  );
};

export default ColumnHighlightDemo;

高亮样式文件（ColumnHighlight.css） #

.highlight-column {
  background-color: rgba(255, 215, 0, 0.2); /* 浅黄色高亮，可自定义 */
}

.highlight-header {
  background-color: rgba(255, 215, 0, 0.3); /* 表头稍深的高亮效果 */
}

额外说明 #

• 如果需要支持多列选中，只需把selectedColumn改成数组类型，点击时判断字段是否在数组中，执行添加/移除操作即可。
• 高亮样式完全可自定义，比如修改字体颜色、添加边框等，适配项目设计风格。
• 添加disableRowSelectionOnClick属性是为了避免点击列头时触发行选中，确保只有列高亮逻辑生效。

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