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