@ag-grid-enterprise/row-grouping

What is @ag-grid-enterprise/row-grouping?

@ag-grid-enterprise/row-grouping is an npm package that provides advanced row grouping functionalities for ag-Grid, a popular JavaScript data grid. It allows users to group rows by specific columns, aggregate data, and customize the grouping behavior to suit various data visualization needs.

What are @ag-grid-enterprise/row-grouping's main functionalities?

Basic Row Grouping

This code demonstrates basic row grouping by the 'country' column. The 'country' column is set to group rows, and the grid is populated with data fetched from a server.

const gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { field: 'age' },
    { field: 'country', rowGroup: true },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' }
  ],
  defaultColDef: {
    sortable: true,
    filter: true
  },
  autoGroupColumnDef: {
    headerName: 'Group',
    field: 'athlete',
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      checkbox: true
    }
  },
  rowData: null
};

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

// fetch data from server
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
  .then(response => response.json())
  .then(data => gridOptions.api.setRowData(data));

Custom Aggregation

This code demonstrates custom aggregation functions. The 'age' column uses the 'avg' aggregation function, while the 'gold', 'silver', and 'bronze' columns use the 'sum' aggregation function.

const gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { field: 'age', aggFunc: 'avg' },
    { field: 'country', rowGroup: true },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold', aggFunc: 'sum' },
    { field: 'silver', aggFunc: 'sum' },
    { field: 'bronze', aggFunc: 'sum' }
  ],
  defaultColDef: {
    sortable: true,
    filter: true
  },
  autoGroupColumnDef: {
    headerName: 'Group',
    field: 'athlete',
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      checkbox: true
    }
  },
  rowData: null
};

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

// fetch data from server
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
  .then(response => response.json())
  .then(data => gridOptions.api.setRowData(data));

Custom Grouping

This code demonstrates custom grouping with the 'groupDefaultExpanded' property set to 1, which means that the first level of groups will be expanded by default.

const gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { field: 'age' },
    { field: 'country', rowGroup: true },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' }
  ],
  defaultColDef: {
    sortable: true,
    filter: true
  },
  autoGroupColumnDef: {
    headerName: 'Group',
    field: 'athlete',
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      checkbox: true
    }
  },
  groupDefaultExpanded: 1,
  rowData: null
};

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

// fetch data from server
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
  .then(response => response.json())
  .then(data => gridOptions.api.setRowData(data));

Other packages similar to @ag-grid-enterprise/row-grouping

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It provides basic row grouping functionalities through plugins. Compared to @ag-grid-enterprise/row-grouping, react-table is more lightweight and flexible but may require more custom coding for advanced features.

handsontable

handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It supports row grouping, sorting, and filtering. Compared to @ag-grid-enterprise/row-grouping, handsontable offers a more Excel-like experience but may not be as feature-rich in terms of customization and performance.

devextreme-react

devextreme-react is a set of high-performance data grid components for React. It includes advanced row grouping, sorting, and filtering functionalities. Compared to @ag-grid-enterprise/row-grouping, devextreme-react offers a comprehensive suite of UI components but may have a steeper learning curve.

README

AG Grid Enterprise

This project contains AG Grid Enterprise features.

See www.ag-grid.com for an overview and full documentation.

Frameworks Supported

Framework specific Getting Started guides:

Angular | Javascript | React | TypeScript | VueJS

This is not free software, this software is covered by copyright and to use you need a commercial license.

Please see files: LICENSE.md SUPPORT_AND_MAINTENANCE.md

Issue Reporting

If you are an Enterprise customer (or are evaluating AG Grid Enterprise) and wish to report a Bug or raise a new Feature Request please do so on our Support Portal.

To Sign Up: Send an email to [e-mail] with your license key