simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
86 lines (81 loc) • 3.43 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>Checkbox column - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
<style>
span.checkbox {
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>
<h2>Checkbox column</h2>
<table id="demo-table"></table>
<script type="module">
import {
DataTable
} from "../dist/module.js"
// Instantiate
fetch("datatable.json").then(
response => response.json()
).then(
data => {
const datatable = new DataTable("#demo-table", {
type: "string",
data: {
headings: ["Checked"].concat(Object.keys(data[0])),
data: data.map(item => [false].concat(Object.values(item)))
},
rowRender: (rowValue, tr, _index) => {
if (!tr.attributes) {
tr.attributes = {}
}
tr.attributes["data-name"] = rowValue.cells[1].data
return tr
},
columns: [
{
select: 0,
sortable: false,
render: (value, _td, _rowIndex, _cellIndex) => `<span class="checkbox">${value ? "☑" : "☐"}</span>`
}
]
})
datatable.dom.addEventListener("click", event => {
if (event.target.matches("span.checkbox")) {
event.preventDefault()
event.stopPropagation()
const name = event.target.parentElement.parentElement.dataset.name
const index = parseInt(event.target.parentElement.parentElement.dataset.index, 10)
const row = datatable.data.data[index]
const cell = row.cells[0]
const checked = cell.data
cell.data = !checked
datatable.update()
// Timeout used for the checkbox to have time to update and show as checked. It is not required.
setTimeout(
() => alert(`"${name}" has been ${checked ? "unchecked" : "checked"}.`),
0
)
}
})
window.datatable = datatable
}
)
</script>
</body>
</html>