# Define Column ICON
Use icon
property when drawing icons.
You can use 2 types of icons below by setting.
- ICON by Web Font
- ICON by picture
# Standard way to specify Web Fonts
For standard Web font, you should set font
and content
.
<div class="sample1 demo-grid small"></div>
1
ICON in sample uses Font Awesome Icons
<!-- Font Awesome: http://fontawesome.io --> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
1
2
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
caption: 'text',
width: 180,
icon: {
font: 'normal normal normal 14px/1 FontAwesome',
content: 'iconContent',
width: 16, // Optional
},
field: 'text',
},
{
caption: 'button',
width: 180,
icon: {
font: 'normal normal normal 14px/1 FontAwesome',
content: 'iconContent',
width: 16, // Optional
},
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'BUTTON',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
},
],
});
grid.records = [
{text: 'file', iconContent: '\uf15b'},
{text: 'audio', iconContent: '\uf1c7'},
{text: 'code', iconContent: '\uf1c9'},
{text: 'image', iconContent: '\uf1c5'},
];
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
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
# Other ways to specify Web Font
You can use web font by setting className
.
<div class="sample2 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample2'),
header: [
{
caption: 'text',
width: 180,
icon: {
className: 'iconClassName',
width: 16, // Optional
},
field: 'text',
},
{
caption: 'button',
width: 180,
icon: {
className: 'iconClassName',
width: 16, // Optional
color: '#fff', // Optional
},
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'BUTTON',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
},
],
});
grid.records = [
{text: 'file', iconClassName: 'fa fa-file'},
{text: 'audio', iconClassName: 'fa fa-file-audio-o'},
{text: 'code', iconClassName: 'fa fa-file-code-o'},
{text: 'image', iconClassName: 'fa fa-file-image-o'},
];
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
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
# How to specify Images
Set src
to show pictures.
<div class="sample3 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample3'),
header: [
{
caption: 'OSS',
width: 300,
icon: {
src: 'iconSrc',
width: 16,
},
field: 'label',
},
{
caption: 'link',
width: 150,
icon: {
src: 'iconSrc',
width: 16,
},
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'LINK',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
window.open(rec.url, '_blank');
},
}),
},
],
});
grid.records = [
{
label: 'Vuls: VULnerability Scanner',
iconSrc: 'https://github.com/future-architect/vuls/raw/master/img/vuls_icon.png',
url: 'https://github.com/future-architect/vuls',
},
{
label: 'uroboroSQL',
iconSrc: 'https://future-architect.github.io/uroborosql-doc/favicon.ico',
url: 'https://future-architect.github.io/uroborosql-doc/',
},
{
label: 'Urushi',
iconSrc: 'http://future-architect.github.io/urushi/gh-pages-resoucres/favicon.ico',
url: 'http://future-architect.github.io/urushi/',
},
];
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
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
# Multiple Icons
Give array in order to show multiple icons.
<div class="sample4 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample4'),
header: [
{
caption: 'text',
width: 180,
icon: {
font: 'normal normal normal 14px/1 FontAwesome',
content: 'iconContent',
width: 16, // Optional
},
field: 'text',
},
{
caption: 'button',
width: 180,
icon: {
font: 'normal normal normal 14px/1 FontAwesome',
content: 'iconContent',
width: 16, // Optional
},
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'BUTTON',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
},
],
});
grid.records = [
{text: 'files', iconContent: ['\uf15b', '\uf1c7', '\uf1c9', '\uf1c5']},
{text: 'forms', iconContent: ['\uf046', '\uf192', '\uf0fe', '\uf147']},
{text: 'charts', iconContent: ['\uf1fe', '\uf080', '\uf200']},
];
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
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
<div class="sample5 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample5'),
header: [
{
caption: 'OSS',
width: 300,
icon: {
src: 'iconSrc',
width: 16,
},
field: 'label',
},
{
caption: 'link',
width: 150,
icon: {
src: 'iconSrc',
width: 16,
},
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'LINK',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
window.open(rec.url, '_blank');
},
}),
},
],
});
const vulsIconUrl = 'https://github.com/future-architect/vuls/raw/master/img/vuls_icon.png';
const uroboroSQLIconUrl = 'https://future-architect.github.io/uroborosql-doc/favicon.ico';
const urushiIconUrl = 'http://future-architect.github.io/urushi/gh-pages-resoucres/favicon.ico';
grid.records = [
{
label: 'Vuls: VULnerability Scanner',
iconSrc: [vulsIconUrl, vulsIconUrl, vulsIconUrl, vulsIconUrl],
url: 'https://github.com/future-architect/vuls',
},
{
label: 'uroboroSQL',
iconSrc: [uroboroSQLIconUrl, uroboroSQLIconUrl, uroboroSQLIconUrl],
url: 'https://future-architect.github.io/uroborosql-doc/',
},
{
label: 'Urushi',
iconSrc: [urushiIconUrl, urushiIconUrl],
url: 'http://future-architect.github.io/urushi/',
},
{
label: 'Awesome OSS',
iconSrc: [vulsIconUrl, uroboroSQLIconUrl, urushiIconUrl],
url: 'https://future-architect.github.io/',
},
];
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
50
51
52
53
54
55
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
50
51
52
53
54
55