src/components-examples/aria/grid/grid-table/grid-table-example.html - main - githubmirror/components

src/components-examples/aria/grid/grid-table/grid-table-example.html
110 строк4 KB
Cheng-Hsuan Tsai
refactor(aria/grid): support deferred focus target (#33072)
24 апр 2026, 19:46
24 апр 2026, 19:46a7b2c51
<table ngGrid class="example-table">
  <thead>
    <tr ngGridRow class="example-header-row">
      <th ngGridCell role="columnheader" class="example-cell example-cell-checkbox">
        <mat-checkbox
          ngGridCellWidget
          [focusTarget]="cb._inputElement"
          [checked]="allSelected()"
          [indeterminate]="partiallySelected()"
          (change)="updateSelection($event.checked)"
          aria-label="all rows"
          #cb="matCheckbox"
        ></mat-checkbox>
      </th>
      <th ngGridCell role="columnheader" class="example-cell">Summary</th>
      <th ngGridCell role="columnheader" class="example-cell">Assignee</th>
      <th ngGridCell role="columnheader" class="example-cell">Tags</th>
      <th ngGridCell role="columnheader" class="example-cell">Actions</th>
      <th ngGridCell role="columnheader" class="example-cell">More</th>
    </tr>
  </thead>
  <tbody>
    @for (task of tasks(); track task) {
      <tr ngGridRow class="example-row">
        <td ngGridCell class="example-cell example-cell-checkbox">
          <mat-checkbox
            ngGridCellWidget
            [focusTarget]="cb._inputElement"
            [(ngModel)]="task.selected"
            aria-label="row {{$index}}"
            #cb="matCheckbox"
          ></mat-checkbox>
        </td>
        <td ngGridCell class="example-cell example-cell-summary">
          <div
            role="button"
            ngGridCellWidget
            widgetType="editable"
            [focusTarget]="findSummaryInput"
            (activated)="startEdit($event, task)"
            (deactivated)="completeEdit($event, task)"
            #widget="ngGridCellWidget"
          >
            @if (!widget.isActivated()) {
              <span>{{task.summary()}}</span>
              <span
                aria-hidden="true"
                class="material-symbols-outlined example-edit-icon"
                (click)="widget.activate()"
                >edit</span
              >
            } @else {
              <mat-form-field
                subscriptSizing="dynamic"
              >
                <input matInput class="summary-input" [(ngModel)]="tempInput" />
              </mat-form-field>
            }
          </div>
        </td>
        <td ngGridCell class="example-cell example-cell-assignee">
          <div
            role="button"
            ngGridCellWidget
            widgetType="complex"
            (activated)="select.focus()"
            #widget="ngGridCellWidget"
          >
            <mat-form-field subscriptSizing="dynamic">
              <mat-select aria-label="assignee" [(value)]="task.assignee" tabindex="-1" #select>
                @for (e of employees; track e) {
                  <mat-option [value]="e">{{e}}</mat-option>
                }
              </mat-select>
            </mat-form-field>
          </div>
        </td>
        <td ngGridCell class="example-cell">
          <div
            role="button"
            ngGridCellWidget
            widgetType="complex"
            (activated)="chips.focus()"
            #widget="ngGridCellWidget"
          >
            <grid-chips [(values)]="task.tags" [tabindex]="-1" #chips />
          </div>
        </td>
        <td ngGridCell class="example-cell">
          <button mat-button ngGridCellWidget (click)="viewDetails(task)">View</button>
        </td>
        <td ngGridCell class="example-cell">
          <button
            mat-icon-button
            ngGridCellWidget
            widgetType="complex"
            [matMenuTriggerFor]="menu"
            (activated)="menuTrigger.openMenu()"
            #menuTrigger="matMenuTrigger"
          >
            <span class="material-symbols-outlined">more_vert</span>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="deleteTask(task)">Delete</button>
          </mat-menu>
        </td>
      </tr>
    }
  </tbody>
</table>