Tanstack investigate

apps/demo-app/src/app/content/ui-components/table-content/table-content.component.html

@@ -2,11 +2,21 @@
   <ng-template let-section #customAngular>
     @switch (section.content) {
       @case ('simple table') {
+        <app-single-panel-example-display
+          height="600px"
+          path="app/content/ui-components/table-content/tanstack-example"
+          class="example"
+          label="Tanstack table example"
+        >
+          <app-tanstack-example></app-tanstack-example>
+        </app-single-panel-example-display>
+      }
+      @case ('deprecated simple table') {
         <app-single-panel-example-display
           height="600px"
           path="app/content/ui-components/table-content/table-example"
           class="example"
-          label="table example"
+          label="Deprectated table example"
         >
           <app-table-example></app-table-example>
         </app-single-panel-example-display>

apps/demo-app/src/app/content/ui-components/table-content/table-content.component.ts

@@ -1,19 +1,30 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
 import { SinglePanelExampleDisplayComponent } from '../../../platform/single-panel-example-display/single-panel-example-display.component';
 import { ContentContainerComponent } from '../../content-container/content-container.component';
 import { TableExampleComponent } from './table-example/table-example.component';
+import { TanstackExampleComponent } from './tanstack-example/tanstack-example.component';
 
 @Component({
   selector: 'app-table-content',
   imports: [
     CommonModule,
     SinglePanelExampleDisplayComponent,
-    TableExampleComponent,
+    TanstackExampleComponent,
     ContentContainerComponent,
+    TableExampleComponent,
   ],
   templateUrl: './table-content.component.html',
-  styleUrls: ['../../examples.scss', './table-content.component.scss'],
+  styleUrls: [
+    '../../examples.scss',
+    '../../api-documentation.scss',
+    './table-content.component.scss',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class TableContentComponent {}

apps/demo-app/src/app/content/ui-components/table-content/table-example/table-example.component.html

@@ -1 +1,47 @@
-<hsi-ui-table [config$]="config$"></hsi-ui-table>
+@if (dataSource.columns$ | async; as columns) {
+  <table cdk-table [dataSource]="dataSource" class="table-container">
+    @for (column of columns; track column.id) {
+      <ng-container [cdkColumnDef]="column.id">
+        @if (column.sortable) {
+          <th
+            scope="col"
+            cdk-header-cell
+            *cdkHeaderCellDef="let element"
+            (click)="dataSource.sort(column)"
+          >
+            <div class="header-cell-sort">
+              {{ column.label }}
+              <span
+                [ngClass]="[
+                  'material-sort-icon',
+                  column.sortDirection,
+                  column.activelySorted ? 'actively-sorted' : '',
+                  'material-symbols-outlined',
+                ]"
+                [attr.aria-hidden]="true"
+                >{{ sortIcon }}</span
+              >
+            </div></th
+          >
+        } @else {
+          <th cdk-header-cell *cdkHeaderCellDef="let element">
+            {{ column.label }}
+          </th>
+        }
+        <td
+          class="table-cell"
+          [class.sorted-cell]="column.sortable"
+          cdk-cell
+          *cdkCellDef="let element"
+        >
+          {{ element | getValueByKey: column.key }}
+        </td>
+      </ng-container>
+    }
+    <tr cdk-header-row *cdkHeaderRowDef="dataSource.columnIds$ | async"></tr>
+    <tr
+      cdk-row
+      *cdkRowDef="let row; columns: dataSource.columnIds$ | async"
+    ></tr>
+  </table>
+}

apps/demo-app/src/app/content/ui-components/table-content/table-example/table-example.component.scss

@@ -0,0 +1,69 @@
+@use 'vars' as *;
+@use 'functions' as *;
+@use 'colors';
+$icon-width: 0.9rem;
+$icon-left-margin: 0.2rem;
+$icon-right-margin: 0.4rem;
+
+.header-cell-sort {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.material-symbols-outlined {
+  display: flex;
+  justify-content: center;
+  width: $icon-width;
+  height: 1.2rem;
+  font-size: 1.25rem;
+  margin-left: $icon-left-margin;
+  margin-right: $icon-right-margin;
+  opacity: 0.25;
+  transition: all 150ms ease-in-out;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  &.actively-sorted {
+    opacity: 1;
+  }
+}
+
+.desc {
+  transform: rotate(180deg);
+}
+
+.table-cell {
+  text-align: right;
+
+  &.sorted-cell {
+    padding-right: $icon-left-margin + $icon-width + $icon-right-margin;
+  }
+}
+
+.table-container {
+  border-spacing: 0;
+  td:last-child {
+    &.left {
+      padding-right: 0;
+    }
+  }
+
+  th:last-child {
+    &.left {
+      padding-right: 0;
+    }
+  }
+
+  th {
+    vertical-align: bottom;
+    &.sorted-header {
+      padding-right: 0;
+    }
+  }
+}

apps/demo-app/src/app/content/ui-components/table-content/table-example/table-example.component.ts

@@ -1,33 +1,121 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TableColumn, TableModule } from '@hsi/ui-components';
-import { BehaviorSubject } from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { GetValueByKeyPipe } from '@hsi/app-dev-kit';
+import {
+  HsiUiTableDataSource,
+  TableColumnsBuilder,
+  TableModule,
+} from '@hsi/ui-components';
+import { of } from 'rxjs';
 
+enum ColumnNames {
+  fruit = 'Fruit',
+  colorName = 'Color',
+  inventory = 'Inventory',
+  price = 'Sell price',
+}
+
+enum FruitInfo {
+  fruit = 'fruit',
+  colorName = 'color',
+  inventory = 'metrics.inventory',
+  price = 'metrics.price',
+}
+
+class FruitType {
+  fruit: string;
+  color: string;
+  metrics: {
+    inventory: number;
+    price: number;
+  };
+}
+
+/**
+ * @deprecated This component is deprecated. See `tanstack-example.component.ts` for the recommended implementation.
+ */
 @Component({
   selector: 'app-table-example',
-  imports: [CommonModule, TableModule],
+  standalone: true,
+  imports: [CommonModule, TableModule, GetValueByKeyPipe],
   templateUrl: './table-example.component.html',
-  styleUrl: './table-example.component.scss',
+  styleUrls: ['../../../examples.scss', './table-example.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableExampleComponent {
-  config$ = new BehaviorSubject({
-    data: [
-      { fruit: 'apple', color: 'red' },
-      { fruit: 'orange', color: 'orange' },
-      { fruit: 'banana', color: 'yellow' },
-    ],
-    columns: [
-      new TableColumn<{ fruit: string; color: string }>({
-        label: 'Fruit',
-        getFormattedValue: (x) => x.fruit,
-        sortable: true,
-      }),
-      new TableColumn<{ fruit: string; color: string }>({
-        label: 'Color',
-        getFormattedValue: (x) => x.color,
-        sortable: true,
-      }),
-    ],
-  });
+export class TableExampleComponent implements OnInit {
+  @Input() sortIcon: string = 'arrow_upward';
+  dataSource: HsiUiTableDataSource<FruitType>;
+
+  ngOnInit(): void {
+    this.setTableData();
+  }
+
+  setTableData() {
+    const initData$ = of([
+      {
+        fruit: 'lemon',
+        color: 'yellow',
+        metrics: { inventory: 10, price: 1.2 },
+      },
+      {
+        fruit: 'mango',
+        color: 'orange',
+        metrics: { inventory: 5, price: 2.5 },
+      },
+      {
+        fruit: 'avocado',
+        color: 'green',
+        metrics: { inventory: 20, price: 3.0 },
+      },
+      {
+        fruit: 'apple',
+        color: 'red',
+        metrics: { inventory: 15, price: 1.5 },
+      },
+      {
+        fruit: 'orange',
+        color: 'orange',
+        metrics: { inventory: 20, price: 1.8 },
+      },
+      {
+        fruit: 'banana',
+        color: 'yellow',
+        metrics: { inventory: 5, price: 1.0 },
+      },
+    ]);
+    const initColumns$ = of(
+      new TableColumnsBuilder<FruitType>()
+        .addColumn(
+          (column) =>
+            column
+              .label(ColumnNames.fruit)
+              .displayKey(FruitInfo.fruit)
+              .ascendingSortFunction((a, b) => a.fruit.localeCompare(b.fruit))
+              .sortOrder(1)
+              .sortable(true)
+              .sortDirection('asc') // initial sort direction
+        )
+        .addColumn((column) =>
+          column
+            .displayKey(FruitInfo.colorName)
+            .label(ColumnNames.colorName)
+            .sortable(true)
+            .ascendingSortFunction((a, b) => a.color.localeCompare(b.color))
+        )
+        .addColumn((column) =>
+          column
+            .displayKey(FruitInfo.inventory)
+            .label(ColumnNames.inventory)
+            .sortable(true)
+            .getSortValue((x) => x.metrics.inventory)
+        )
+        .getConfig()
+    );
+    this.dataSource = new HsiUiTableDataSource(initData$, initColumns$);
+  }
 }