Hi,
On my app, i’m generating dataTables (coming from pandas dataframes) everytime the user clicks on a component.
These tables contain emojis, but the choice is too limited, and I would like to add fontawesome icones instead.
I’ve tried to add elements like html.I(className=‘fas fa-chevron-down’) inside the dataframes, unsuccessfully.
Another idea I had was to add a simple js script, that has access to the values of the tables, and that changes the inner html to add the right component once the table is rendered, like this:
document.querySelectorAll(“td[data-dash-column=“column_name”]”).forEach( el => el.innerHTML = ‘’ )
The problem is that the tables are generated through user interaction, and the js script has already been read.
Is there a way to write a callback, that runs the js script at a specific moment, for example when a button is clicked ?
If not, do you have any idea of how I could add font awesome icons in my tables ?
Thanks a lot
If anyone is interrested, I’ve figured a way out, with a custom JS file that gets the container of my table, and uses a MutationObserver to trigger a function that changes data into HTML.
#### Sleep function, to wait for dash to render all elements
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
};
#### The function that replaces data from dataframe with icons
function colorCircles() {
document.querySelectorAll(’.dash-cell-value’).forEach(el => {
if (el.innerHTML == ‘jaune’) {
el.innerHTML = ‘’
}
else if (el.innerHTML == ‘rouge’) {
el.innerHTML = ‘’
}
else if (el.innerHTML == ‘vert’) {
el.innerHTML = ‘’
}
else if (el.innerHTML == ‘orange’) {
el.innerHTML = ‘’
}
else return;
});
};
### The mutation observer that check the attributes, and calls the function when data changes
sleep(1000).then(() => {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === “data-dash-is-loading”){
colorCircles()
}
})
})
list = document.getElementById(‘product-cards’)
observer.observe(list, {
attributes : true
})
})
This does the job without lowering the app, but if anyone has a more “dashy” way of doing, I would much appreciate if you could share it 
1 Like
