### Hierarchy

- TableHeaderItem
  - AITableHeaderItem

## Index

### Constructors

- constructor

### Properties

- _ascending
- alignment
- ariaSortLabel
- ascending
- className
- colSpan
- data
- descending
- filterCount
- filterData
- filterFooter
- filterTemplate
- formatSortLabel
- metadata
- rowSpan
- sortable
- sorted
- style
- template
- title
- visible

### Methods

- compare
- filter

## Constructors

### constructor

- new AITableHeaderItem(rawData?: any): AITableHeaderItem

- - Defined in packages/angular/src/table/table-model.class.ts:10

  #### Parameters

  - ##### Optional rawData: any

  #### Returns AITableHeaderItem

## Properties

### Protected _ascending

_ascending: boolean

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:196

used in `ascending`

### alignment

alignment: "end" | "start" | "center" = 'start'

- Defined in packages/angular/src/table/table-model.class.ts:10

Defines the alignment of the the header item and the column below it.

### ariaSortLabel

ariaSortLabel: string

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:123

The label for the sort button

### ascending

ascending: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:72

If true, sort is set to ascending, if false descending will be true.

### className

className: string

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:60

Attach a class to the column, both the header and column cells.

### colSpan

colSpan: number

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:55

The number of columns to span

### data

data: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:81

Data for the header item.

### descending

descending: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:77

If true, sort is set to descending, if false ascending will be true.

### filterCount

filterCount: number

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:46

Number of applied filters.

`filter()` should set it to appropriate number.

### filterData

filterData: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:190

This is where you store your data when applying filter.

It is the actual object you have access to with `let-filter="data"` in your template.

Make sure to store data in `filter.data` in your template, and you will have it available in `filterData.data` in your extension of `TableHeaderItem`.

Because angular and object references.

### filterFooter

filterFooter: TemplateRef<any>

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:179

Used along with `filterTemplate` to construct the filter popover

### filterTemplate

filterTemplate: TemplateRef<any>

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:175

Used as a template for popover filter.

`let-popover="popover"` will give you access to popover component and allow you to manipulate it if needed.

`let-filter="filter"` will give you access to the "filter". The main takeaway is store the data you need to `filter.data`. You will be able to access it as `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`

Example:

    <ng-template #filter let-popover="popover">
        <ibm-label class="first-label">
            Value
            <input type="text" [(ngModel)]="filter1" class="input-field">
        </ibm-label>
    </ng-template>

    <ng-template #filterFooter let-popover="popover" let-filter="data">
        <button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>
        <button class="btn--secondary" (click)="popover.onClose()">Cancel</button>
    </ng-template>

Set the template with, for example:

    new FilterableHeaderItem({
        filterTemplate: this.filter,
        filterFooter: this.filterFooter
    })

    class FilterableHeaderItem extends TableHeaderItem {
        // custom filter function
        filter(item: TableItem): boolean {
            if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {
                this.filterCount = 1;
                return false;
            }
            this.filterCount = 0;
            return true;
        }
    }

### formatSortLabel

formatSortLabel: (label: string, staticLabel?: string) => string

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:127

A callback function to format the sort label. Will be heavily called.

#### Type declaration

- - (label: string, staticLabel?: string): string

  - #### Parameters

    - ##### label: string

    - ##### Optional staticLabel: string

    #### Returns string

### metadata

metadata: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:86

Data for the header item for general usage in the controller. For example, which `field` is this column related to.

### rowSpan

rowSpan: number

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:51

The number of rows to span NOTE: not supported by the default carbon table

### sortable

sortable: boolean

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:39

Enables sorting on click by default. If false then this column won't show a sorting arrow at all.

### sorted

sorted: boolean

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:33

Disables sorting by default.

### style

style: {}

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:67

Style for the column, applied to every element in the column.

ngStyle-like format

#### Type declaration

### template

template: TemplateRef<any>

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:119

Used to display data in a desired way.

If not provided, displays data as a simple string.

Usage:

In a component where you're using the table create a template like:

    <ng-template #customHeaderTemplate let-data="data">
            <i><a [routerLink]="data.link">{{data.name}}</a></i>
    </ng-template>

where we assume your data contains `link` and `name`. `let-data="data"` is necessary for you to be able to access item's data in the template.

Create `ViewChild` property with:

    (at)ViewChild("customHeaderTemplate")
    protected customHeaderTemplate: TemplateRef<any>;

Set the template to the header item, for example:

    this.model.header = [
            new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})
    ];

### title

title: any

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:197

### visible

visible: boolean

- Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:28

Defines if column under this TableHeaderItem should be displayed.

## Methods

### compare

- compare(one: TableItem, two: TableItem): number

- - Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:212

  Used for sorting rows of the table.

  Override to enable different sorting.

  < 0 if `one` should go before `two`

  > 0 if `one` should go after `two` 0 if it doesn't matter (they are the same)

  #### Parameters

  - ##### one: TableItem

  - ##### two: TableItem

  #### Returns number

### filter

- filter(item: TableItem): boolean

- - Defined in node_modules/carbon-components-angular/table/table-header-item.class.d.ts:224

  Used to filter rows in the table.

  Override to make a custom filter.

  Even though there is just one filter function, there can be multiple filters. When implementing filter, set `filterCount` before returning.

  `true` to hide the row `false` to show the row

  #### Parameters

  - ##### item: TableItem

  #### Returns boolean

Generated using TypeDoc