Themes
The theme
is configuration option applied inside guiGrid
jQuery function. It is used to set a pre-designed styles, on Generic UI grid. The grid has four build-in themes:
- Fabric,
- Material - consist of a toned color palette and different styles,
- Generic - default theme,
- Light - adds more visible fonts to a white background, it is perfect for daylight conditions,
- Dark - a sleek dark theme with dark gray color palette, useful at night.
Theme: Generic
$('#jquery-themes-grid').guiGrid({
columns: [{
header: 'Number',
field: 'number',
view: 'chip',
width: 80
}, {
header: 'Name',
field: 'name',
view: 'italic',
width: 160
}, {
header: 'Position',
field: 'position',
view: 'bold',
width: 80
}, {
header: 'Team',
field: 'team',
view: 'link',
width: 160
}, {
header: 'Retired',
field: 'retired',
width: 80,
view: 'checkbox'
}, {
header: 'Bio',
field: 'bio',
view: 'italic'
}],
source: [...source],
theme: 'fabric'
paging: {
enabled: true,
pageSizes: [10, 25],
pageSize: 10
}
});
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'
}];
Themes - options
Options | Type | Default | Description |
---|---|---|---|
theme | string | 'fabric' | Changes Grid theme. Available themes: 'Fabric' , 'Material' , 'Generic' , 'Light' , 'Dark' . |
rowColoring | string | even | Applies colored shading to the grid rows. Available shading options: Even , Odd , None . |
verticalGrid | boolean | true | Enables vertical lines that separate columns inside the grid. |
horizontalGrid | boolean | true | Enables horizontal lines that separate rows within the grid. |