Я использую ag-grid-react в своем проекте реакции. Мне нужна таблица с функцией группировки строк, поэтому из официальной документации вот что я сделал.
const GRID_OPTIONS = {
defaultColDef: {
resizable: true,
suppressMovable: true
// suppressMenu: true
// unSortIcon: true
},
frameworkComponents: {
statusBar: StatusBar,
customEditor: CellEditor,
booleanFilter: BooleanFilter,
customRenderer: CellRenderer,
dateFilter: customDateFilter
},
suppressContextMenu: true,
autoHeight: true,
rowSelection: "multiple",
rowDeselection: true,
rowModelType: "serverSide",
cacheBlockSize: AppConstants.PAGE_SIZE,
paginationPageSize: AppConstants.PAGE_SIZE,
getRowNodeId: data => data.id,
overlayNoRowsTemplate: `<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">
No Data found
</span>`
};
const columnDefs = [
{
"field": "_",
"colId": "_",
"hide": true,
"lockVisible": true,
"filter": "agTextColumnFilter",
"filterParams": {
"newRowsAction": "keep"
}
},
{
"field": "controlHeading",
"colId": "controlHeading",
"headerName": "Control Heading",
"sortable": false,
"suppressMenu": true,
"rowGroup": true, // <== row group enabled here
"hide": true
},
{
"field": "siNo",
"colId": "siNo",
"headerName": "Si No",
"sortable": true,
"filter": "agNumberColumnFilter",
"filterParams": {
"clearButton": true
},
"pinned": ""
},
{
"field": "control",
"colId": "control",
"headerName": "Control",
"sortable": true,
"filter": "agSetColumnFilter",
"filterParams": {
"newRowsAction": "keep",
"clearButton": true,
"selectAllOnMiniFilter": true,
"syncValuesLikeExcel": true
},
"pinned": ""
},
{
"field": "checkGroup",
"colId": "checkGroup",
"headerName": "Check Group",
"sortable": true,
"filter": "agSetColumnFilter",
"filterParams": {
"newRowsAction": "keep",
"clearButton": true,
"selectAllOnMiniFilter": true,
"syncValuesLikeExcel": true
},
"pinned": ""
}
]
...
<div className="ag-theme-material gridSize">
<AgGridReact
reactNext={true}
onCellValueChanged={onCellValueChanged}
onGridReady={onGridReady}
columnDefs={columnDefs}
pagination={true}
onSelectionChanged={onRowSelect}
{...GRID_OPTIONS}
></AgGridReact>
</div>
Ответ API:
[
{
"id": "5f20fb0bbb4d0700013096c3",
"cloudName": "AWS",
"control": "Ensure CloudTrail is enabled in all regions (Scored)",
"controlHeading": "Logging",
"siNo": 2.1,
"checkGroup": "CloudTrail Enabled",
"yes": 2,
"no": 1,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c4",
"cloudName": "AWS",
"control": "Ensure CloudTrail log file validation is enabled (Scored)",
"controlHeading": "Logging",
"siNo": 2.2,
"checkGroup": "CloudTrail File Validation",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c5",
"cloudName": "AWS",
"control": "Ensure the S3 bucket used to store CloudTrail logs is not publicly accessible (Scored)",
"controlHeading": "Logging",
"siNo": 2.3,
"checkGroup": "CloudTrail Bucket Private",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c6",
"cloudName": "AWS",
"control": "Ensure CloudTrail trails are integrated with CloudWatch Logs (Scored)",
"controlHeading": "Logging",
"siNo": 2.4,
"checkGroup": "CloudTrail To CloudWatch",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c7",
"cloudName": "AWS",
"control": "Ensure AWS Config is enabled in all regions (Scored)",
"controlHeading": "Logging",
"siNo": 2.5,
"checkGroup": "Config Service Enabled",
"yes": 2,
"no": 1,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c8",
"cloudName": "AWS",
"control": "Ensure S3 bucket access logging is enabled on the CloudTrail S3 bucket (Scored)",
"controlHeading": "Logging",
"siNo": 2.6,
"checkGroup": "CloudTrail Bucket Access Logging",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096c9",
"cloudName": "AWS",
"control": "Ensure CloudTrail logs are encrypted at rest using KMS CMKs (Scored)",
"controlHeading": "Logging",
"siNo": 2.7,
"checkGroup": "CloudTrail Encryption",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096ca",
"cloudName": "AWS",
"control": "Ensure rotation for customer created CMKs is enabled (Scored)",
"controlHeading": "Logging",
"siNo": 2.8,
"checkGroup": "KMS Key Rotation",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096cb",
"cloudName": "AWS",
"control": "Ensure VPC flow logging is enabled in all VPCs (Scored)",
"controlHeading": "Logging",
"siNo": 2.9,
"checkGroup": "VPC Flow Logs Enabled",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
},
{
"id": "5f20fb0bbb4d0700013096da",
"cloudName": "AWS",
"control": "Ensure no security groups allow ingress from 0.0.0.0/0 to port 22 (Scored)",
"controlHeading": "Networking",
"siNo": 4.1,
"checkGroup": "Open SSH",
"yes": 2,
"no": 0,
"complianceStandard": "CIS AWS 1.2.0"
}
]
the table should be grouped by "controlHeading" key.
Но вот что я вижу в таблице: 
Как вы можете видеть на скриншоте, группа logging повторяется, но ожидаемый результат - две группы строк с заголовком logging & Networking.
Как это исправить?
