Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
@ag-grid-enterprise/row-grouping
Advanced tools
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@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.
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));
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 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 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.
This project contains AG Grid Enterprise features.
See www.ag-grid.com for an overview and full documentation.
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
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 accounts@ag-grid.com with your license key
FAQs
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
The npm package @ag-grid-enterprise/row-grouping receives a total of 170,689 weekly downloads. As such, @ag-grid-enterprise/row-grouping popularity was classified as popular.
We found that @ag-grid-enterprise/row-grouping demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.