Font awesone icons in DataTable - Trigger js file on callback

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”){
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 :slight_smile:

1 Like