如何在MUI-X DataGrid中制作带图标的自定义SingleSelect（类似国家列）

实现思路 #

要实现带图标的单选列和筛选区带图标的下拉选项，核心是完成两个自定义渲染：单元格内容渲染、筛选下拉选项渲染。以下是完整实现代码：

完整示例代码 #

import React from 'react';
import { DataGrid, GridColDef, SingleSelectFilter } from '@mui/x-data-grid';
import { Box, Typography } from '@mui/material';
// 导入所需图标（示例用MUI内置图标，可替换为自定义图标）
import FlagIconUSA from '@mui/icons-material/Flag';
import FlagIconCanada from '@mui/icons-material/FlagOutlined';
import FlagIconMexico from '@mui/icons-material/FlagCircle';

// 定义数据源类型
interface Country {
  id: number;
  name: string;
  icon: React.ReactNode;
}

// 模拟数据源
const rows: Country[] = [
  { id: 1, name: 'United States', icon: <FlagIconUSA sx={{ color: '#B22234' }} /> },
  { id: 2, name: 'Canada', icon: <FlagIconCanada sx={{ color: '#C8102E' }} /> },
  { id: 3, name: 'Mexico', icon: <FlagIconMexico sx={{ color: '#006847' }} /> },
  { id: 4, name: 'United States', icon: <FlagIconUSA sx={{ color: '#B22234' }} /> },
];

// 筛选选项列表（与数据源匹配）
const countryOptions = rows.map(row => ({
  value: row.name,
  label: row.name,
  icon: row.icon,
}));

// 自定义筛选选项渲染函数
const renderFilterOption = (option: { value: string; label: string; icon: React.ReactNode }) => (
  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
    {option.icon}
    <Typography variant="body2">{option.label}</Typography>
  </Box>
);

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  {
    field: 'country',
    headerName: 'Country',
    width: 200,
    // 单元格渲染：显示图标+文本
    renderCell: (params) => (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        {params.row.icon}
        <Typography variant="body2">{params.row.name}</Typography>
      </Box>
    ),
    // 配置单选筛选器
    filterOperators: [
      {
        ...SingleSelectFilter,
        // 自定义筛选下拉选项
        options: countryOptions,
        renderOption: renderFilterOption,
      },
    ],
    // 设置筛选类型为单选
    filter: 'singleSelect',
  },
];

export default function DataGridWithIconSelect() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          filter: {
            filterModel: { items: [] },
          },
        }}
      />
    </Box>
  );
}

关键说明 #

• 单元格渲染：通过renderCell属性，用Box包裹图标和文本，实现行内带图标的显示效果。
• 筛选下拉自定义：在列的filterOperators中扩展SingleSelectFilter，通过renderOption自定义每个筛选选项的渲染逻辑，实现带图标的下拉选项。
• 图标替换：示例中使用MUI内置图标，可替换为自定义SVG图标或第三方图标库组件，只需修改rows中的icon字段即可。

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