Datta Able
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

Render Column Cells
Basic Table
use class table inside table element
DrinkPriceCaffeinatedProfit
🔥 latte4No0
🌿 herbal tea3No0.56
🌿 green tea3Yes1.72
🔥 latte3Yes-1.21
🌿 green tea3No0
🌿 green tea3No0
🌿 green tea3Yes1.72
🔥 latte3Yes1.72
🌿 green tea3Yes-1.21
🌿 green tea3No0
🌿 green tea3Yes1.72
🌿 green tea3Yes1.72
🔥 latte3No0
🔥 latte3Yes1.72
🌿 green tea3No0
🌿 green tea3Yes1.72
🔥 latte3No0
🔥 latte3Yes-1.21
🔥 latte3Yes1.72
🔥 latte3No0
🔥 latte3No0
🔥 latte3Yes1.72
🌿 green tea3Yes-1.21
🌿 green tea3Yes-1.21
🌿 green tea3Yes-1.21
Showing 1 to 25 of 25 entries
const data = { headings: ['ID', 'Drink', 'Price', 'Caffeinated', 'Profit'], data: [ [574, 'latte', 4.00, false, 0.00], [984, 'herbal tea', 3.00, false, 0.56], [312, 'green tea', 3.00, true, 1.72], [312, 'latte', 3.00, true, -1.21], [312, 'green tea', 3.00, false, 0.00], [312, 'green tea', 3.00, false, 0.00], [312, 'green tea', 3.00, true, 1.72], [312, 'latte', 3.00, true, 1.72], [312, 'green tea', 3.00, true, -1.21], [312, 'green tea', 3.00, false, 0.00], [312, 'green tea', 3.00, true, 1.72], [312, 'green tea', 3.00, true, 1.72], [312, 'latte', 3.00, false, 0.00], [312, 'latte', 3.00, true, 1.72], [312, 'green tea', 3.00, false, 0.00], [312, 'green tea', 3.00, true, 1.72], [312, 'latte', 3.00, false, 0.00], [312, 'latte', 3.00, true, -1.21], [312, 'latte', 3.00, true, 1.72], [312, 'latte', 3.00, false, 0.00], [312, 'latte', 3.00, false, 0.00], [312, 'latte', 3.00, true, 1.72], [312, 'green tea', 3.00, true, -1.21], [312, 'green tea', 3.00, true, -1.21], [312, 'green tea', 3.00, true, -1.21], ] }; // Add Icon function renderIcon(data, cell, row) { if (data == 'latte') { return `🔥 ${data}`; } else { return `🌿 ${data}`; } } // Price column cell manipulation function renderButton(data, cell, row) { return `${data}`; } // Caffeinated column cell manipulation function renderYesNo(data, cell, row) { if (data == 'true') { return row.classList.add("text-success"), `Yes`; } else if (data == 'false') { return row.classList.add("text-danger"), `No`; } } // numbers function renderHighLow(data, cell, row) { if (data < 0) { return `${data}`; } else if (data > 0) { return `${data}`; } else if (data == 0) { return `${data}`; } } var dataTable = new simpleDatatables.DataTable("#pc-dt-render-column-cells", { data: data, perPage: 25, columns: [{ select: 0, hidden: true }, { select: 1, render: renderIcon }, { select: 2, render: renderButton }, { select: 3, render: renderYesNo }, { select: 4, render: renderHighLow } ] });