xxxxxxxxxx1
<div id="datatable-cell-format" data-mdb-sort-field="purchases" data-mdb-sort-order="desc">2
<table>3
<thead>4
<tr>5
<th>Product</th>6
<th>Quantity</th>7
<th>Purchases</th>8
</tr>9
</thead>10
<tbody>11
<tr><td>Product 5</td><td>104</td><td>240</td></tr>12
<tr><td>Product 4</td><td>89</td><td>230</td></tr>13
<tr><td>Product 9</td><td>4</td><td>206</td></tr>14
<tr><td>Product 8</td><td>50</td><td>199</td></tr>15
<tr><td>Product 6</td><td>97</td><td>187</td></tr>16
<tr><td>Product 7</td><td>167</td><td>130</td></tr>17
<tr><td>Product 2</td><td>45</td><td>110</td></tr>18
<tr><td>Product 1</td><td>10</td><td>103</td></tr>19
<tr><td>Product 11</td><td>22</td><td>100</td></tr>20
<tr><td>Product 10</td><td>120</td><td>88</td></tr>21
</tbody>22
</table>23
</div>1
1
xxxxxxxxxx1
const datatableInstance = new mdb.Datatable(2
document.getElementById('datatable-cell-format'),3
);4
5
const columns = datatableInstance._columns;6
const rows = datatableInstance._rows;7
8
const maxValue = Math.max(...rows.map((row) => row[2]));9
const minValue = Math.min(...rows.map((row) => row[2]));10
11
const colors = ['#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5'];12
13
const step = (maxValue - minValue) / (colors.length - 1);14
15
const formatCell = (cell, value) => {16
const colorIndex = Math.floor((value - minValue) / step);17
18
cell.style.backgroundColor = colors[colorIndex];19
cell.style.fontWeight = 400;20
};21
22
columns[2].format = formatCell;23
24
datatableInstance.update({ rows, columns }) Console errors: 0