Columns header
The column header reflects the name of the given column, defined in columns configuration as header option. The column header can be placed at the top of the grid or at the bottom.
It is possible by adding these configuration options inside the guiGrid
jQuery function:
- columnHeaderTop
true
orfalse
- columnHeaderBottom
true
orfalse
$('#jquery-columns-header-grid').guiGrid({
columns: [{
header: 'Number',
field: 'number',
width: 60
}, {
header: 'Name',
field: 'name',
view: 'italic'
}, {
header: 'Position',
field: 'position',
view: 'bold'
}, {
header: 'Team',
field: 'team'
}],
source: source,
columnHeaderTop: true,
columnHeaderBottom: true
});
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'
}];
Header - options
Options | Type | Default | Description |
---|---|---|---|
columnHeaderTop | boolean | true | Adds the columns header at the top of the grid |
columnHeaderBottom | boolean | false | Adds the columns header at the bottom of the grid |