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.
Themes example
themes-grid.js
source.js

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

OptionsTypeDefaultDescription
themestring'fabric' Changes Grid theme. Available themes: 'Fabric', 'Material', 'Generic', 'Light', 'Dark'.
rowColoring stringeven Applies colored shading to the grid rows. Available shading options: Even, Odd, None.
verticalGrid booleantrue Enables vertical lines that separate columns inside the grid.
horizontalGrid booleantrue Enables horizontal lines that separate rows within the grid.

Related articles: