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 formatCell = (cell, value) => {9
const columnIndex = cell.dataset.mdbField.replace('field_', '');10
const rowIndex = rows.findIndex((row) => row[columnIndex] == value);11
12
if (value > 100, rows[rowIndex][1] < 100) {13
const row = cell.parentElement;14
15
for (const child of row.children) {16
child.classList.add('bg-success');17
child.style.fontWeight = 400;18
}19
} else {20
const row = cell.parentElement;21
22
for (const child of row.children) {23
child.classList.add('bg-danger');24
child.style.fontWeight = 400;25
}26
}27
};28
29
columns[2].format = formatCell;30
31
datatableInstance.update({ rows, columns }) Console errors: 0