@ag-grid-enterprise/core

Filtering

This feature allows users to filter data in the grid based on various criteria. The code sample demonstrates how to set up different types of filters for columns.

const gridOptions = {
  columnDefs: [
    { field: 'athlete', filter: 'agTextColumnFilter' },
    { field: 'age', filter: 'agNumberColumnFilter' },
    { field: 'country', filter: 'agSetColumnFilter' }
  ],
  rowData: null
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);

Sorting

This feature allows users to sort data in the grid by clicking on the column headers. The code sample shows how to enable sorting for specific columns.

const gridOptions = {
  columnDefs: [
    { field: 'athlete', sortable: true },
    { field: 'age', sortable: true },
    { field: 'country', sortable: true }
  ],
  rowData: null
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);

Grouping

This feature allows users to group rows based on the values in a specific column. The code sample demonstrates how to enable row grouping for a column.

const gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { field: 'age' },
    { field: 'country', rowGroup: true }
  ],
  rowData: null,
  groupDefaultExpanded: 1
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);

Pivoting

This feature allows users to pivot data in the grid, transforming rows into columns based on the values in a specific column. The code sample shows how to enable pivot mode and set up a pivot column.

const gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { field: 'age' },
    { field: 'country', pivot: true }
  ],
  rowData: null,
  pivotMode: true
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);