1111 background-color : # f0f0f0
1212 }
1313
14- h1 {
14+ h2 {
1515 text-align : center;
1616 margin-top : 50px ;
1717 }
1818
19- # placeholder {
19+ . placeholder {
2020 width : 100% ;
2121 height : 500px ;
2222 background-color : # fff
2727</ head >
2828
2929< body onresize ="doResize() ">
30- < h1 > ESM Quick Test </ h1 >
31- < div id ="placeholder "> </ div >
30+ < h2 > Nested Table </ h2 >
31+ < div id ="placeholder1 " class =" placeholder "> </ div >
3232 < script type ="module ">
3333 import { Table } from "./src/index.ts" ;
3434
3535 window . __table = new Table ( )
36- . target ( "placeholder " )
36+ . target ( "placeholder1 " )
3737 . columns ( [ "Mother" , "Father" , { label : "Children" , columns : [ "Name" , "sex" , "age" ] } , { label : "Pets" , columns : [ "Name" , "type" ] } ] )
3838 . data ( [
3939 [ "<b>Jane</b>" , "John" , [ [ "Mary" , "f" , 4 ] , [ "Bob" , "m" , 6 ] , [ "Tim" , "m" , 1 ] ] , [ [ "Spot" , "dog" ] , [ "Smelly" , "cat" ] , [ "Goldie" , "Fish" ] , [ "Hammy" , "Hamster" ] ] ] ,
@@ -45,9 +45,37 @@ <h1>ESM Quick Test</h1>
4545 . render ( )
4646 ;
4747 </ script >
48+ < h2 > Resize Handle</ h2 >
49+ < div id ="placeholder2 " class ="placeholder "> </ div >
50+ < script type ="module ">
51+ import { Table } from "./src/index.ts" ;
52+
53+ window . __table2 = new Table ( )
54+ . target ( "placeholder2" )
55+ . columns ( [ "Subject" , "Year 1" , "Year 2Year 2Year 2" , "Year 3" , "Year 4" ] )
56+ . data ( [
57+ [ "English" , 5 , 43 , 41 , 92 ] ,
58+ [ "English II" , 17 , 43 , 83 , 93 ] ,
59+ [ "English III" , 6 , 43 , 64 , 93 ] ,
60+ [ "Geography" , 7 , 45 , 52 , 83 ] ,
61+ [ "Geography II" , 16 , 73 , 52 , 83 ] ,
62+ [ "Geography III" , 26 , 83 , 11 , 72 ] ,
63+ [ "Science" , 66 , 60 , 85 , 6 ] ,
64+ [ "Science II" , 46 , 20 , 53 , 7 ] ,
65+ [ "Science III" , 46 , 20 , 38 , 7 ] ,
66+ [ "Math" , 98 , 30 , 23 , 13 ] ,
67+ [ "Math II" , 76 , 30 , 34 , 6 ] ,
68+ [ "Math III" , 80 , 30 , 27 , 8 ]
69+ ] )
70+ . pagination ( true )
71+ . sortable ( true )
72+ . render ( )
73+ ;
74+ </ script >
4875 < script >
4976 function doResize ( ) {
5077 window . __table ?. resize ( ) ?. render ( ) ;
78+ window . __table2 ?. resize ( ) ?. render ( ) ;
5179 }
5280 </ script >
5381</ body >
0 commit comments