File

src/table/table-item.class.ts

Index

Properties

Constructor

constructor(rawData?: any)

Creates an instance of TableItem.

Parameters :
Name Type Optional Description
rawData any true

Properties

data
data: any
Type : any

Data for the table item.

expandedData
expandedData: any
Type : any

Data for the expanded part of the row.

You only need to set it for the first item in the row.

expandedTemplate
expandedTemplate: TemplateRef<any>
Type : TemplateRef<any>

Template for rendering expandedData

You only need to set it for the first item in the row.

template
template: TemplateRef<any>
Type : TemplateRef<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:

<ng-template #customItemTemplate 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("customItemTemplate")
            private customItemTemplate: TemplateRef<any>;

Set the template to the table item, for example:

this.model.data = [
                 [new TableItem({data: {name: "Custom item", link: "/table"}, template: this.customItemTemplate})]
            ];
import {
	TemplateRef
} from "@angular/core";

export class TableItem {
	/**
	 * Data for the table item.
	 *
	 * @type {*}
	 * @memberof TableItem
	 */
	data: any;

	/**
	 * Data for the expanded part of the row.
	 *
	 * You only need to set it for the first item in the row.
	 *
	 * @type {*}
	 * @memberof TableItem
	 */
	expandedData: 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 #customItemTemplate 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("customItemTemplate")
	 * private customItemTemplate: TemplateRef<any>;
	 * ```
	 *
	 * Set the template to the table item, for example:
	 *
	 * ```typescript
	 * this.model.data = [
	 * 	[new TableItem({data: {name: "Custom item", link: "/table"}, template: this.customItemTemplate})]
	 * ];
	 * ```
	 *
	 * @type {TemplateRef<any>}
	 * @memberof TableItem
	 */
	template: TemplateRef<any>;

	/**
	 * Template for rendering `expandedData`
	 *
	 * You only need to set it for the first item in the row.
	 *
	 * @type {TemplateRef<any>}
	 * @memberof TableItem
	 */
	expandedTemplate: TemplateRef<any>;

	/**
	 * Creates an instance of TableItem.
	 * @param {*} [rawData]
	 * @memberof TableItem
	 */
	constructor(rawData?: any) {
		// defaults so we dont leave things empty
		const defaults = {
			data: ""
		};
		// fill our object with provided props, and fallback to defaults
		const data = Object.assign({}, defaults, rawData);
		this.data = data.data;
		this.expandedData = data.expandedData;
		this.template = data.template;
		this.expandedTemplate = data.expandedTemplate;
	}
}

results matching ""

    No results matching ""