Merge pull request #335 from hjalmers/ivy-rebuild

Cut release
hjalmers · Aug 7, 2023 · 94d436e · 94d436e
2 parents 28ce50c + cf47090
commit 94d436e
Show file tree

Hide file tree

Showing 19 changed files with 3,696 additions and 455 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -29,7 +29,8 @@ export const parameters = {
           "Basic",
           "Sorting",
           "Nested data",
-          "Row click & hover",
+          "Row click & active state",
+          "Row selection",
           "Pagination",
           ["Setup", "Client-side", "Server-side"],
           "Custom templates",

diff --git a/documentation.json b/documentation.json
diff --git a/projects/core/src/lib/core.component.html b/projects/core/src/lib/core.component.html
@@ -10,6 +10,12 @@
     (tableConfig$ | async)?.stickyHeaders?.column
   "
   [attr.aria-busy]="(loading$ | async) === true ? true : null"
+  [tabindex]="(tableConfig$ | async)?.activateRowOnKeyboardNavigation ? 0 : -1"
+  #tableRef
+  (focus)="listenToKeyboardEvents()"
+  (focusout)="unsubscribeFromKeyboardEvents(tableRef)"
+  (mouseenter)="listenToKeyboardEvents()"
+  (mouseleave)="unsubscribeFromKeyboardEvents(tableRef)"
 >
   <thead>
     <tr
@@ -195,13 +201,28 @@
             let row of table!.data![
               table.info.lazyLoaded ? 0 : (currentPaginationIndex$ | async) || 0
             ];
+            trackBy: trackRowByFn;
             let i = index
           "
           [attr.id]="'tableRow_' + i"
           (click)="table?.config?.rowClick && _rowClick(row, i, $event)"
-          (mouseover)="table?.config?.rowHover && _hoverRow(row, i, $event)"
-          (mouseout)="table?.config?.rowHover && _hoverRow(null, null, $event)"
-          [class.gt-hover]="(rowHover$ | async)?.index === i"
+          (mouseenter)="
+            table?.config?.activateRowOnHover && _activateRow(row, i, $event)
+          "
+          (mouseleave)="
+            table?.config?.activateRowOnHover &&
+              _activateRow(null, null, $event)
+          "
+          [ngClass]="[
+            !!isRowSelectedFn
+              ? (row
+                | rowSelection
+                  : selection
+                  : isRowSelectedFn
+                  : customClasses.selectedRow)
+              : '',
+            (rowActive$ | async)?.index === i ? customClasses.activeRow : ''
+          ]"
         >
           <ng-container
             *ngFor="let column of table.config?.columns | keyvalue: columnOrder"
@@ -261,11 +282,23 @@
             [attr.id]="'tableRow_' + i"
             ngClass="{{ (row.key | dashCase) + '-row' }}"
             (click)="table?.config?.rowClick && _rowClick(row, i, $event)"
-            (mouseover)="table?.config?.rowHover && _hoverRow(row, i, $event)"
-            (mouseout)="
-              table?.config?.rowHover && _hoverRow(null, null, $event)
+            (mouseenter)="
+              table?.config?.activateRowOnHover && _activateRow(row, i, $event)
+            "
+            (mouseleave)="
+              table?.config?.activateRowOnHover &&
+                _activateRow(null, null, $event)
             "
-            [class.gt-hover]="(rowHover$ | async)?.index === i"
+            [ngClass]="[
+              !!isRowSelectedFn
+                ? (row
+                  | rowSelection
+                    : selection
+                    : isRowSelectedFn
+                    : customClasses.selectedRow)
+                : '',
+              (rowActive$ | async)?.index === i ? customClasses.activeRow : ''
+            ]"
           >
             <th class="row-header" scope="row">
               {{ row.value.header || row.key | capitalCase }}