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

docs/app/documentation/component-docs/table/examples/table-responsive-example.component.html

@@ -0,0 +1,23 @@
+
+<div fd-table-fixed>
+    <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>

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: [`
+        .fd-table--fixed {
+            padding-left: 0;
+        }
+    `]
+})
+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'
+            }
+        ];
+    }
+}

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-fixed-table</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>

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');
     }

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,

library/src/lib/table/table-fixed.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostBinding } 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-fixed-table>
+ *         <table fd-fixed-table>
+ *         </table>
+ *     </div>
+ * ```
+ */
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: '[fd-table-fixed]'
+})
+export class TableFixedDirective {
+
+    /** @hidden */
+    @HostBinding('class.fd-table--fixed')
+    fdTableFixedClass: boolean = true;
+
+}

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 { TableFixedDirective } from './table-fixed.directive';
 
 @NgModule({
     imports: [CommonModule],
-    declarations: [TableDirective, ColumnSortableDirective],
-    exports: [TableDirective, ColumnSortableDirective]
+    declarations: [TableDirective, TableFixedDirective, ColumnSortableDirective],
+    exports: [TableDirective, TableFixedDirective, ColumnSortableDirective]
 })
 export class TableModule {}