fix: add possibility to include scrollable table + example in docs (#869

) * Enhancement - add possibility to include scrollable table + example in docs * Replace fd-table--fixed class by adding overflow
SAP · Jun 7, 2019 · a5e1577 · a5e1577
1 parent f1e594c
commit a5e1577
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 3 deletions.
diff --git a/docs/app/documentation/component-docs/table/examples/table-responsive-example.component.html b/docs/app/documentation/component-docs/table/examples/table-responsive-example.component.html
@@ -0,0 +1,22 @@
+<div fd-table-responsive-wrapper>
+    <table fd-table>
+        <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Date</th>
+            <th>Type</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let row of tableRows">
+            <td class="fd-has-font-weight-semi"><a href="#">{{row.column1}}</a></td>
+            <td>{{row.column2}}</td>
+            <td>{{row.column3}}</td>
+            <td>{{row.date}}</td>
+            <td><fd-icon [glyph]="row.type"></fd-icon></td>
+        </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/docs/app/documentation/component-docs/table/examples/table-responsive-example.component.ts b/docs/app/documentation/component-docs/table/examples/table-responsive-example.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fd-table-responsive-example',
+    templateUrl: './table-responsive-example.component.html',
+    styles: [`
+        td {
+            min-width: 200px;
+        }
+    `]
+})
+export class TableResponsiveExampleComponent implements OnInit {
+    tableRows;
+
+    ngOnInit() {
+        this.tableRows = [
+            {
+                column1: 'Row 1',
+                column2: 'Row 1',
+                column3: 'Row 1',
+                date: '09-07-18',
+                type: 'search'
+            },
+            {
+                column1: 'Row 2',
+                column2: 'Row 2',
+                column3: 'Row 2',
+                date: '09-08-18',
+                type: 'cart'
+            },
+            {
+                column1: 'Row 3',
+                column2: 'Row 3',
+                column3: 'Row 3',
+                date: '02-14-18',
+                type: 'calendar'
+            },
+            {
+                column1: 'Row 4',
+                column2: 'Row 4',
+                column3: 'Row 4',
+                date: '12-30-17',
+                type: 'search'
+            },
+            {
+                column1: 'Row 5',
+                column2: 'Row 5',
+                column3: 'Row 5',
+                date: '11-12-18',
+                type: 'search'
+            }
+        ];
+    }
+}
diff --git a/docs/app/documentation/component-docs/table/table-docs.component.html b/docs/app/documentation/component-docs/table/table-docs.component.html
@@ -41,3 +41,18 @@ <h2>Table with Angular CDK</h2>
 </component-example>
 <code-example [code]="tableCdkHtml" [language]="'HTML'"></code-example>
 <code-example [code]="tableCdkTs" [language]="'typescript'"></code-example>
+
+<separator></separator>
+<h2>Responsive Table</h2>
+<description>
+    The <code>fd-table-responsive-wrapper</code> directive can be used in along with <code>fd-table</code> directive inside which makes
+    table easy to read even on smaller devices.
+</description>
+<description>
+    To test it, reduce size of screen
+</description>
+<component-example [name]="'ex4'">
+    <fd-table-responsive-example></fd-table-responsive-example>
+</component-example>
+<code-example [code]="tableResponsiveHtml" [language]="'HTML'"></code-example>
+<code-example [code]="tableResponsiveTs" [language]="'typescript'"></code-example>
diff --git a/docs/app/documentation/component-docs/table/table-docs.component.ts b/docs/app/documentation/component-docs/table/table-docs.component.ts
@@ -8,10 +8,17 @@ import * as tableCheckHtml from '!raw-loader!./examples/table-checkboxes-example
 import * as tableCheckTs from '!raw-loader!./examples/table-checkboxes-example.component.ts';
 import * as tableCdkHtml from '!raw-loader!./examples/table-cdk-example.component.html';
 import * as tableCdkTs from '!raw-loader!./examples/table-cdk-example.component.ts';
+import * as tableResponsiveHtml from '!raw-loader!./examples/table-responsive-example.component.html';
+import * as tableResponsiveTs from '!raw-loader!./examples/table-responsive-example.component.ts';
 
 @Component({
     selector: 'app-table',
-    templateUrl: './table-docs.component.html'
+    templateUrl: './table-docs.component.html',
+    styles: [`
+        ::ng-deep app-table .fd-tile {
+            display: block;
+        }
+    `]
 })
 export class TableDocsComponent {
 
@@ -48,6 +55,10 @@ export class TableDocsComponent {
 
     tableCdkTs = tableCdkTs;
 
+    tableResponsiveHtml = tableResponsiveHtml;
+
+    tableResponsiveTs = tableResponsiveTs;
+
     constructor(private schemaFactory: SchemaFactoryService) {
         this.schema = this.schemaFactory.getComponent('table');
     }

diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts
@@ -315,6 +315,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DatetimePickerAllowNullExampleComponent } from './component-docs/datetime-picker/examples/datetime-allow-null-example/datetime-allow-null-example.component';
 import { DatePickerAllowNullExampleComponent } from './component-docs/date-picker/examples/date-picker-allow-null-example.component';
 import { TimeFormExampleComponent } from './component-docs/time/examples/time-form-example.component';
+import { TableResponsiveExampleComponent } from './component-docs/table/examples/table-responsive-example.component';
 
 export function highlightJsFactory() {
     return hljs;
@@ -488,6 +489,7 @@ export function highlightJsFactory() {
         TableExampleComponent,
         TableCdkExampleComponent,
         TableCheckboxesExampleComponent,
+        TableResponsiveExampleComponent,
         TabsExampleComponent,
         TabSelectionExampleComponent,
         TileActionsExampleComponent,

diff --git a/library/src/lib/table/table-responsive-wrapper.directive.ts b/library/src/lib/table/table-responsive-wrapper.directive.ts
@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+/**
+ * The directive that represents a table.
+ * A table is a set of tabular data. Line items can support data, images and actions.
+ * ```html
+ *     <div fd-table-responsive-wrapper>
+ *         <table fd-table>
+ *         </table>
+ *     </div>
+ * ```
+ */
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: '[fd-table-responsive-wrapper]',
+    host: {
+        style: 'overflow-x: auto'
+    }
+})
+export class TableResponsiveWrapperDirective {}
diff --git a/library/src/lib/table/table.module.ts b/library/src/lib/table/table.module.ts
@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { TableDirective } from './table.directive';
 import { ColumnSortableDirective } from './column-sortable.directive';
+import { TableResponsiveWrapperDirective } from './table-responsive-wrapper.directive';
 
 @NgModule({
     imports: [CommonModule],
-    declarations: [TableDirective, ColumnSortableDirective],
-    exports: [TableDirective, ColumnSortableDirective]
+    declarations: [TableDirective, TableResponsiveWrapperDirective, ColumnSortableDirective],
+    exports: [TableDirective, TableResponsiveWrapperDirective, ColumnSortableDirective]
 })
 export class TableModule {}