ag-Grid

ag-Grid 是一个企业级的 JavaScript 表格库。提供免费版和收费版。

'ag' stands for "agnostic".

• Getting Started

Overview

• Overview: https://www.ag-grid.com/javascript-data-grid/reference/

Grid

• Options: https://www.ag-grid.com/javascript-data-grid/grid-options/
• Events: https://www.ag-grid.com/javascript-data-grid/grid-events/
• API: https://www.ag-grid.com/javascript-data-grid/grid-api/

Pivoting

Pivot mode

Pivot 模式是基于表格已有的列和数据，按照配置的方式重新展示。主要对列进行聚合。

• Primary Columns：普通模式下定义的列

• Secondary Columns：Pivot 模式下展示的，the pivot columns and the aggregated value columns

一些具有特定功能的列

• Group columns：rowGroup: true 的列，进行分组

• Pivot columns：pivot: true 的列，用于 pivot 模式列的合并

• Value columns: 具有 aggFunc 属性的列，计算值后展示

Simple example

const gridOptions = {
  columnDefs: [
    { field: 'year', pivot: true },
    { field: 'country', rowGroup: true },
    { field: 'year', rowGroup: true },
    { field: 'gold', aggFunc: 'sum' },
    { field: 'silver', aggFunc: 'max' },
    { field: 'bronze', aggFunc: 'min' },
  ],
  pivotMode: true, 
  rowData: [
    { country: 'USA', year: 2000, gold: 10, silver: 10 },
    { country: 'USA', year: 2001, gold: 20, bronze: 5 },
    { country: 'UK', year: 2000, gold: 10, silver: 20 },
    { country: 'UK', year: 2001, gold: 22 },
    { country: 'CHN', year: 2000, gold: 10 },
    { country: 'CHN', year: 2001, gold: 22 },
  ],
}

Cell Renderer

Get cell renderer instance, then you can get eGui, ... to manipulate dom elements.

// example - get cell renderer for first row and column 'gold'
const firstRowNode = api.getDisplayedRowAtIndex(0);
const params = { columns: ['gold'], rowNodes: [firstRowNode] };
const instances = api.getCellRendererInstances(params);

if (instances.length > 0) {
    // got it, user must be scrolled so that it exists
    const instance = instances[0];
}

https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/#accessing-cell-renderer-instances