nuxy/tidy-table

Color table rows based on condition

j-flowers opened this issue · 1 comments

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