Color table rows based on condition
j-flowers opened this issue · 1 comments
j-flowers commented
Would like to see some documentation how to set the color of a row based on a condition that is met.
For example if I wanted all rows that have a negative value to be red, and positive green?
nuxy commented
You can achieve this using a postProcess
column event that adds a CSS class to the matching row(s).
document.getElementById('container')
.TidyTable({
columnTitles: ['Column A', 'Column B', 'Column C', 'Column D', 'Column E'],
columnValues: [
['1', '1A', '1B', '1C', '1D', '1E'],
['2', '2A', '2B', '2C', '2D', '2E'],
['3', '3A', '3B', '3C', '3D', '3E'],
['4', '4A', '4B', '4C', '4D', '4E'],
['5', '5A', '5B', '5C', '5D', '5E']
],
postProcess: {
column: function(col) {
var row = col.parentNode;
if (col.textContent == '3C') {
row.classList.add('do_something');
}
}
}
});
For more information:
https://nuxy.github.io/Tidy-Table/index.html#post-process