[SM-74] TableDataSource for sorting (#4079)

* Initial draft of a table data source

* Improve table data source

* Migrate projects table for demo

* Update existing tables

* Fix access selector

* remove sortDirection from custom fn

* a11y improvements

* update icons; make button full width

* update storybook docs

* apply code review changes

* fix: add table body to projects list

* Fix error on create secret. Fix project list setting projects on getter. Copy table data on set. Fix documentation

* Change signature to protected, rename method to not start with underscore

* add hover and focus effects

Co-authored-by: William Martin <contact@willmartian.com>

libs/components/src/table/table.component.ts

@@ -1,7 +1,50 @@
-import { Component } from "@angular/core";
+import { isDataSource } from "@angular/cdk/collections";
+import {
+  AfterContentChecked,
+  Component,
+  ContentChild,
+  Directive,
+  Input,
+  OnDestroy,
+  TemplateRef,
+} from "@angular/core";
+import { Observable } from "rxjs";
+
+import { TableDataSource } from "./table-data-source";
+
+@Directive({
+  selector: "ng-template[body]",
+})
+export class TableBodyDirective {
+  // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+  constructor(public readonly template: TemplateRef<any>) {}
+}
 
 @Component({
   selector: "bit-table",
   templateUrl: "./table.component.html",
 })
-export class TableComponent {}
+export class TableComponent implements OnDestroy, AfterContentChecked {
+  @Input() dataSource: TableDataSource<any>;
+
+  @ContentChild(TableBodyDirective) templateVariable: TableBodyDirective;
+
+  protected rows: Observable<readonly any[]>;
+
+  private _initialized = false;
+
+  ngAfterContentChecked(): void {
+    if (!this._initialized && isDataSource(this.dataSource)) {
+      this._initialized = true;
+
+      const dataStream = this.dataSource.connect();
+      this.rows = dataStream;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (isDataSource(this.dataSource)) {
+      this.dataSource.disconnect();
+    }
+  }
+}