# Define Column Styles
# Standard Column Style
Define column style by using style
property.
Properties below are prepared in standard.
Property | Description |
---|---|
color | define the color of cell. |
textAlign | define the horizontal position of text in cell. |
textBaseline | define the vertical position of text in cell. |
bgColor | define the background color of cell. |
font | define the font of cell. |
padding | define the padding of cell. if you set 4 values separately, please set the Array . |
textOverflow | define how to display when text overflows the area of a cell. clip or ellipsis is available. |
<div class="sample1 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{field: 'no', caption: 'no', width: 50},
// default
{field: 'text', caption: 'default', width: 150},
// color
{field: 'text', caption: 'color', width: 150, style: {color: 'red'}},
// textAlign
{field: 'text', caption: 'right', width: 150, style: {textAlign: 'right'}},
{field: 'text', caption: 'center', width: 150, style: {textAlign: 'center'}},
// textBaseline
{field: 'text', caption: 'top', width: 150, style: {textBaseline: 'top'}},
{field: 'text', caption: 'bottom', width: 150, style: {textBaseline: 'bottom'}},
// bgColor
{field: 'text', caption: 'bgColor', width: 150, style: {bgColor: '#5f5'}},
// font
{field: 'text', caption: 'font', width: 150, style: {font: '9px sans-serif'}},
],
});
grid.records = [
{no: 1, text: 'sample text'},
{no: 2, text: 'sample text'},
{no: 3, text: 'sample text'},
];
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
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
<div class="sample2 demo-grid middle"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample2'),
header: [
{field: 'no', caption: 'no', width: 50},
// default
{field: 'text', caption: 'default', width: 150},
// padding
{field: 'text', caption: 'padding', width: 150, style: {padding: 20}},
{field: 'text', caption: 'padding', width: 150, style: {padding: [0/*top*/, 10/*right*/, 15/*bottom*/, 20/*left*/]}},
//{{#if_v '0.6.0'}} textOverflow
{field: 'longText', caption: 'textOverflow', width: 150, style: {textOverflow: 'ellipsis'}},
//{{/if_v }}
],
defaultRowHeight: 80,
headerRowHeight: 24,
});
grid.records = [
{no: 1, text: 'sample text', longText: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'},
{no: 2, text: 'sample text', longText: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'},
{no: 3, text: 'sample text', longText: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Advanced Column Style
style
property can be used by the advanced ways below.
- change style by each record
This can be done by functions below.
- use the function
- use the instance of Style class
<div class="sample3 demo-grid small"></div>
<label>change background color of text</label>
<select class="sample3theme">
<option value="" selected="true">default</option>
<option value="red">red</option>
<option value="#DFF">#DFF</option>
</select>
1
2
3
4
5
6
7
2
3
4
5
6
7
const textFieldStyle = new cheetahGrid.columns.style.Style();
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample3'),
header: [
{field: 'no', caption: 'no', width: 50},
{
field: 'value',
caption: 'value',
width: 150,
columnType: 'number',
//function
style(rec) {
return {
color: rec.value <= 0 ? 'red' : undefined,
};
}
},
{
field: 'text',
caption: 'text',
width: 150,
//Style instance
style: textFieldStyle
},
],
});
grid.records = [
{no: 1, text: 'sample text', value: 100},
{no: 2, text: 'sample text', value: 50},
{no: 3, text: 'sample text', value: 0},
{no: 4, text: 'sample text', value: -50},
];
const themeSelect = document.querySelector('.sample3theme');
themeSelect.onchange = function() {
//change bg color
if (themeSelect.value === 'default') {
textFieldStyle.bgColor = null;
} else {
textFieldStyle.bgColor = themeSelect.value;
}
};
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
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
# Header Style
Define column header style by using headerStyle
property.
<div class="sample4 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample4'),
header: [
{field: 'no', caption: 'no', width: 50},
// default
{field: 'text', caption: 'default', width: 150},
// color
{field: 'text', caption: 'color', width: 150, headerStyle: {color: 'red'}},
// textAlign
{field: 'text', caption: 'center', width: 150, headerStyle: {textAlign: 'center'}},
// textBaseline
{field: 'text', caption: 'bottom', width: 150, headerStyle: {textBaseline: 'bottom'}},
// bgColor
{field: 'text', caption: 'bgColor', width: 150, headerStyle: {bgColor: '#5f5'}},
// font
{field: 'text', caption: 'font', width: 150, headerStyle: {font: '9px sans-serif'}},
// textOverflow
{field: 'text', caption: 'textOverflow clip', width: 150, headerStyle: {textOverflow: 'clip'}},
{field: 'text', caption: 'textOverflow ellipsis', width: 150, headerStyle: {textOverflow: 'ellipsis'/*In the header this is the default*/}},
],
});
grid.records = [
{no: 1, text: 'data'},
{no: 2, text: 'data'},
{no: 3, text: 'data'},
];
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
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