ag-Grid
2.28
ag-Grid 是一个企业级的 JavaScript 表格库。提供免费版和收费版。
'ag' stands for "agnostic".
Overview
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];
}
📖