像 Excel 一样聚合数据，但更简单！

如果您曾经使用过数据密集的网格，那么您就会明白，最终用户能够设置不同的数据视角以收集他们正在寻找的信息是多么重要。像筛选和排序这样的基本功能几乎无法满足他们的需求。

Premium Data Grid 旨在支持和增强数据分析的高级用例。秉承这一精神，我们非常高兴地宣布，从 v5.15.0 版本开始，您现在可以使用聚合函数，只需点击几下，即可提取诸如求和、 平均值 、计数等信息。

等等，什么是聚合函数？

聚合函数用于根据给定列的值返回计算结果。例如，您可能有一个金融交易列表，并且您想要获得所有交易的总和并在摘要行中显示它，如下面的视频所示

直观的最终用户体验

在摘要行中显示总计的 Sum 函数是最常见的用例之一。但是用户可以在不同的列中同时使用多个聚合函数，甚至可以与行分组结合使用，以聚合每个组中子项的数据。

为了使所有这些功能协同工作，我们知道重点必须放在创建最佳的最终用户体验上。目标是开箱即用地启用大多数用例，而无需进行任何重大自定义。

获取每个用户的平均交易价值有多容易？观看下面的视频，了解它的实际应用

自定义一切

开箱即用的体验对我们来说非常重要，但同样重要的是能够自定义和扩展该功能以适应您自己的用例。

您可以更改所涉及的每个元素的样式，设置自动聚合，选择哪些列可以通过哪些函数进行聚合，甚至创建您自己的自定义函数。在下面的示例中，我们创建了一个函数来获取按字母顺序的第一个值

const firstAlphabeticalAggregation: GridAggregationFunction<
  string,
  string | null
> = {
  apply: (params) => {
    if (params.values.length === 0) {
      return null;
    }
    const sortedValue = params.values.sort((a = '', b = '') =>
      a.localeCompare(b),
    );
    return sortedValue[0];
  },
  // The `label` defines what's displayed in the column header when this
  // aggregation is active.
  label: 'First Alphabetical',
  // The `types` property defines which type of columns can use this
  // aggregation function. Here, we only want to propose this aggregation
  // function for `string` columns. If not defined, aggregation will be
  // available for all column types.
  columnTypes: ['string'],
};

好的，我明白了！如何开始使用？

聚合函数在 @mui/x-data-grid-premium 版本 5.15.0 或更高版本中可用。

此功能目前被认为是实验性的，因为我们将继续验证其 API 并完善我们对其的目标。但它很稳定，API 很可能不会发生重大变化。

您可以使用 experimentalFeatures prop 激活该功能

<DataGridPremium experimentalFeatures={{ aggregation: true }} {...otherProps} />

就是这样！这将在列菜单上启用 Aggregation 选项，默认情况下，该选项在数字和字符串类型的列上可用。

与树状数据等一起使用

我们已经提到您可以自定义函数并将聚合与行分组一起使用。但是还有很多其他的可能性可以探索！

请查看该功能的完整文档，以更好地了解它提供的所有功能。

行固定

聚合页脚行由另一个名为行固定的新功能提供支持。它使您可以将行固定到数据网格的顶部或底部。当用户垂直滚动网格时，固定的行始终可见。

行固定在 Pro 和 Premium Data Grids 中可用。

在行固定文档中查看更多详细信息。

如果您感到慷慨，我们正在招募用户进行访谈！

我们希望您和我们一样对新功能感到兴奋！

与往常一样，我们很高兴收到您的来信。请随时提出新的 issue 以报告错误或建议改进。

此外，我们正在计划 MUI X v6，我们很乐意听到更多关于您的痛点和用例的信息。如果您想帮助指导我们组件的方向，请考虑联系我们以安排 30 分钟的用户访谈。