Created
August 9, 2019 11:53
-
-
Save dkirkham/a71976de86cef95c756533443d85e022 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Table Demo</title> | |
| <!-- Tell the browser to be responsive to screen width --> | |
| <!-- Tabulator Table --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css"> | |
| <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <!-- Content Wrapper. Contains page content --> | |
| <div class="content-wrapper"> | |
| <!-- Main content --> | |
| <section class="content container-fluid"> | |
| <div id="table-ro"></div> | |
| </section> | |
| <!-- /.content --> | |
| </div> | |
| </div> | |
| <!-- ./wrapper --> | |
| <script type="text/javascript"> | |
| var tableData = [ | |
| {id:1, column1:"Row 1", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:2, column1:"Row 2", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:3, column1:"Row 3", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:4, column1:"Row 4", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:5, column1:"Row 5", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:6, column1:"Row 6", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:7, column1:"Row 7", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:8, column1:"Row 8", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:9, column1:"Row 9", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:10, column1:"Row 10", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:11, column1:"Row 11", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:12, column1:"Row 12", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:13, column1:"Row 13", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:14, column1:"Row 14", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:15, column1:"Row 15", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:16, column1:"Row 16", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:17, column1:"Row 17", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:18, column1:"Row 18", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:19, column1:"Row 19", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:20, column1:"Row 20", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:21, column1:"Row 21", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:22, column1:"Row 22", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:23, column1:"Row 23", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:24, column1:"Row 24", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:25, column1:"Row 25", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:26, column1:"Row 26", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:27, column1:"Row 27", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:28, column1:"Row 28", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:29, column1:"Row 29", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:30, column1:"Row 30", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:31, column1:"Row 31", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:32, column1:"Row 32", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:33, column1:"Row 33", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:34, column1:"Row 34", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:35, column1:"Row 35", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:36, column1:"Row 36", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:37, column1:"Row 37", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:38, column1:"Row 38", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:39, column1:"Row 39", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:40, column1:"Row 40", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:41, column1:"Row 41", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:42, column1:"Row 42", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:43, column1:"Row 43", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:44, column1:"Row 44", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:45, column1:"Row 45", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:46, column1:"Row 46", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:47, column1:"Row 47", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:48, column1:"Row 48", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:49, column1:"Row 49", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:50, column1:"Row 50", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:51, column1:"Row 51", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:52, column1:"Row 52", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:53, column1:"Row 53", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:54, column1:"Row 54", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:55, column1:"Row 55", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:56, column1:"Row 56", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:57, column1:"Row 57", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:58, column1:"Row 58", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:59, column1:"Row 59", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:60, column1:"Row 60", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:61, column1:"Row 61", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:62, column1:"Row 62", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:63, column1:"Row 63", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:64, column1:"Row 64", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:65, column1:"Row 65", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:66, column1:"Row 66", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:67, column1:"Row 67", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:68, column1:"Row 68", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:69, column1:"Row 69", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| {id:70, column1:"Row 70", column2:"Data 2", column3:"Data 3", column4:"Data 4", column5:"Data 5", column6:6, column7:"Data 7", column8:"Data 8"}, | |
| ] | |
| var table = new Tabulator("#table-ro", { | |
| data:tableData, | |
| height:"500px", | |
| responsiveLayout:"hide", | |
| layout:"fitColumns", | |
| columns:[ | |
| {title:"Column 1", field:"column1", width:125, align:"left", responsive:2}, | |
| {title:"Column 2", field:"column2", width:88, align:"left", responsive:2}, | |
| {title:"Column 3", field:"column3", width:112, align:"left", responsive:0}, | |
| {title:"Column 4", field:"column4", width:88, align:"left", responsive:0}, | |
| {title:"Column 5", field:"column5", width:112, align:"left", responsive:0}, | |
| {title:"Column 6", field:"column6", width:74, align:"left", responsive:1}, | |
| {title:"Column 7", field:"column7", width:88, align:"left", responsive:0}, | |
| {title:"Column 8", field:"column8", align:"left", responsive:0}, | |
| ], | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment