行分组（Row Grouping）是一种用于组织和汇总数据的强大功能，能够帮助用户更好地理解和分析复杂数据集。Material UI 的 Data Grid 组件提供了行分组的支持，使得数据的展示更加清晰、直观。本文将详细介绍如何使用 Data Grid 的行分组特性，包括所有相关属性和方法，并结合其他组件提供丰富的示例代码。

1. 安装 Material UI 和 Data Grid

在开始之前，确保你已安装 Material UI 和 Data Grid。可以使用以下命令进行安装：

npm install @mui/material @mui/x-data-grid

同时还需要安装 @mui/icons-material，以便使用图标。

npm install @mui/icons-material

2. 行分组的基本用法

2.1 数据结构

首先，我们需要准备一组数据。在此示例中，我们将使用销售数据，包括产品类别、产品名称和销售额等信息。

const rows = [
  { id: 1, category: 'Electronics', product: 'Smartphone', sales: 200 },
  { id: 2, category: 'Electronics', product: 'Laptop', sales: 500 },
  { id: 3, category: 'Home Appliances', product: 'Refrigerator', sales: 300 },
  { id: 4, category: 'Home Appliances', product: 'Washing Machine', sales: 400 },
  { id: 5, category: 'Furniture', product: 'Sofa', sales: 700 },
  { id: 6, category: 'Furniture', product: 'Table', sales: 200 },
];

2.2 列定义

接下来，我们定义列，以便在 Data Grid 中显示我们的数据。这里我们将定义类别、产品和销售额列。

const columns = [
  { field: 'category', headerName: 'Category', flex: 1 },
  { field: 'product', headerName: 'Product', flex: 1 },
  { field: 'sales', headerName: 'Sales', type: 'number', flex: 1 },
];

3. 使用 Data Grid 实现行分组

3.1 启用行分组

要启用行分组，只需在 Data Grid 中设置 groupingColDef 属性来指定分组的列。我们还可以设置 grouping 属性来启用行分组功能。

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const GroupedDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        groupingColDef={{ field: 'category' }} // 指定分组的列
        groupBy={['category']} // 启用分组
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default GroupedDataGrid;

在这个示例中，我们使用 groupBy 属性将行按类别分组，展示了每个类别下的产品及其销售额。

3.2 自定义分组头部

为了提高用户体验，我们可以自定义分组头部的渲染方式，以显示更多信息或应用不同的样式。

const groupHeaderRenderer = (params) => {
  return (
    <strong>
      {params.value} (Total Sales: {params.api.getRowGroupData(params.id, 'sales')})
    </strong>
  );
};

// 在 DataGrid 中使用自定义分组头部渲染
<DataGrid
  rows={rows}
  columns={columns}
  groupingColDef={{ field: 'category', renderCell: groupHeaderRenderer }} // 使用自定义渲染
  groupBy={['category']}
/>

在这个示例中，groupHeaderRenderer 方法用于定制分组头部的显示格式，并且添加了该组的总销售额。

4. 结合其他组件使用

4.1 添加筛选功能

在使用行分组的同时，我们可以添加筛选功能，以便用户能够快速找到感兴趣的数据。可以结合 Material UI 的 TextField 组件实现筛选。

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

const FilteredGroupedDataGrid = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    row.product.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <TextField
        label="Filter by Product"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
        style={{ marginBottom: '16px' }}
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        groupingColDef={{ field: 'category' }}
        groupBy={['category']}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default FilteredGroupedDataGrid;

在这个示例中，我们使用 TextField 组件提供了筛选功能，允许用户根据产品名称过滤显示的行。

4.2 添加汇总行

如果需要显示每个组的汇总信息，可以通过设置 getRowHeight 方法自定义行高，并添加汇总行。

const getTotalSalesByCategory = (category) => {
  return rows
    .filter((row) => row.category === category)
    .reduce((total, row) => total + row.sales, 0);
};

// 添加汇总行
const summarizedRows = [
  ...rows,
  ...new Set(rows.map((row) => ({
    id: `total-${row.category}`,
    category: row.category,
    product: 'Total',
    sales: getTotalSalesByCategory(row.category),
  }))),
];

<DataGrid
  rows={summarizedRows}
  columns={columns}
  groupingColDef={{ field: 'category' }}
  groupBy={['category']}
/>

在这个示例中，我们计算每个类别的总销售额，并在 Data Grid 中添加汇总行。

5. 属性和方法总结

5.1 主要属性

• rows: 数据源，数组格式。
• columns: 列定义，数组格式。
• groupingColDef: 指定分组列的定义。
• groupBy: 启用分组的列。
• pageSize: 每页显示的行数。
• rowsPerPageOptions: 可选择的每页行数选项。

5.2 主要方法

• getRowGroupData: 获取分组数据的方法。

6. 完整示例

以下是结合所有功能的完整示例代码：

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

const rows = [
  { id: 1, category: 'Electronics', product: 'Smartphone', sales: 200 },
  { id: 2, category: 'Electronics', product: 'Laptop', sales: 500 },
  { id: 3, category: 'Home Appliances', product: 'Refrigerator', sales: 300 },
  { id: 4, category: 'Home Appliances', product: 'Washing Machine', sales: 400 },
  { id: 5, category: 'Furniture', product: 'Sofa', sales: 700 },
  { id: 6, category: 'Furniture', product: 'Table', sales: 200 },
];

const columns = [
  { field: 'category', headerName: 'Category', flex: 1 },
  { field: 'product', headerName: 'Product', flex: 1 },
  { field: 'sales', headerName: 'Sales', type: 'number', flex: 1 },
];

const FilteredGroupedDataGrid = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    row.product.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <TextField
        label="Filter by Product"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
        style={{ marginBottom: '16px' }}
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        groupingColDef={{ field: 'category' }}
        groupBy={['category']}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default FilteredGroupedDataGrid;

结论

Material UI 的 Data Grid 组件通过行分组功能使得数据的组织和展示变得更加高效。在本文中，我们探讨了如何设置行分组、定制分组头部、结合

筛选功能以及添加汇总行等。希望本文能帮助你更好地理解和使用 Data Grid 的行分组功能，提升你的应用程序的用户体验。