Update data_gc_tab.html
Browse files- data_gc_tab.html +22 -43
data_gc_tab.html
CHANGED
|
@@ -1,56 +1,35 @@
|
|
| 1 |
-
<!doctype html>
|
| 2 |
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8">
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
<title>Tabulator Example</title>
|
| 8 |
-
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
|
| 9 |
-
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
|
| 10 |
</head>
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
<style>
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
</style>
|
| 19 |
<body>
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
|
| 29 |
<script>
|
| 30 |
-
var tableData = [
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
]
|
| 34 |
-
|
| 35 |
-
var table = new Tabulator("#example-table", {
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
|
|
|
| 48 |
</script>
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
</body>
|
| 56 |
</html>
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Tabulator Example</title>
|
| 7 |
+
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
|
| 8 |
+
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
|
| 9 |
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 10 |
<body>
|
| 11 |
+
<div id="example-table"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
|
| 13 |
<script>
|
| 14 |
+
var tableData = [
|
| 15 |
+
{id:1, name:"Billy Bob", age:"12", progress: 36, gender:"male", height:1, col:"red", dob:"", cheese:1},
|
| 16 |
+
{id:2, name:"Mary May", age:"1", progress: 36, gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
|
| 17 |
+
];
|
| 18 |
+
|
| 19 |
+
var table = new Tabulator("#example-table", {
|
| 20 |
+
data: tableData, // set initial table data
|
| 21 |
+
layout: "fitDataFill", // fit columns to width of table
|
| 22 |
+
columns: [
|
| 23 |
+
{title:"Name", field:"name"},
|
| 24 |
+
{title:"Age", field:"age"},
|
| 25 |
+
{title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
|
| 26 |
+
{title:"Gender", field:"gender"},
|
| 27 |
+
{title:"Height", field:"height"},
|
| 28 |
+
{title:"Favourite Color", field:"col"},
|
| 29 |
+
{title:"Date Of Birth", field:"dob"},
|
| 30 |
+
{title:"Cheese Preference", field:"cheese"},
|
| 31 |
+
],
|
| 32 |
+
});
|
| 33 |
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 34 |
</body>
|
| 35 |
</html>
|