support menu column (#15754)

* support menu column

* comments
This commit is contained in:
Alan Ren
2021-06-21 10:36:55 -07:00
committed by GitHub
parent 22dcf7777c
commit 0e1a8ab8ea
5 changed files with 80 additions and 11 deletions

View File

@@ -1,13 +1,13 @@
<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel"
[ngStyle]="CSSStyles" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
<thead role="rowgroup">
<tr role="row">
<ng-container *ngFor="let column of columns; let c = index;">
<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)"
[ngStyle]="column.headerCssStyles"
[attr.aria-label]="getHeaderAriaLabel(c)">
[ngStyle]="column.headerCssStyles" [attr.aria-label]="getHeaderAriaLabel(c)">
{{column.displayName}}
<checkbox *ngIf="headerCheckboxVisible(c)" [checked]="isHeaderChecked(c)"
[aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
[aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
label=""></checkbox>
</th>
</ng-container>
@@ -20,8 +20,7 @@
<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
[attr.aria-label]="getAriaLabel(r, c)"
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"
role="gridcell">
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)" role="gridcell">
<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
[enabled]="isControlEnabled(r, c)" [checked]="isChecked(r,c)"
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
@@ -42,6 +41,8 @@
<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
</model-component-wrapper>
<button *ngIf="isContextMenuColumn(c)" [title]="contextMenuButtonTitle" [attr.aria-label]="contextMenuButtonTitle" class="codicon toggle-more" (click)="onContextMenuRequested($event,r,c)">
</button>
</td>
</ng-container>
</tr>