src/table/table.directive.ts
| Selector | [cdsTable], [ibmTable] |
Properties |
Inputs |
HostBindings |
Accessors |
| noBorder | |
Type : boolean
|
|
Default value : true
|
|
|
Defined in src/table/table.directive.ts:10
|
|
| size | |
Type : TableRowSize
|
|
Default value : "md"
|
|
|
Defined in src/table/table.directive.ts:19
|
|
|
Size of the table rows. |
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/table/table.directive.ts:14
|
|
| sortable | |
Type : boolean
|
|
Default value : true
|
|
|
Defined in src/table/table.directive.ts:8
|
|
| striped | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/table/table.directive.ts:12
|
|
| class.cds--data-table |
Type : boolean
|
Default value : true
|
|
Defined in src/table/table.directive.ts:21
|
| class.cds--data-table--lg |
Type : boolean
|
|
Defined in src/table/table.directive.ts:27
|
| class.cds--data-table--md |
Type : boolean
|
|
Defined in src/table/table.directive.ts:26
|
| class.cds--data-table--sm |
Type : boolean
|
|
Defined in src/table/table.directive.ts:25
|
| class.cds--data-table--xl |
Type : boolean
|
|
Defined in src/table/table.directive.ts:28
|
| class.cds--data-table--xs |
Type : boolean
|
|
Defined in src/table/table.directive.ts:24
|
| tableClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--data-table')
|
|
Defined in src/table/table.directive.ts:21
|
| extraSmallSize |
getextraSmallSize()
|
|
Defined in src/table/table.directive.ts:24
|
| smallSize |
getsmallSize()
|
|
Defined in src/table/table.directive.ts:25
|
| mediumSize |
getmediumSize()
|
|
Defined in src/table/table.directive.ts:26
|
| LargeSize |
getLargeSize()
|
|
Defined in src/table/table.directive.ts:27
|
| extraLargeSize |
getextraLargeSize()
|
|
Defined in src/table/table.directive.ts:28
|
import { Directive, HostBinding, Input } from "@angular/core";
import { TableRowSize } from "./table.types";
@Directive({
selector: "[cdsTable], [ibmTable]"
})
export class TableDirective {
@Input() @HostBinding("class.cds--data-table--sort") sortable = true;
@Input() @HostBinding("class.cds--data-table--no-border") noBorder = true;
@Input() @HostBinding("class.cds--data-table--zebra") striped = false;
@Input() @HostBinding("class.cds--skeleton") skeleton = false;
/**
* Size of the table rows.
*/
@Input() size: TableRowSize = "md";
@HostBinding("class.cds--data-table") tableClass = true;
// Bind table size class
@HostBinding("class.cds--data-table--xs") get extraSmallSize() { return this.size === "xs"; }
@HostBinding("class.cds--data-table--sm") get smallSize() { return this.size === "sm"; }
@HostBinding("class.cds--data-table--md") get mediumSize() { return this.size === "md"; }
@HostBinding("class.cds--data-table--lg") get LargeSize() { return this.size === "lg"; }
@HostBinding("class.cds--data-table--xl") get extraLargeSize() { return this.size === "xl"; }
}