simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
193 lines (183 loc) • 7.09 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Custom cell renderer - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
<!-- Custom Styles -->
<style>
.buy-now {
background-color: #056b05;
}
.caffeinated {
color: limegreen;
}
.uncaffeinated {
color: red;
}
.currency {}
.currency:before {
content: "$ "
}
.currency--profit {
color: limegreen;
}
.currency--loss {
color: red;
}
.currency--zero {
color: #808080;
}
</style>
</head>
<body>
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>
<h2>Custom cell renderer</h2>
<table id="drinks"></table>
<script src="../dist/umd.js"></script>
<script>
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
const renderIcon = function(data, _cell, _dataIndex, _cellIndex) {
if (data === "Latte") {
return `☕ ${data}`
} else if (data === "Green tea") {
return `🍵 ${data}`
}
return `🌿 ${data}`
}
// Price column cell manipulation
const renderButton = function(data, cell, dataIndex, _cellIndex) {
cell.childNodes.push({
nodeName: "BUTTON",
attributes: {
"data-row": dataIndex,
class: "buy-now"
},
childNodes: [
{
nodeName: "#text",
data: "Buy Now!"
}
]
})
}
// Caffeinated column cell manipulation
const renderYesNo = function(data, cell, _dataIndex, _cellIndex) {
if ([true, false].includes(data)) {
cell.childNodes = [
{
nodeName: "SPAN",
attributes: {
class: data === true ? "caffeinated" : "uncaffeinated"
},
childNodes: [
{
nodeName: "#text",
data: data === true ? "Yes" : "No"
}
]
}
]
}
}
// numbers
const renderHighLow = function(data, cell, _dataIndex, _cellIndex) {
const cellTextNode = cell.childNodes[0]
const currencyNode = {
nodeName: "SPAN",
attributes: {
class: "currency "
},
childNodes: [cellTextNode]
}
cell.childNodes = [currencyNode]
if (data < 0) {
currencyNode.attributes.class += "currency--loss"
} else if (data > 0) {
currencyNode.attributes.class += "currency--profit"
} else if (data === 0) {
currencyNode.attributes.class += "currency--zero"
}
}
new window.simpleDatatables.DataTable("#drinks", {
data,
rowRender: (row, tr, _index) => {
if ([true, false].includes(row.cells[3].data)) {
if (!tr.attributes) {
tr.attributes = {}
}
if (!tr.attributes.class) {
tr.attributes.class = row.cells[3].data === true ? "yes" : "no"
} else {
tr.attributes.class += row.cells[3].data === true ? "yes" : "no"
}
}
},
columns: [
{
select: 0,
hidden: true,
type: "number"
}, {
select: 1,
render: renderIcon,
type: "string"
}, {
select: 2,
render: renderButton,
type: "number"
}, {
select: 3,
render: renderYesNo,
type: "boolean"
}, {
select: 4,
render: renderHighLow,
type: "number"
}
]
})
</script>
</body>
</html>