[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>

apps/web/src/app/organizations/components/access-selector/access-selector.component.html

@@ -40,7 +40,7 @@
       <th bitCell style="width: 50px"></th>
     </tr>
   </ng-container>
-  <ng-container body formArrayName="items">
+  <ng-template body formArrayName="items">
     <tr
       bitRow
       *ngFor="let item of selectionList.selectedItems; let i = index"
@@ -134,5 +134,5 @@
     <tr *ngIf="selectionList.selectedItems.length == 0">
       <td bitCell>{{ emptySelectionText }}</td>
     </tr>
-  </ng-container>
+  </ng-template>
 </bit-table>

apps/web/src/app/organizations/manage/events.component.html

@@ -75,7 +75,7 @@
         <th bitCell>{{ "event" | i18n }}</th>
       </tr>
     </ng-container>
-    <ng-container body>
+    <ng-template body>
       <tr bitRow *ngFor="let e of events" alignContent="top">
         <td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
         <td bitCell>
@@ -86,7 +86,7 @@
         </td>
         <td bitCell [innerHTML]="e.message"></td>
       </tr>
-    </ng-container>
+    </ng-template>
   </bit-table>
   <button
     #moreBtn