Font colors for data at tables from a dataset

hi i want to make the data at the table change according to the change value so if it’s positive it will be green and if it’s negative it will be red and no change keep it black how can I do it

You can do it with code.
Let’s say the column of number is under a data field key named ‘val’ which is of type: Number. Then:

const getColor = (num) => num > 0 ? 'green' : num < 0 ? 'red' : 'black';
$w.onReady(() => {
$w('#dataset1').onReady(() => {
$w('#table1').columns = $w('#table1').columns.map(e => {
if(e.dataPath === 'val') {e.type = 'richText';} return e;});
$w('#table1').rows = $w('#table1').rows.map(e => {e.val = `<p style="color:${getColor(e.val)};">${e.val}</p>`; return e;});
})
});

hi thanks for the support I entered the cod below and I got the following under it

const getColor = ( num ) => num > 0 ? ‘green’ : num < 0 ? ‘red’ : ‘black’ ;
$w . onReady (() => {
$w ( ‘#dataset6’ ). onReady (() => {
$w ( ‘#table7’ ). columns = $w ( ‘#table7’ ). columns . map ( e => {
if ( e . dataPath === ‘chg’ ) { e . type = ‘richText’ ;} return e ;});
$w ( ‘#table7’ ). rows = $w ( ‘#table7’ ). rows . map ( e => { e . chg = <p style="color: ${ getColor ( e . chg }; ">${e.chg}</p>; return e;});
})
} );

public/pages/c1dmp.js: Unexpected token, expected “,” (6:91) 4 | $w(‘#table7’).columns = $w(‘#table7’).columns.map(e => { 5 | if(e.dataPath === ‘chg’) {e.type = ‘richText’;} return e;}); > 6 | $w(‘#table7’).rows = $w(‘#table7’).rows.map(e => {e.chg = <p style="color:${getColor(e.chg};">${e.chg}</p>; return e;}); | ^ 7 | }) 8 | });

@kariem-ryad
Just a little SYNTAX-error…

const getColor = (num) => num > 0 ? 'green' : num < 0 ? 'red' : 'black';

$w.onReady(() => {
    $w('#dataset6').onReady(()=> {
        $w('#table7').columns = $w('#table7').columns.map(e => {
            if(e.dataPath==='chg') {e.type = 'richText';} return e;
        });
        $w('#table7').rows = $w('#table7').rows.map(e => {
            e.chg = `<p style="color:${getColor(e.chg)};">${e.chg}</p>`; return e;
        });
    })
});

@russian-dima
thanks it worked and its super cool I just to modify one thing that the whole line to be in green or red or black what should I edit to do it

@russian-dima @j. D.

I also have on the same page another tables that I want to apply coloring for it how can I add like the below picture at the same page. also another pages have more than 7-8 tables need coloring how it’s done please please

@kariem-ryad I’m not sure what the difference between this question and the previous one. If you wish to color the numeric text do the same.

@jonatandor35 hi I want to change the numeric percentage for the first picture as the numbers only as the the picture, and for the second picture I want to make the sell or buy word to be red or green when I tried to change it with the same code it didn’t work for both

@kariem-ryad Post your full code (for all the tables), and we will see what changes are needed.

@jonatandor35 const getColor = ( num ) => num > 0 ? ‘green’ : num < 0 ? ‘red’ : ‘black’ ;
$w . onReady (() => {
$w ( ‘#dataset6’ ). onReady (() => {
$w ( ‘#table7’ ). columns = $w ( ‘#table7’ ). columns . map ( e => {
if ( e . dataPath === ‘chg’ ) { e . type = ‘richText’ ;} return e ;});
$w ( ‘#table7’ ). rows = $w ( ‘#table7’ ). rows . map ( e => { e . chg = <p style="color: ${ getColor ( e . chg )} ;"> ${ e . chg } </p> ; return e ;});
})
});

const getColor = ( num ) => num > 0 % ? ‘green’ : num < 0 % ? ‘red’ : ‘black’ ;
$w . onReady (() => {
$w ( ‘#dataset6’ ). onReady (() => {
$w ( ‘#table7’ ). columns = $w ( ‘#table7’ ). columns . map ( e => {
if ( e . dataPath === ‘change’ ) { e . type = ‘richText’ ;} return e ;});
$w ( ‘#table7’ ). rows = $w ( ‘#table7’ ). rows . map ( e => { e . change = <p style="color: ${ getColor ( e . change )} ;"> ${ e . change } </p> ; return e ;});
})
});

const getColor = ( Text ) => text = ‘buy’ ? ‘green’ : text = ‘sell’ ? ‘red’ ;
$w . onReady (() => {
$w ( ‘#dataset9’ ). onReady (() => {
$w ( ‘#table11’ ). columns = $w ( ‘#table11’ ). columns . map ( e => {
if ( e . dataPath === ‘transactiontype’ ) { e . type = ‘richText’ ;} return e ;});
$w ( ‘#table11’ ). rows = $w ( ‘#table11’ ). rows . map ( e => { e . transactiontype = <p style="color: ${ getColor ( e . transactiontype )} ;"> ${ e . transactiontype } </p> ; return e ;});
})
});

@kariem-ryad if it’s a single page you can declare the same variable (or function) more than one time. And you don’t have to.
Try something like:

const getColor = (num) => num > 0 ? 'green' : num < 0 ? 'red' : 'black';
function formatTable(dataset, table, fieldsToFormat){
    dataset.onReady(() => {
        table.columns = table.columns.map(e => {
            if(fieldsToFormat.includes(e.dataPath)){
                e.type = 'richText';
            }
            return e;
        });
        let tableRows = table.rows;
        fieldsToFormat.forEach(e => {
            tableRows = tableRows.map(r => {
                r[e] = `<p style="color:${getColor(r[e])};">${r[e]}</p>`;
                return r;
            })
        })
        table.rows = tableRows;
    })
}

$w.onReady(() => {
    formatTable($w('#dataset6'), $w('#table7'), ['chg' ,'change']);
    formatTable($w('#dataset9'), $w('#table11'), ['transactiontype']);
})

[EDITED]

P.S. I fixed an error, be sure to copy the fixed code.

Hi everyone!!! Im struggling to write code which will change font size to 11px on this table. I tried to customize solution which was provided below,but no success. Can someone help me please? Thanks!