src/table/body/table-expanded-row.component.ts
| selector | [cdsTableExpandedRow], [ibmTableExpandedRow] |
| template | |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
| expanded | |
Type : boolean
|
|
Default value : false
|
|
| row | |
Type : any[]
|
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
| attr.data-child-row |
Type : boolean
|
Default value : true
|
| class.cds--expandable-row |
Type : boolean
|
Default value : true
|
| style.display |
Type : string
|
| firstExpandedDataInRow | ||||
firstExpandedDataInRow(row)
|
||||
|
Parameters :
Returns :
any
|
| firstExpandedTemplateInRow | ||||
firstExpandedTemplateInRow(row)
|
||||
|
Parameters :
Returns :
any
|
| dataChildRow |
Default value : true
|
Decorators :
@HostBinding('attr.data-child-row')
|
| expandableRowClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--expandable-row')
|
| displayStyle |
getdisplayStyle()
|
import {
Component,
HostBinding,
Input
} from "@angular/core";
@Component({
// tslint:disable-next-line: component-selector
selector: "[cdsTableExpandedRow], [ibmTableExpandedRow]",
template: `
<td [attr.colspan]="row.length + 2">
<ng-container *ngIf="!firstExpandedTemplateInRow(row)">
{{firstExpandedDataInRow(row)}}
</ng-container>
<ng-template
[ngTemplateOutlet]="firstExpandedTemplateInRow(row)"
[ngTemplateOutletContext]="{data: firstExpandedDataInRow(row)}">
</ng-template>
</td>
`
})
export class TableExpandedRow {
@Input() row: any[];
@Input() skeleton = false;
@HostBinding("class.cds--expandable-row") expandableRowClass = true;
@HostBinding("attr.data-child-row") dataChildRow = true;
@Input() expanded = false;
@HostBinding("style.display") get displayStyle() {
return this.expanded ? null : "none";
}
firstExpandedTemplateInRow(row) {
const found = row.find(d => d.expandedTemplate);
if (found) {
return found.expandedTemplate;
}
return found;
}
firstExpandedDataInRow(row) {
const found = row.find(d => d.expandedData);
if (found) {
return found.expandedData;
}
return found;
}
}