Merge pull request #2517 from kirbydesign/component/2494-kirby-data-t…

…able

Component/2494 kirby data table

apps/cookbook/src/app/examples/data-table-example/data-table-example.component.html

@@ -0,0 +1,7 @@
+<h1>Data table</h1>
+
+<h2>Data table</h2>
+<cookbook-data-table-default-example></cookbook-data-table-default-example>
+
+<h2>Data table in card</h2>
+<cookbook-data-table-card-example></cookbook-data-table-card-example>

apps/cookbook/src/app/examples/data-table-example/data-table-example.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-data-table-example',
+  templateUrl: './data-table-example.component.html',
+})
+export class DataTableExampleComponent {}

apps/cookbook/src/app/examples/data-table-example/examples/card.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ToastController } from '@kirbydesign/designsystem';
+import { Person, table_example_data } from '../table_example_data';
+
+const config = {
+  selector: 'cookbook-data-table-card-example',
+  template: `<kirby-card>
+  <table kirby-table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Eyes</th>
+        <th>Gender</th>
+        <th>Hair</th>
+        <th>Skin</th>
+        <th>Birth year</th>
+        <th style="text-align:right;">Height (cm)</th>
+        <th style="text-align:right;">Weight (kg)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr kirby-tr *ngFor="let rowData of tableData; let i = index" [selectable]="true" (click)="onClickRow(i)">
+          <td>{{rowData.name}}</td>
+          <td>{{rowData.eye_color}}</td>
+          <td>{{rowData.gender}}</td>
+          <td>{{rowData.hair_color}}</td>
+          <td>{{rowData.skin_color}}</td>
+          <td>{{rowData.birth_year}}</td>
+          <td style="text-align:right;">{{rowData.height}}</td>
+          <td style="text-align:right;">{{rowData.mass}}</td>
+      </tr>
+    </tbody>
+  </table>
+</kirby-card>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class DataTableCardExampleComponent {
+  tableData: Person[] = table_example_data;
+  template: string = config.template;
+
+  constructor(private toastController: ToastController) {}
+
+  onClickRow(index: number) {
+    this.toastController.showToast({
+      message: `You pressed row number ${index}`,
+      messageType: 'success',
+      durationInMs: 2000,
+    });
+  }
+}

apps/cookbook/src/app/examples/data-table-example/examples/default.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { Person, table_example_data } from '../table_example_data';
+
+const config = {
+  selector: 'cookbook-data-table-default-example',
+  template: `<table kirby-table [fixedLayout]="true">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th style="text-align:right;">Height (cm)</th>
+        <th style="text-align:right;">Weight (kg)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr kirby-tr *ngFor="let rowData of tableData">
+          <td>{{rowData.name}}</td>
+          <td style="text-align:right;">{{rowData.height}}</td>
+          <td style="text-align:right;">{{rowData.mass}}</td>
+      </tr>
+    </tbody>
+  </table>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class DataTableDefaultExampleComponent {
+  template: string = config.template;
+  tableData: Person[] = table_example_data.slice(0, 3);
+}

apps/cookbook/src/app/examples/data-table-example/table-example.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { DataTableCardExampleComponent } from './examples/card';
+import { DataTableDefaultExampleComponent } from './examples/default';
+
+const COMPONENT_DECLARATIONS = [DataTableCardExampleComponent, DataTableDefaultExampleComponent];
+
+@NgModule({
+  imports: [CommonModule, KirbyModule],
+  declarations: COMPONENT_DECLARATIONS,
+  exports: COMPONENT_DECLARATIONS,
+})
+export class DataTableExampleModule {}

apps/cookbook/src/app/examples/data-table-example/table_example_data.ts

@@ -0,0 +1,73 @@
+export interface Person {
+  name: string;
+  eye_color: string;
+  gender: string;
+  hair_color: string;
+  skin_color: string;
+  birth_year: string;
+  height: string;
+  mass: string;
+}
+
+export const table_example_data: Person[] = [
+  {
+    name: 'Luke Skywalker',
+    height: '172',
+    mass: '77',
+    hair_color: 'blond',
+    skin_color: 'fair',
+    eye_color: 'blue',
+    birth_year: '19BBY',
+    gender: 'male',
+  },
+  {
+    name: 'C-3PO',
+    height: '167',
+    mass: '75',
+    hair_color: 'n/a',
+    skin_color: 'gold',
+    eye_color: 'yellow',
+    birth_year: '112BBY',
+    gender: 'n/a',
+  },
+  {
+    name: 'R2-D2',
+    height: '96',
+    mass: '32',
+    hair_color: 'n/a',
+    skin_color: 'white, blue',
+    eye_color: 'red',
+    birth_year: '33BBY',
+    gender: 'n/a',
+  },
+  {
+    name: 'Darth Vader',
+    height: '202',
+    mass: '136',
+    hair_color: 'none',
+    skin_color: 'white',
+    eye_color: 'yellow',
+    birth_year: '41.9BBY',
+    gender: 'male',
+  },
+  {
+    name: 'Leia Organa',
+    height: '150',
+    mass: '49',
+    hair_color: 'brown',
+    skin_color: 'light',
+    eye_color: 'brown',
+    birth_year: '19BBY',
+    gender: 'female',
+  },
+  {
+    name: 'Obi-Wan Kenobi',
+    height: '182',
+    mass: '77',
+    hair_color: 'auburn, white',
+    skin_color: 'fair',
+    eye_color: 'blue-gray',
+    birth_year: '57BBY',
+    gender: 'male',
+  },
+];

apps/cookbook/src/app/examples/examples.common.ts

@@ -47,6 +47,7 @@ import { ToastExampleComponent } from './toast-example/toast-example.component';
 import { ToggleExampleComponent } from './toggle-example/toggle-example.component';
 import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refresh/page-pull-to-refresh-example.component';
 import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
+import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 
 export const COMPONENT_DECLARATIONS: any[] = [
   ExamplesComponent,
@@ -99,4 +100,5 @@ export const COMPONENT_DECLARATIONS: any[] = [
   ItemGroupExampleComponent,
   SectionHeaderExampleComponent,
   ListExperimentalExampleComponent,
+  DataTableExampleComponent,
 ];

apps/cookbook/src/app/examples/examples.module.ts

@@ -10,6 +10,7 @@ import { BadgeExampleModule } from './badge-example/badge-example.module';
 import { CardExampleModule } from './card-example/card-example.module';
 import { ChartsExampleModule } from './charts-example/charts-example.module';
 import { CheckboxExampleModule } from './checkbox-example/checkbox-example.module';
+import { DataTableExampleModule } from './data-table-example/table-example.module';
 import { DropdownExampleModule } from './dropdown-example/dropdown-example.module';
 import { COMPONENT_DECLARATIONS } from './examples.common';
 import { ExamplesSharedModule } from './examples.shared.module';
@@ -57,6 +58,7 @@ const IMPORTS = [
   ItemGroupExampleModule,
   ListExperimentalExampleModule,
   VirtualScrollExampleModule,
+  DataTableExampleModule,
 ];
 
 @NgModule({

apps/cookbook/src/app/examples/examples.routes.ts

@@ -72,6 +72,7 @@ import { ToggleExampleComponent } from './toggle-example/toggle-example.componen
 import { VirtualScrollListExampleComponent } from './virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component';
 import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refresh/page-pull-to-refresh-example.component';
 import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
+import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 
 VirtualScrollListExampleComponent;
 export const routes: Routes = [
@@ -478,4 +479,8 @@ export const routes: Routes = [
     path: 'styling-HTML-lists',
     component: StylingHtmlListsExampleComponent,
   },
+  {
+    path: 'data-table',
+    component: DataTableExampleComponent,
+  },
 ];

apps/cookbook/src/app/showcase/data-table-showcase/data-table-api.ts

@@ -0,0 +1,19 @@
+import {
+  ApiDescriptionProperty,
+  ApiDescriptionPropertyColumns,
+} from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+
+export const dataTableApi: ApiDescriptionProperty[] = [
+  {
+    name: '[fixedLayout]',
+    description: `(Optional) [kirby-table] Is layout of table fixed.`,
+    type: ['boolean'],
+    defaultValue: 'false',
+  },
+  {
+    name: '[selectable]',
+    description: `(Optional) [kirby-tr] Is row selectable.`,
+    type: ['boolean'],
+    defaultValue: 'false',
+  },
+];

apps/cookbook/src/app/showcase/data-table-showcase/data-table-showcase.component.html

@@ -0,0 +1,40 @@
+<div class="example">
+  <p>
+    Data Tables allow the consumer to show large amounts of complex data in tabular form, with rows
+    and columns. Columns can be named through the use of headers.
+  </p>
+  <p>
+    <i>
+      <strong>Please note:</strong>
+      Kirby Data Table is not a finished component, and it is very modular. This means that it lacks
+      a number of features and all uses should be thoroughly aligned with a designer before use (use
+      the corresponding design guidelines).
+    </i>
+  </p>
+  Prominent features that are missing include:
+  <ul>
+    <li>EventEmitters on headers</li>
+    <li>Selectable headers</li>
+    <li>Asc/desc sorting arrows in headers</li>
+    <li>EventEmitters on rows</li>
+    <li>Responsivity (i.e., no scroll/collapsible columns/etc.)</li>
+  </ul>
+
+  <h2>Data table with minimal data</h2>
+  <cookbook-example-viewer [html]="dataTableDefaultExample.template">
+    <cookbook-data-table-default-example
+      #dataTableDefaultExample
+    ></cookbook-data-table-default-example>
+  </cookbook-example-viewer>
+
+  <h2>Data table wrapped with Kirby Card</h2>
+  <p>Data table wrapped with card and with selectable rows.</p>
+  <cookbook-example-viewer [html]="dataTableCardExample.template">
+    <cookbook-data-table-card-example #dataTableCardExample></cookbook-data-table-card-example>
+  </cookbook-example-viewer>
+</div>
+
+<h2>API Description</h2>
+<cookbook-api-description-properties
+  [properties]="_apiDescriptionPropertiesTable"
+></cookbook-api-description-properties>

apps/cookbook/src/app/showcase/data-table-showcase/data-table-showcase.component.scss

@@ -0,0 +1 @@
+@use '../showcase.shared';

apps/cookbook/src/app/showcase/data-table-showcase/data-table-showcase.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { dataTableApi } from './data-table-api';
+import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+
+@Component({
+  selector: 'cookbook-data-table-showcase',
+  templateUrl: './data-table-showcase.component.html',
+  styleUrls: ['./data-table-showcase.component.scss'],
+})
+export class DataTableShowcaseComponent {
+  _apiDescriptionPropertiesTable: ApiDescriptionProperty[] = [...dataTableApi];
+}

apps/cookbook/src/app/showcase/showcase.common.ts

@@ -52,6 +52,7 @@ import { ToggleButtonShowcaseComponent } from './toggle-button-showcase/toggle-b
 import { ToggleShowcaseComponent } from './toggle-showcase/toggle-showcase.component';
 import { ToolbarShowcaseComponent } from './toolbar-showcase/toolbar-showcase.component';
 import { DropdownShowcaseComponent } from './dropdown-showcase/dropdown-showcase.component';
+import { DataTableShowcaseComponent } from './data-table-showcase/data-table-showcase.component';
 
 export const COMPONENT_IMPORTS: any[] = [ExamplesModule, ShowcaseRoutingModule];
 
@@ -104,6 +105,7 @@ export const COMPONENT_EXPORTS: any[] = [
   ItemSlidingShowcaseComponent,
   StylingHtmlListsShowcaseComponent,
   ListExperimentalShowcaseComponent,
+  DataTableShowcaseComponent,
 ];
 
 export const COMPONENT_DECLARATIONS: any[] = [...COMPONENT_EXPORTS, ShowcaseComponent];

apps/cookbook/src/app/showcase/showcase.routes.ts

@@ -15,6 +15,7 @@ import { CardShowcaseComponent } from './card-showcase/card-showcase.component';
 import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component';
 import { ColorsShowcaseComponent } from './colors-showcase/colors-showcase.component';
+import { DataTableShowcaseComponent } from './data-table-showcase/data-table-showcase.component';
 import { DividerShowcaseComponent } from './divider-showcase/divider-showcase.component';
 import { DropdownShowcaseComponent } from './dropdown-showcase/dropdown-showcase.component';
 import { EmptyStateShowcaseComponent } from './empty-state-showcase/empty-state-showcase.component';
@@ -276,6 +277,10 @@ export const routes: Routes = [
         path: 'styling-HTML-lists',
         component: StylingHtmlListsShowcaseComponent,
       },
+      {
+        path: 'data-table',
+        component: DataTableShowcaseComponent,
+      },
     ],
   },
 ];

libs/designsystem/src/lib/components/data-table/data-table.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableRowComponent } from './table-row/table-row.component';
+import { TableComponent } from './table/table.component';
+
+@NgModule({
+  declarations: [TableComponent, TableRowComponent],
+  imports: [CommonModule],
+  exports: [TableComponent, TableRowComponent],
+})
+export class DataTableModule {}

libs/designsystem/src/lib/components/data-table/index.ts

@@ -0,0 +1,4 @@
+export { TableComponent } from './table/table.component';
+export { TableRowComponent } from './table-row/table-row.component';
+
+export { DataTableModule } from './data-table.module';