### File

`src/table/table.directive.ts`

### Metadata

Selector | `[ibmTable]`

### Index

###### Inputs
noBorder size skeleton sortable striped
###### HostBindings
class.bx--data-table class.bx--data-table--compact class.bx--data-table--short class.bx--data-table--tall

### Inputs

`noBorder` | Default value : `true`
Defined in src/table/table.directive.ts:9

`size` | Size of the table rows. Type : `"sm" | "sh" | "md" | "lg"` Default value : `"md"`
Defined in src/table/table.directive.ts:18

`skeleton` | Default value : `false`
Defined in src/table/table.directive.ts:13

`sortable` | Default value : `true`
Defined in src/table/table.directive.ts:7

`striped` | Default value : `false`
Defined in src/table/table.directive.ts:11

### HostBindings

class.bx--data-table
`class.bx--data-table: ```
Default value : `true`
Defined in src/table/table.directive.ts:20

class.bx--data-table--compact
`class.bx--data-table--compact: ```
Defined in src/table/table.directive.ts:22

class.bx--data-table--short
`class.bx--data-table--short: ```
Defined in src/table/table.directive.ts:30

class.bx--data-table--tall
`class.bx--data-table--tall: ```
Defined in src/table/table.directive.ts:26

    import { Directive, HostBinding, Input } from "@angular/core";

    @Directive({
    	selector: "[ibmTable]"
    })
    export class TableDirective {
    	@Input() @HostBinding("class.bx--data-table--sort") sortable = true;

    	@Input() @HostBinding("class.bx--data-table--no-border") noBorder = true;

    	@Input() @HostBinding("class.bx--data-table--zebra") striped = false;

    	@Input() @HostBinding("class.bx--skeleton") skeleton = false;

    	/**
    	 * Size of the table rows.
    	 */
    	@Input() size: "sm" | "sh" | "md" | "lg" = "md";

    	@HostBinding("class.bx--data-table") tableClass = true;

    	@HostBinding("class.bx--data-table--compact") get compactClass() {
    		return this.size === "sm";
    	}

    	@HostBinding("class.bx--data-table--tall") get tallClass() {
    		return this.size === "lg";
    	}

    	@HostBinding("class.bx--data-table--short") get shortClass() {
    		return this.size === "sh";
    	}
    }

# result-matching ""

# No results matching ""