We are developing an LWC that uses the Grid library. We have noticed that when row grouping is enabled, there's a chance for Font Awesome icons within the table to disappear when quickly scrolling away from and back to a row. When the row grouping feature is disabled the issue is not reproducible.
Attached is a video demo of this happening in our Salesforce org.
I've also attached the full JS file for our LWC. Below are some snippets from the JS showing the grid and column config:
this.grid = new bryntum.grid.Grid({
appendTo: this.template.querySelector("div.grid-container"),
columns: this.columns,
store: this.rowDataStore,
features: {
group: {
field: "target",
renderer: ({ groupRowFor, isFirstColumn }) => {
if (!isFirstColumn) {
return "";
}
return groupRowFor ? "Targets" : "Non-Targets";
},
},
},
});
this.columns = [
{
id: "target",
field: "target",
icon: "b-fa b-fa-bullseye",
width: 70,
locked: true,
align: "center",
resizable: false,
renderer: ({ value }) =>
value ? { tag: "i", class: "b-fa b-fa-bullseye target-icon" } : "",
},
];
Thanks in advance for your feedback!