数据透视是一种强大的数据处理和分析工具，可以帮助用户更清晰地了解数据的分布和关系。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', region: 'North', sales: 200 },
  { id: 2, category: 'Electronics', product: 'Laptop', region: 'North', sales: 500 },
  { id: 3, category: 'Home Appliances', product: 'Refrigerator', region: 'South', sales: 300 },
  { id: 4, category: 'Home Appliances', product: 'Washing Machine', region: 'South', sales: 400 },
  { id: 5, category: 'Furniture', product: 'Sofa', region: 'East', sales: 700 },
  { id: 6, category: 'Furniture', product: 'Table', region: 'West', sales: 200 },
];

2.2 列定义

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

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

3. 使用 Data Grid 实现数据透视

3.1 启用透视功能

要实现透视功能，我们可以通过分组和聚合数据的方式来实现。在 Data Grid 中，我们可以使用 groupBy 属性进行数据分组，同时使用自定义聚合方法来计算汇总值。

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

const PivotedDataGrid = () => {
  const aggregatedRows = calculateAggregates(rows);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={aggregatedRows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default PivotedDataGrid;

3.2 自定义聚合函数

为了计算不同类型的聚合，我们可以自定义聚合函数。例如，可以计算每个类别和区域的总销售额。

const calculateAggregates = (rows) => {
  const aggregates = {};
  
  rows.forEach((row) => {
    const key = `${row.category}-${row.region}`;
    if (!aggregates[key]) {
      aggregates[key] = { ...row, sales: 0 };
    }
    aggregates[key].sales += row.sales;
  });

  return Object.values(aggregates).map((item) => ({
    id: `${item.category}-${item.region}`,
    category: item.category,
    region: item.region,
    sales: item.sales,
  }));
};

在这个示例中，我们计算了每个类别和区域的总销售额，并将其显示在 Data Grid 中。

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 FilteredPivotedDataGrid = () => {
  const [filterText, setFilterText] = useState('');

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

  const aggregatedRows = calculateAggregates(filteredRows);

  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={aggregatedRows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default FilteredPivotedDataGrid;

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

4.2 显示透视摘要

可以在表格下方显示透视摘要，帮助用户快速了解数据的整体情况。

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

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

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

  const aggregatedRows = calculateAggregates(filteredRows);
  const totalSales = calculateTotalSales(aggregatedRows);

  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={aggregatedRows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
      <div>Total Sales: {totalSales}</div>
    </div>
  );
};

在这个示例中，我们计算了透视后的总销售额，并在表格下方显示。

5. 属性和方法总结

5.1 主要属性

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

5.2 主要方法

• calculateAggregates: 自定义聚合计算方法。
• calculateTotalSales: 计算总销售额的方法。

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', region: 'North', sales: 200 },
  { id: 2, category: 'Electronics', product: 'Laptop', region: 'North', sales: 500 },
  { id: 3, category: 'Home Appliances', product: 'Refrigerator', region: 'South', sales: 300 },
  { id: 4, category: 'Home Appliances', product: 'Washing Machine', region: 'South', sales: 400 },
  { id: 5, category: 'Furniture', product: 'Sofa', region: 'East', sales: 700 },
  { id: 6, category: 'Furniture', product: 'Table', region: 'West', sales: 200 },
];

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

const calculateAggregates = (rows) => {
  const aggregates = {};
  
  rows.forEach((row) => {
    const key = `${row.category}-${row.region}`;
    if (!aggregates[key]) {
      aggregates[key] = { ...row, sales: 0 };
    }
    aggregates[key].sales += row.sales;
  });

  return Object.values(aggregates).map((item) => ({
    id: `${item.category}-${item.region}`,
    category: item.category,
    region: item.region,
    sales: item.sales,
  }));
};

const calculateTotalSales = (rows) => {
 

 return rows.reduce((total, row) => total + row.sales, 0);
};

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

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

  const aggregatedRows = calculateAggregates(filteredRows);
  const totalSales = calculateTotalSales(aggregatedRows);

  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={aggregatedRows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
      <div>Total Sales: {totalSales}</div>
    </div>
  );
};

export default FilteredPivotedDataGrid;

结论

Material UI 的 Data Grid 组件通过数据透视功能使得数据的分析和展示变得更加高效。在本文中，我们探讨了如何设置透视、定制聚合计算、结合筛选功能以及显示透视摘要等。希望本文能帮助你更好地理解和使用 Data Grid 的透视功能，提升你的应用程序的用户体验。