simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
158 lines (156 loc) • 5.15 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
<link rel="stylesheet" href="dist/style.css">
<style>body { font-family: system-ui; margin: 20px 50px; }</style>
</head>
<body>
<h1>Simple-DataTables (UMD Mode)</h1>
<script src="dist/umd/simple-datatables.js"></script>
<script>
const data = {
"headings": [
"Name",
"Job",
"Company",
"Ext.",
"Start Date",
"Email",
"Phone No."
],
"data": [
[
"Hedwig F. Nguyen",
"Manager",
"Arcu Vel Foundation",
"9875",
"03/27/2017",
"nunc.ullamcorper@metusvitae.com",
"070 8206 9605"
],
[
"Genevieve U. Watts",
"Manager",
"Eget Incorporated",
"9557",
"07/18/2017",
"Nullam.vitae@egestas.edu",
"0800 025698"
],
[
"Kyra S. Baldwin",
"Manager",
"Lorem Vitae Limited",
"3854",
"04/14/2016",
"in@elita.org",
"0800 237 8846"
],
[
"Stephen V. Hill",
"Manager",
"Eget Mollis Institute",
"8820",
"03/03/2016",
"eu@vel.com",
"0800 682 4591"
],
[
"Vielka Q. Chapman",
"Manager",
"Velit Pellentesque Ultricies Institute",
"2307",
"06/25/2017",
"orci.Donec.nibh@mauriserateget.edu",
"0800 181 5795"
],
[
"Ocean W. Curtis",
"Manager",
"Eu Ltd",
"6868",
"08/24/2017",
"cursus.et@cursus.edu",
"(016977) 9585"
],
[
"Kato F. Tucker",
"Manager",
"Vel Lectus Limited",
"4713",
"11/06/2017",
"Duis@Lorem.edu",
"070 0981 8503"
],
[
"Robin J. Wise",
"Manager",
"Curabitur Dictum PC",
"3285",
"02/09/2017",
"blandit@montesnascetur.edu",
"0800 259158"
],
[
"Uriel H. Guerrero",
"Assistant",
"Mauris Inc.",
"2294",
"02/11/2018",
"vitae@Innecorci.net",
"0500 948772"
],
[
"Yasir W. Benson",
"Assistant",
"At Incorporated",
"3897",
"01/13/2017",
"ornare.elit.elit@atortor.edu",
"0391 916 3600"
],
[
"Shafira U. French",
"Assistant",
"Nisi Magna Incorporated",
"5116",
"07/23/2016",
"metus.In.nec@bibendum.ca",
"(018013) 26699"
],
[
"Casey E. Hood",
"Assistant",
"Lorem Vitae Odio Consulting",
"7079",
"05/05/2017",
"justo.Praesent@sitamet.ca",
"0800 570796"
],
[
"Caleb X. Finch",
"Assistant",
"Elit Associates",
"7079",
"09/19/2016",
"condimentum@eleifend.com",
"056 1551 7431"
]
]
};
const t = document.createElement('table');
document.body.appendChild(t);
const config = {
data,
filters: {"Job": ["Assistant", "Manager"],
"Email": [e => e.endsWith('.edu'), e => e.endsWith('.com')],
"Ext.": [e => e > 6000]},
columns: [{ select: 4, type: 'date', format: 'MM/DD/YYYY' }]
};
const dt = new simpleDatatables.DataTable(t, config);
</script>
</body>
</html>