How to customize separator/delimiter between elements of array shown in column

Question

I have a column in ag-grid that displays elements of array of strings. Ag-grid automatically shows these elements as comma separated string like that:

a,b,c,d,e

but what I need is this:

a, b, c, d, e.

Unfortunately I've failed to find config for such thing and valueFormatter doesn't seem to be correct solution, as I don't want value of column to be string. I'd like it to be still an array of string, so I can filter it correctly. Does anybody know, how to config this?

Answer 1

What you are looking for is Cell Renderer

By default the grid will create the cell values using simple text. If you want more complex HTML inside the cells you can achieve this using Cell Renderers.

For example, we can put a comma between each character of the country name, including an extra space.

countryCellRenderer.js

class CountryCellRenderer {
  eGui;

  init(params) {
    console.log('params.value', params.value)
    this.eGui = document.createElement('span');
    this.eGui.innerHTML = params.value.split('').join(', ');
  }

  getGui() {
    return this.eGui;
  }

  refresh(params) {
    return false;
  }
}

We shouldn't forget to add a script tag for this component in index.html

<script src="countryCellRenderer.js">
</script>

And then we can use this component

{ field: 'country', width: 150, cellRenderer: CountryCellRenderer },

Result

Working plunker: https://plnkr.co/edit/PD26FBvcdBoz3m2q?preview