# Theme
Can set theme to Cheetah Grid.
Can settings for grid instance or global.
# Grid instance
Set a theme to the theme
property of the grid instance.
Built-in themes are MATERIAL_DESIGN
and BASIC
.
<label>theme</label>
<select class="theme-select1">
<option value="" selected="true">unset</option>
<option value="MATERIAL_DESIGN">MATERIAL_DESIGN</option>
<option value="BASIC">BASIC</option>
</select>
<div class="sample1 demo-grid small"></div>
1
2
3
4
5
6
7
2
3
4
5
6
7
const grid = vm.createGrid(document.querySelector('.sample1'));
const themeSelect = document.querySelector('.theme-select1');
themeSelect.onchange = function() {
grid.theme = cheetahGrid.themes.choices[themeSelect.value];
/* The `theme` property of the grid instance can also be set as a string. */
// grid.theme = themeSelect.value;
};
themeSelect.onchange();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Global
Set a theme to the cheetahGrid.themes.default
property.
(default MATERIAL_DESIGN.)
<label>theme</label>
<select class="theme-select2">
<option value="MATERIAL_DESIGN" selected="true">MATERIAL_DESIGN</option>
<option value="BASIC">BASIC</option>
</select>
<div class="sample2 demo-grid small"></div>
1
2
3
4
5
6
2
3
4
5
6
vm.createGrid(document.querySelector('.sample2'));
const themeSelect = document.querySelector('.theme-select2');
themeSelect.onchange = function() {
cheetahGrid.themes.default = cheetahGrid.themes.choices[themeSelect.value];
// redraw all the grids
vm.girdInstances.forEach((grid) => grid.invalidate());
};
themeSelect.onchange();
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Extend theme
To extend the theme, do as follows.
<div class="sample3 demo-grid small"></div>
1
const grid = vm.createGrid(document.querySelector('.sample3'));
const userTheme = {
color: 'red',
frozenRowsColor: 'red',
defaultBgColor: '#FDD',
frozenRowsBgColor: '#EAA',
selectionBgColor: '#FDA',
highlightBgColor: '#FDC',
underlayBackgroundColor: '#FEE',
// You can also change the theme apply in the state by using callback.
frozenRowsBorderColor(args) {
const {
row,
grid: {frozenRowCount}
} = args;
if (frozenRowCount - 1 === row) {
return ['#F88'/*top*/, '#F88'/*right and left*/, 'red'/*bottom*/];
} else {
return '#F88';
}
},
borderColor(args) {
const {
col,
grid: {colCount}
} = args;
if (colCount - 1 === col) {
return ['red'/*top*/, '#F88'/*right*/, 'red'/*bottom*/, null/*left*/];
} else {
return ['red'/*top and bottom*/, null/*right and left*/];
}
},
highlightBorderColor: '#FD5',
checkbox: {
uncheckBgColor: '#FDD',
checkBgColor: 'rgb(255, 73, 72)',
borderColor: 'red',
},
button: {
color: '#FDD',
bgColor: '#F55',
},
font: '16px sans-serif',
header: {
sortArrowColor: '#D00'
}
};
grid.theme = userTheme;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49