Some CSS work

task_2_ts/css/layout.css

@@ -58,6 +58,16 @@ body>main {
     }
 }
 
+.table-container {
+    width: 100%;
+}
+
+.table-scroll-wrapper {
+    width: 100%;
+    max-height: 600px;
+    overflow: scroll;
+}
+
 /* Set a fixed scrollable wrapper */
 #table-content {
     max-height: 400px;

task_2_ts/index.html

@@ -48,6 +48,9 @@
                 <h4>Number of rows</h4>
                 <p id="data-rowcount"></p>
             </div>
+            <div id="data-info-placeholder">
+                No file selected
+            </div>
         </article>
 
         <article>
@@ -66,6 +69,9 @@
                 <h4 id="title-column-max">Max</h4>
                 <p id="column-max"></p>
             </div>
+            <div id="column-info-placeholder">
+                No column selected
+            </div>
         </article>
 
         <article>
@@ -76,15 +82,21 @@
             <input type="search" id="filter" name="filter" placeholder="Filter" disabled>
         </article>
 
-        <article style="width: 100%">
+        <article class="table-container">
             <header>
                 <h2>Data table</h2>
             </header>
+            <div class="table-scroll-wrapper">
                 <table id="table-content">
-                <thead id="table-header"></thead>
+                    <thead>
+                        <tr id="table-header">
+
+                        </tr>
+                    </thead>
                     <tbody id="table-body">
                     </tbody>
                 </table>
+            </div>
         </article>
     </main>
 </body>

task_2_ts/ts/main.ts

@@ -37,8 +37,8 @@ const headerList = listRef<string>(
     [],
     'table-header',
     {
-        'type': 'td',
-        'cssClasses': [],
+        'type': 'th',
+        'cssClasses': [ 'sortable' ],
         'children': []
     }
 );
@@ -75,6 +75,10 @@ columnDatatype.addConditionalElementBind( document.getElementById( 'title-column
 columnDatatype.addConditionalElementBind( columnEntriesElement, stringOrNumberCheckPredicate );
 columnDatatype.addConditionalElementBind( document.getElementById( 'title-column-entries' )!,
     stringOrNumberCheckPredicate );
+columnDatatype.addConditionalElementBind( document.getElementById( 'column-info' )!, val => val !== '' );
+columnDatatype.addConditionalElementBind( document.getElementById( 'column-info-placeholder' )!, val => val === '' );
+filename.addConditionalElementBind( document.getElementById( 'data-info' )!, val => val !== '' );
+filename.addConditionalElementBind( document.getElementById( 'data-info-placeholder' )!, val => val === '' );
 
 
 

task_2_ts/ts/rendering/list-renderer.ts

@@ -18,6 +18,11 @@ const renderList = <T extends StringIndexedObject>(
 const renderer = <T extends StringIndexedObject>( data: T, template: RenderTemplate ): HTMLElement => {
     const parent = document.createElement( template.type );
 
+    for ( let i = 0; i < template.cssClasses.length; i++ ) {
+        console.log( 'Adding css class', template.cssClasses[i]! );
+        parent.classList.add( template.cssClasses[i]! );
+    }
+
     for ( let i = 0; i < template.children.length; i++ ) {
         const element = template.children[i]!;
 

task_2_ts/ts/rendering/primitives.ts

@@ -64,6 +64,7 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
         } );
 
         conditionalClasses.forEach( el => {
+            // FIXME: Use add and remove!
             el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse;
         } );