AG 网格枢轴聚合为列

Question

我们在我们的应用程序中使用 AG Grid。

我们的 ui 组件如下

  public rowData = [
{ order: 1, amount: 100, model: "A"},
{ order: 2, amount: 200, model: "A"},
{ order: 3, amount: 100, model: "A"},
{ order: 4, amount: 200, model: "A"},
{ order: 5, amount: 100, model: "B"},
{ order: 6, amount: 200, model: "B"},
{ order: 7, amount: 100, model: "B"},
{ order: 8, amount: 100, model: "C"},
{ order: 9, amount: 100, model: "C"},
{ order: 10, amount: 200, model: "D"},
  ];

  public columnDefs: ColDef[] = [
{ field: 'model', pivot: true },
{ field: 'order', aggFunc: 'count' },
{ field: 'amount', aggFunc: 'sum' }
  ];

<div style="display: flex; flex-direction: column; height: 100%;">
<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [pivotMode]="true"
  [rowData]="rowData"
></ag-grid-angular>

通过使用它，我们希望向用户显示以下网格

我尝试过将枢轴放在模型上。我们能够生成以下内容

我也不确定如何转置。我们能得到一些帮助来解决这个问题吗

Plnkr - https://plnkr.co/edit/1bSu5mEhpUp9YIfw?open=app%2Fapp.component.ts

Answer 1

您可以通过在 ag-grid 中使用 header groups 来实现所需的结果。只需像这样定义您的列定义即可。

columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: 'A',
      headerClass: 'ag-right-aligned-header',
      children: [
        {
          headerName: 'COUNT',
          field: 'a_count',
          width: 150,
          cellClass: 'cellCenter'
        },
        {
          headerName: 'SUM',
          field: 'a_sum',
          width: 90,
          minWidth: 75,
          maxWidth: 100,
          cellClass: 'cellCenter'
        },
      ],
    },
    {
      headerName: 'B',
      children: [
        {
          headerName: 'COUNT',
          field: 'b_count',
          width: 150,
        },
        {
          headerName: 'SUM',
          field: 'b_sum',
          width: 90,
          minWidth: 75,
          maxWidth: 100,
        },
      ],
    },
  ];

然后像这样重构你的数据。

rowData = [
    // { section: 'sub-section', a: 'Count', c: 'Sum' },
    { a_count: 230, a_sum: 160, b_count: 233, b_sum: 330 },
    { a_count: 250, a_sum: 460, b_count: 213, b_sum: 690 },
    { a_count: 280, a_sum: 200, b_count: 633, b_sum: 560 },
    { a_count: 220, a_sum: 760, b_count: 453, b_sum: 990 },
  ];

我为您创建了一个 stckblitz 示例。只需添加垂直列边框。 如果有帮助，请投票/接受答案。