Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tabulator Example</title> | |
| <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"> | |
| <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="example-table"></div> | |
| <script> | |
| var tableData = [ | |
| {id:1, name:"Billy Bob", age:"12", progress: 36, gender:"male", height:1, col:"red", dob:"", cheese:1}, | |
| {id:2, name:"Mary May", age:"1", progress: 36, gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true}, | |
| ]; | |
| var table = new Tabulator("#example-table", { | |
| data: tableData, // set initial table data | |
| layout: "fitDataFill", // fit columns to width of table | |
| columns: [ | |
| {title:"Name", field:"name"}, | |
| {title:"Age", field:"age"}, | |
| {title:"Progress", field:"progress", sorter:"number", formatter:"progress"}, | |
| {title:"Gender", field:"gender"}, | |
| {title:"Height", field:"height"}, | |
| {title:"Favourite Color", field:"col"}, | |
| {title:"Date Of Birth", field:"dob"}, | |
| {title:"Cheese Preference", field:"cheese"}, | |
| ], | |
| }); | |
| </script> | |
| </body> | |
| </html> |