simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
80 lines (76 loc) • 2.88 kB
HTML
<html lang="en">
<head>
<link rel="stylesheet" href="../dist/css/style.css">
<title>multiple-classes</title>
</head>
<body>
<table></table>
<script type="module">
import {DataTable} from "../dist/module.js"
const data = {
"headings": [
"Header 1",
"Header 2",
"Header 3"
],
"data": []
}
for (let i = 1; i <= 200; i++) {
data.data.push([
`Cell ${i}-1`,
`Cell ${i}-2`,
i % 2 === 0 ? "true" : "false"
])
}
window.dt = new DataTable("table", {
classes: {
active: "active1 active2",
ascending: "ascending1 ascending2",
bottom: "bottom1 bottom2",
container: "container1 container2",
cursor: "cursor1 cursor2",
descending: "descending1 descending2",
disabled: "disabled1 disabled2",
dropdown: "dropdown1 dropdown2",
ellipsis: "ellipsis1 ellipsis2",
filter: "filter1 filter2",
filterActive: "filter-active1 filter-active2",
empty: "empty1 empty2",
headercontainer: "headercontainer1 headercontainer2",
hidden: "hidden1 hidden2",
info: "info1 info2",
input: "input1 input2",
loading: "loading1 loading2",
pagination: "pagination1 pagination2",
paginationList: "pagination-list1 pagination-list2",
paginationListItem: "pagination-list-item1 pagination-list-item2",
paginationListItemLink: "pagination-list-item-link1 pagination-list-item-link2",
search: "search1 search2",
selector: "selector1 selector2",
sorter: "sorter1 sorter2",
table: "table1 table2",
top: "top1 top2",
wrapper: "wrapper1 wrapper2"
},
columns: [
{
select: 0,
sort: "asc",
type: "date"
},
{
select: 2,
filter: ["true", "false"]
}
],
data,
perPage: 10,
scrollY: "100px",
rowNavigation: true
})
window.dt.columns.filter(2)
window.dt.rows.setCursor(1)
</script>
</body>
</html>