<div id="datatable-cell-format" data-mdb-sort-field="purchases" data-mdb-sort-order="desc"></div>

​

const rows = [

  ['Product 1', 10, 103],

  ['Product 2', 45, 110],

  ['Product 3', 76, 56],

  ['Product 4', 89, 230],

  ['Product 5', 104, 240],

  ['Product 6', 97, 187],

  ['Product 7', 167, 130],

  ['Product 8', 50, 199],

  ['Product 9', 4, 206],

  ['Product 10', 120, 88],

  ['Product 11', 22, 100],

];

​

const maxValue = Math.max(...rows.map((row) => row[2]));

const minValue = Math.min(...rows.map((row) => row[2]));

​

const colors = ['#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5'];

​

const step = (maxValue - minValue) / (colors.length - 1);

​

const formatCell = (cell, value) => {

  const colorIndex = Math.floor((value - minValue) / step);

​

  cell.style.backgroundColor = colors[colorIndex];

  cell.style.fontWeight = 400;

};

​

const columns = [

  { label: 'Product', field: 'product' },

  { label: 'Quantity', field: 'quantity' },

  { label: 'Purchases', field: 'purchases', format: formatCell },

];

​

const datatableInstance = new TableEditor(

  document.getElementById('datatable-cell-format'),

  { rows, columns }

);