Columns header

It is possible to configure template of the header. You can pass HTML to the header property of the columns config object.

Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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
    }, ...
]

Header css classes & styles

Grid allows to specify css classes and styles for each column header.

Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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
    }, ...
]

Header visibility

The column header reflects the name of the given column, specified in columns configuration as header attribute. The column header can be placed at the top of the grid or at the bottom.
It can be achieved by adding these inputs to the <gui-grid> selector:

  • columnHeaderTop: boolean
  • columnHeaderBottom: boolean


Header example
app.component.ts
source.ts
Number
Name
Position
Team
8
Kobe Bryant
SG
Los Angeles Lakers
1
Tracy McGrady
SG
Houston Rockets
23
Lebron James
PF
Los Angeles Lakers
3
Dwayne Wade
SG
Miami Heat
15
Vince Carter
SG
Atlanta Hawks
34
Charles Barkley
PF
N/A
15
Nikola Jokić
PF
Denver Nuggets
0
Russell Westbrook
PG
Houston Rockets
7
Kevin Durant
PF
Brooklyn Nets
13
James Harden
PG/SG
Houston Rockets
13
Paul George
SG
Los Angeles Clippers
25
Ben Simmons
PG
Philadelphia 76ers
2
Kawhi Leonard
SG/SF
Los Angeles Clippers
21
Joel Embiid
C
Philadelphia 76ers
34
Giannis Antetokounmpo
PF
Milwaukee Bucks
30
Stephen Curry
PG
Golden State Warriors
11
Klay Thompson
SG
Golden State Warriors
23
Anthony Davis
PF
Los Angeles Lakers
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'
}];


Inputs

InputTypeDefaultDescription
columnHeaderTopbooleantrue Places columns header at the top of the grid
columnHeaderBottombooleanfalse Places columns header at the bottom of the grid

Related articles: