CODEWITHSUNDEEP
ag-grid
Nithin
Nithin

Reputation: 381

Ag-Grid + Angular + Filtering a complex data

I have a table using ag-grid in an angular application. I have a column in which a filter needs to be added for it. This column is an Array and it can have multiple records for each record. Please find the attachment. When I filter REPORT 1 , since REPORT 2 is also part of the row, it is getting displayed. Can you please let me know how do I filter to get only REPORT 1 ?

enter image description here

 {
        headerName: 'Available Reports',
        field: 'reportTypes',
        cellRendererFramework: LinkComponentComponent,                        
        width: 1020,        
        filter: "agSetColumnFilter",               
        keyCreator: this.reportKeyCreator  ,  
        filterParams: {          
          cellHeight: 20,
          debounceMs: 1000,             
          selectAllOnMiniFilter: true 
        }                                        
      } 

reportKeyCreator(params) {           
    return params.value[0].reportType;
  }

Here is the data structure

[
  {
    "Name": "ABCD-126",
    "reportDate": "10-02-2018",
    "reportTypes": [
      {
        "reportType": "REPORT1",
        "reportPath": "report1",
        "reportNum": "114"
      }
    ]
  },
  {
    "Name": "ABCD-126",
    "reportDate": "10-01-2018",
    "reportTypes": [
      {
        "reportType": "REPORT1",
        "reportPath": "report1",
        "reportNum": "115"
      },
      {
        "reportType": "REPORT2",
        "reportPath": "report2",
        "reportNum": "116"
      }
    ]
  }
]

Upvotes: 1

Views: 1591

Answers (1)

un.spike
un.spike

Reputation: 5113

You can create own customFitler and handle needed things internally, but I suppose you need to split complex object by cells and to get grouped concept you can use HeaderGroupping.

It would be a more correct way.

{
    headerName: "Reports",
    children: [
        {headerName: "Type", field: "reportType"},
        {headerName: "Path", field: "reportPath"},
        {headerName: "Num", field: "reportNum"}
    ]
}

Upvotes: 1

Related Questions