Size
Generic UI for jQuery gives the option to change its size. You can do it by using width
and height
options inside guiGrid
jQuery function. Changing these properties will set a new size for the grid. Both attributes refers to width or height of the grid, measured in pixels.
The other configuration is the autoResizeWidth
option. Its function is to force the grid to fill the available container space. The said option is enabled by default.
$('#jquery-size-grid').guiGrid({
maxHeight: 500,
width: 1000,
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
});
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'
}];
Size - options
Options | Type | Default | Description |
---|---|---|---|
maxHeight | number | - | Changes the grid max height. |
width | number | - | Changes the grid width. |
autoResizeWidth | boolean | true | When true, this will set columns width to fill available space e.g. cover entire web page |