AG-GRID - customPinnedRowRender styling not working in Javascript (functional with Angular & Vue)

Question

I've been attempting to create the similar functionality (format pinned rows differently than rest of grid) in my project as described on the following page (ie. blue for one cell, italics on another, etc):

https://www.ag-grid.com/javascript-grid-row-pinning/

This has been unsuccesful - come to find out, the behavior on the page (in link above) isn't working for Javascript, which may explain why my efforts have also been futile; their site does render the styles correctly for Angular & Vue.

Does anyone have any insight into this or what piece might be missing from the JS elements?

Answer 1

Looking at and playing with the Plunker version of the example that you linked to, it appears that the "getRowStyle" function supplied in the gridOptions is overriding the style provided by the customPinnedRowRenderer.

Note that the pinned rows are bold as specified in getRowStyle(), and not blue as specified in the customPinnedRowRenderer.