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

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
    }, ...
]

Grid allows to specify css classes and styles for each column 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: '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
    }, ...
]

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


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'
}];


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