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> | |
| <style> | |
| /*Theme the Tabulator element*/ | |
| #example-table-theme{ | |
| background-color:#ccc; | |
| border: 1px solid #333; | |
| border-radius: 10px; | |
| } | |
| /*Theme the header*/ | |
| #example-table-theme .tabulator-header { | |
| background-color:#333; | |
| color:#fff; | |
| } | |
| /*Allow column header names to wrap lines*/ | |
| #example-table-theme .tabulator-header .tabulator-col, | |
| #example-table-theme .tabulator-header .tabulator-col-row-handle { | |
| white-space: normal; | |
| } | |
| /*Color the table rows*/ | |
| #example-table-theme .tabulator-tableholder .tabulator-table .tabulator-row{ | |
| color:#fff; | |
| background-color: #666; | |
| } | |
| /*Color even rows*/ | |
| #example-table-theme .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) { | |
| background-color: #444; | |
| } | |
| </style> | |
| <body> | |
| <div id="example-table"></div> | |
| <script> | |
| var tableData = [ | |
| {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1}, | |
| {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true}, | |
| ] | |
| var table = new Tabulator("#example-table", { | |
| data:tableData, //set initial table data | |
| columns:[ | |
| {title:"Name", field:"name"}, | |
| {title:"Age", field:"age"}, | |
| {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> |