CODEWITHSUNDEEP
ag-grid
ReactivePsycho
ReactivePsycho

Reputation: 19

Display rowcount beside each filter at grid

I am using AG grid enterprise to display my data. I have filters for each columns. I want to show the count of each filter element inside the filter drop-down itself. Please help. It's like if the filter shows that we have only us and Canada in the country column, I want to display the frequencies of us and canada inside parenthesis beside these filter elements

Upvotes: 0

Views: 745

Answers (1)

un.spike
un.spike

Reputation: 5123

Update: added working sample

filterParams: { cellRenderer: "countryFilterRenderer"}

countryFilterRenderer(params) {
  let count = this.rowData.filter(i=>i.country.name==params.value).length;
  return `${params.value}(${count})`;
}

rowData:[{country:{name:..., code:...}];

rowData definition just for clarity.

For more info check doc with samples, and official demo with sources.

Update: added hot data sample

Once we need to have data - related from sorting or filtering we can use API methods: forEachNodeAfterFilter, forEachNodeAfterFilterAndSort, getDisplayedRowCount. 

sportFilterRenderer(params){
    let count;
    if(this.gridApi.getDisplayedRowCount() != this.rowData.length){
      count = 0;
      this.gridApi.forEachNodeAfterFilter(node=>{
        if(node.data.sport == params.value)
          count++;
      })
    }
    else{
        count = this.rowData.filter(i=>i.sport==params.value).length;
    }
    return `${params.value}(${count})`;
}

https://plnkr.co/edit/bCI0SJ (check country and sport filters)

On sample plnkr count in sport filter would be recalculated every time once you will select\deselect anything from country filter

Update: hot changes handling via cellRenderer

So ag-grid team noticed about this issues and they have it on backlock - before this - there is no way to handle your requirement in the same way as we tried. Here you can find an issue (AG-2078)

Upvotes: 0

Related Questions