### File

`src/table/table-header-item.class.ts`

### Index

###### Properties
Protected _ascending ariaSortLabel className colSpan data filterCount filterData filterFooter filterTemplate formatSortLabel metadata rowSpan sortable sorted style template visible
###### Methods
compare filter
###### Accessors
ascending descending

### Constructor

`constructor(rawData?: any)`
Defined in src/table/table-header-item.class.ts:208
Creates an instance of TableHeaderItem. Parameters :
Name | Type | Optional
rawData | `any` | Yes

### Properties

Protected _ascending
`_ascending: ```
Default value : `true`
Defined in src/table/table-header-item.class.ts:208
used in `ascending`

ariaSortLabel
`ariaSortLabel: `string``
Type : `string`
Defined in src/table/table-header-item.class.ts:130
The label for the sort button

className
`className: `string``
Type : `string`
Defined in src/table/table-header-item.class.ts:50
Attach a class to the column, both the header and column cells.

colSpan
`colSpan: `number``
Type : `number`
Default value : `1`
Defined in src/table/table-header-item.class.ts:44
The number of columns to span

data
`data: `any``
Type : `any`
Defined in src/table/table-header-item.class.ts:85
Data for the header item.

filterCount
`filterCount: `number``
Type : `number`
Default value : `0`
Defined in src/table/table-header-item.class.ts:33
Number of applied filters. `filter()` should set it to appropriate number.

filterData
`filterData: `any``
Type : `any`
Defined in src/table/table-header-item.class.ts:201
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>``
Type : `TemplateRef<any>`
Defined in src/table/table-header-item.class.ts:189
Used along with `filterTemplate` to construct the filter popover

