Highlighting

Highlight single cells and rows based on their content.

Cells

Highlight a cell's text by using the highlightCell option which contains a textColor and a func property. The function receives the current cell as argument. Return true from it to highlight the given cell.

import { Table } from 'voici.js'

const data = [
  { firstname: 'Homer', lastname: 'Simpson', age: 39 },
  { firstname: 'Marge', lastname: 'Simpson', age: 36 },
  { firstname: 'Bart', lastname: 'Simpson', age: 10 },
  { firstname: 'Lisa', lastname: 'Simpson', age: 8 },
  { firstname: 'Maggie', lastname: 'Simpson', age: 1 }
];

const config = {
  body: {
    highlightCell: {
      textColor: '#F39B6D',
      func: (cell) => cell === "Marge" || cell === "Maggie"
    }
  }
};

const table = new Table(data, config);
table.print();

Console Output

Beside the textColor, you can also toggle whether the highlighted cell should be bold, italic or underline.

Rows

Using the highlightRow option you can provide a bgColor and a func. The function receives the current row as argument. Return true from the function to highlight the row.

import { Table } from 'voici.js'

const data = [
  { firstname: 'Homer', lastname: 'Simpson', age: 39 },
  { firstname: 'Marge', lastname: 'Simpson', age: 36 },
  { firstname: 'Bart', lastname: 'Simpson', age: 10 },
  { firstname: 'Lisa', lastname: 'Simpson', age: 8 },
  { firstname: 'Maggie', lastname: 'Simpson', age: 1 }
];

const config = {
  body: {
    highlightRow: {
      bgColor: '#4F5D75',
      func: (row) => row['age'] % 2 === 1
    }
  }
};

const table = new Table(data, config);
table.print();

Console Output