Search code examples
ag-grid

Add a row-level skeleton placeholder during loading for AG-Grid

I'd like to display a skeleton row/placeholder for rows that haven't loaded in my table. I'm using the Infinite model.

The skeleton will need to occur per cell:

enter image description here

I found some documentation regarding how to add a loader: https://www.ag-grid.com/javascript-data-grid/component-loading-cell-renderer/

The example however isn't directly relevant to what I'm trying to achieve.

Solution

  • I was able to achieve this with the help of valueGetter (to know if there is any value in the row) and return a string called "loading" if there is no row data present and within the cellRendererSelector I am showing the component that is needed for showing the skeleton while loading else return undefined to show the default. Do not use cellRenderer as you'll end up passing the value in return which will cause performance issue. As cellRenderer and cellRendererSeletor will run when ever you scroll the grid to view. Also make use of valueFormatter for formatting the value.

    https://www.ag-grid.com/javascript-data-grid/scrolling-performance/#if-possible-avoid-cell-renderers