Columns header

import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns">
		</gui-grid>
	`
})
export class ColumnHeaderComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: '<span class='my-style'>Name</span>',
        field: 'name'
    }, {
        header: '<i>Position</i>',
        field: 'position'
    }, {
        header: '<b>Team</b>',
        field: 'teamShort',
        width: 80
    }, {
        header: '<mark>Training</mark>',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: '<small>Company</small>',
        field: 'company'
    }];
			

}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns">
		</gui-grid>
	`
})
export class ColumnHeaderComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        styles: 'text-transform: uppercase',
        field: 'name'
    }, {
        header: 'Position',
        styles: 'text-decoration: underline',
        field: 'position'
    }, {
        header: 'Team',
        cssClasses: 'awesome css-classes',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];
			

}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

import { Component } from '@angular/core';

import { GuiCellView } from '@generic-ui/ngx-grid';

import { source } from './source';


@Component({
	selector: 'header-grid',
	template: `
		<gui-button-toggle [checked]="columnHeaderTop"
						   (click)="toggleTopHeader()">
			Top Header
		</gui-button-toggle>
		
		<gui-button-toggle [checked]="columnHeaderBottom"
						   (click)="toggleBottomHeader()">
			Bottom Header
		</gui-button-toggle>

		<gui-grid [columns]="columns"
				  [source]="source"
				  [columnHeaderTop]="columnHeaderTop"
				  [columnHeaderBottom]="columnHeaderBottom">
		</gui-grid>
	`
})
export class ColumnsHeaderExampleComponent {

	columns = [{
		header: 'Number',
		field: 'number',
		width: 60
	}, {
		header: 'Name',
		field: 'name',
		view: GuiCellView.ITALIC
	}, {
		header: 'Position',
		field: 'position',
		view: GuiCellView.BOLD
	}, {
		header: 'Team',
		field: 'team'
	}];

	source = source;

	columnHeaderTop: boolean = true;
	columnHeaderBottom: boolean = false;

	toggleTopHeader(): void {
		this.columnHeaderTop = !this.columnHeaderTop;
	}

	toggleBottomHeader(): void {
		this.columnHeaderBottom = !this.columnHeaderBottom;
	}

}

export const source = [{
	name: 'Kobe Bryant',
	number: 8,
	position: 'SG',
	team: 'Los Angeles Lakers'
}, {
	name: 'Tracy McGrady',
	number: 1,
	position: 'SG',
	team: 'Houston Rockets'
}, {
	name: 'Lebron James',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}, {
	name: 'Dwayne Wade',
	number: 3,
	position: 'SG',
	team: 'Miami Heat'
}, {
	name: 'Vince Carter',
	number: 15,
	position: 'SG',
	team: 'Atlanta Hawks'
}, {
	name: 'Charles Barkley',
	number: 34,
	position: 'PF',
	team: 'N/A'
}, {
	name: 'Nikola Jokic',
	number: 15,
	position: 'PF',
	team: 'Denver Nuggets'
}, {
	name: 'Russell Westbrook',
	number: 0,
	position: 'PG',
	team: 'Houston Rockets'
}, {
	name: 'Kevin Durant',
	number: 7,
	position: 'PF',
	team: 'Brooklyn Nets'
}, {
	name: 'James Harden',
	number: 13,
	position: 'PG/SG',
	team: 'Houston Rockets'
}, {
	name: 'Paul George',
	number: 13,
	position: 'SG',
	team: 'Los Angeles Clippers'
}, {
	name: 'Ben Simmons',
	number: 25,
	position: 'PG',
	team: 'Philadelphia 76ers'
}, {
	name: 'Kawhi Leonard',
	number: 2,
	position: 'SG/SF',
	team: 'Los Angeles Clippers'
}, {
	name: 'Joel Embiid',
	number: 21,
	position: 'C',
	team: 'Philadelphia 76ers'
}, {
	name: 'Janis Andetokunmbo',
	number: 34,
	position: 'PF',
	team: 'Milwaukee Bucks'
}, {
	name: 'Stephen Curry',
	number: 30,
	position: 'PG',
	team: 'Golden State Warriors'
}, {
	name: 'Klay Thompson',
	number: 11,
	position: 'SG',
	team: 'Golden State Warriors'
}, {
	name: 'Anthony Davis',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}];