filterTemplate
`filterTemplate: `TemplateRef<any>``
Type : `TemplateRef<any>`
Defined in src/table/table-header-item.class.ts:184
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: `function``
Type : `function`
Defined in src/table/table-header-item.class.ts:135
A callback function to format the sort label. Will be heavily called.

metadata
`metadata: `any``
Type : `any`
Defined in src/table/table-header-item.class.ts:91
Data for the header item for general usage in the controller. For example, which `field` is this column related to.

rowSpan
`rowSpan: `number``
Type : `number`
Default value : `1`
Defined in src/table/table-header-item.class.ts:39
The number of rows to span NOTE: not supported by the default carbon table

sortable
`sortable: ```
Default value : `true`
Defined in src/table/table-header-item.class.ts:25
Enables sorting on click by default. If false then this column won't show a sorting arrow at all.

sorted
`sorted: ```
Default value : `false`
Defined in src/table/table-header-item.class.ts:18
Disables sorting by default.

style
`style: `object``
Type : `object`
Default value : `{}`
Defined in src/table/table-header-item.class.ts:58
Style for the column, applied to every element in the column. ngStyle-like format

template
`template: `TemplateRef<any>``
Type : `TemplateRef<any>`
Defined in src/table/table-header-item.class.ts:125
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})
         * ];
         *

visible
`visible: ```
Default value : `true`
Defined in src/table/table-header-item.class.ts:12
Defines if column under this TableHeaderItem should be displayed.

### Methods

compare
`compare(one: TableItem, two: TableItem)`
Defined in src/table/table-header-item.class.ts:240
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 :
Name | Type | Optional
one | `TableItem` | No
two | `TableItem` | No
Returns : `number`

filter
`filter(item: TableItem)`
Defined in src/table/table-header-item.class.ts:269
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 :
Name | Type | Optional
item | `TableItem` | No
Returns : `boolean`

### Accessors

ascending
get `ascending()`
Defined in src/table/table-header-item.class.ts:67
set `ascending(asc)`
Defined in src/table/table-header-item.class.ts:64
If true, sort is set to ascending, if false descending will be true. Parameters :
Name | Optional
asc | No
Returns : `void`

descending
get `descending()`
Defined in src/table/table-header-item.class.ts:78
set `descending(desc)`
Defined in src/table/table-header-item.class.ts:75
If true, sort is set to descending, if false ascending will be true. Parameters :
Name | Optional
desc | No
Returns : `void`

    import { TableItem } from "./table-item.class";
    import {
    	EventEmitter,
    	TemplateRef
    } from "@angular/core";

    export class TableHeaderItem {
    	/**
    	 * Defines if column under this TableHeaderItem should be displayed.
    	 *
    	 */
    	visible = true;

    	/**
    	 * Disables sorting by default.
    	 *
    	 */
    	sorted = false;

    	/**
    	 * Enables sorting on click by default.
    	 * If false then this column won't show a sorting arrow at all.
    	 *
    	 */
    	sortable = true;

    	/**
    	 * Number of applied filters.
    	 *
    	 * `filter()` should set it to appropriate number.
    	 *
    	 */
    	filterCount = 0;

    	/**
    	 * The number of rows to span
    	 * **NOTE:** not supported by the default carbon table
    	 */
    	rowSpan = 1;

    	/**
    	 * The number of columns to span
    	 */
    	colSpan = 1;

    	/**
    	 * Attach a class to the column, both the header and column cells.
    	 *
    	 */
    	className: string;

    	/**
    	 * Style for the column, applied to every element in the column.
    	 *
    	 * ngStyle-like format
    	 *
    	 */
    	style = {};

    	/**
    	 * If true, sort is set to ascending, if false descending will be true.
    	 *
    	 */
    	set ascending(asc) {
    		this._ascending = asc;
    	}
    	get ascending() {
    		return this._ascending;
    	}

    	/**
    	 * If true, sort is set to descending, if false ascending will be true.
    	 *
    	 */
    	set descending(desc) {
    		this._ascending = !desc;
    	}
    	get descending() {
    		return !this._ascending;
    	}

    	/**
    	 * Data for the header item.
    	 */
    	data: any;

    	/**
    	 * Data for the header item for general usage in the controller.
    	 * For example, which `field` is this column related to.
    	 */
    	metadata: any;

    	/**
    	 * 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:
    	 *
    	 * ```html
    	 * <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:
    	 *
    	 * ```typescript
    	 * (at)ViewChild("customHeaderTemplate")
    	 * protected customHeaderTemplate: TemplateRef<any>;
    	 * ```
    	 *
    	 * Set the template to the header item, for example:
    	 *
    	 * ```typescript
    	 * this.model.header = [
    	 * 		new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})
    	 * ];
    	 * ```
    	 */
    	template: TemplateRef<any>;

    	/**
    	 * The label for the sort button
    	 */
    	ariaSortLabel: string;

    	/**
    	 * A callback function to format the sort label. Will be heavily called.
    	 */
    	formatSortLabel: (label: string, staticLabel?: string) => string;

    	/**
    	 * 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:
    	 * ```html
    	 * <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:
    	 * ```typescript
    	 * new FilterableHeaderItem({
    	 * 	filterTemplate: this.filter,
    	 *	filterFooter: this.filterFooter
    	 * })
    	 * ```
    	 *
    	 * ```typescript
    	 * 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;
    	 * 	}
    	 * }
    	 * ```
    	 */
    	filterTemplate: TemplateRef<any>;

    	/**
    	 * Used along with `filterTemplate` to construct the filter popover
    	 */
    	filterFooter: TemplateRef<any>;

    	/**
    	 * 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.
    	 */
    	filterData: any;

    	/**
    	 * used in `ascending`
    	 *
    	 * @protected
    	 */
    	protected _ascending = true;

    	/**
    	 * Creates an instance of TableHeaderItem.
    	 */
    	constructor(rawData?: any) {
    		// defaults so we dont leave things empty
    		const defaults = {
    			data: "",
    			visible: this.visible,
    			style: this.style,
    			filterCount: this.filterCount,
    			filterData: {data: ""}
    		};
    		// fill our object with provided props, and fallback to defaults
    		const data = Object.assign({}, defaults, rawData);
    		for (let property of Object.getOwnPropertyNames(data)) {
    			if (data.hasOwnProperty(property)) {
    				this[property] = data[property];
    			}
    		}
    	}

    	/**
    	 * 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)
    	 */
    	compare(one: TableItem, two: TableItem): number {
    		if (!one || !two) {
    			return 0;
    		}

    		if (typeof one.data === "string") {
    			return one.data.localeCompare(two.data);
    		}

    		if (one.data < two.data) {
    			return -1;
    		} else if (one.data > two.data) {
    			return 1;
    		} else {
    			return 0;
    		}
    	}

    	/**
    	 * 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
    	 */
    	filter(item: TableItem): boolean {
    		this.filterCount = 0;
    		return false;
    	}
    }

# result-matching ""

# No results matching ""