Columns header

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


Columns header - Inputs

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

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.