diff --git a/task_2_ts/css/layout.css b/task_2_ts/css/layout.css index 480745a..c4ba28e 100644 --- a/task_2_ts/css/layout.css +++ b/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; diff --git a/task_2_ts/index.html b/task_2_ts/index.html index 5d5fb61..0477444 100644 --- a/task_2_ts/index.html +++ b/task_2_ts/index.html @@ -48,6 +48,9 @@

Number of rows

+
+ No file selected +
@@ -66,6 +69,9 @@

Max

+
+ No column selected +
@@ -76,15 +82,21 @@
-
+

Data table

- - - - -
+
+ + + + + + + + +
+
diff --git a/task_2_ts/ts/main.ts b/task_2_ts/ts/main.ts index c8acde6..38d2b43 100644 --- a/task_2_ts/ts/main.ts +++ b/task_2_ts/ts/main.ts @@ -37,8 +37,8 @@ const headerList = listRef( [], '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 === '' ); diff --git a/task_2_ts/ts/rendering/list-renderer.ts b/task_2_ts/ts/rendering/list-renderer.ts index 2b8c7d5..620b572 100644 --- a/task_2_ts/ts/rendering/list-renderer.ts +++ b/task_2_ts/ts/rendering/list-renderer.ts @@ -18,6 +18,11 @@ const renderList = ( const renderer = ( 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]!; diff --git a/task_2_ts/ts/rendering/primitives.ts b/task_2_ts/ts/rendering/primitives.ts index 4d68ba1..0f16842 100644 --- a/task_2_ts/ts/rendering/primitives.ts +++ b/task_2_ts/ts/rendering/primitives.ts @@ -64,6 +64,7 @@ export const ref = ( elements: HTMLElement[], data: T ): Ref => { } ); conditionalClasses.forEach( el => { + // FIXME: Use add and remove! el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse; } );