# ImageColumn
# Draw image
Use columnType: 'image'
to draw image in the cell.
<div class="sample1 demo-grid middle"></div>
1
note: Images used in samples are on wikipedia. Please click the images to check details of those.
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
field: 'imageUrl',
caption: 'image',
width: 100,
columnType: 'image',
style: {imageSizing: 'keep-aspect-ratio'},
// open image detail
action: new cheetahGrid.columns.action.Action({
action(rec) {
window.open(rec.link, '_blank');
},
}),
},
{field: 'label', caption: 'label', width: 200},
],
frozenColCount: 1,
defaultRowHeight: 100,
headerRowHeight: 24,
});
//https://en.wikipedia.org/wiki/Cheetah
grid.records = [
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Kooshki_%28Iranian_Cheetah%29_03.jpg/440px-Kooshki_%28Iranian_Cheetah%29_03.jpg',
label: 'Asiatic cheetah',
link: 'https://en.wikipedia.org/wiki/File:Kooshki_(Iranian_Cheetah)_03.jpg'
},
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Cheetah_%28Kruger_National_Park%2C_South_Africa%2C_2001%29.jpg/180px-Cheetah_%28Kruger_National_Park%2C_South_Africa%2C_2001%29.jpg',
label: 'South African cheetah',
link: 'https://en.wikipedia.org/wiki/File:Cheetah_(Kruger_National_Park,_South_Africa,_2001).jpg'
},
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Cheetah_at_Whipsnade_Zoo%2C_Dunstable.jpg/180px-Cheetah_at_Whipsnade_Zoo%2C_Dunstable.jpg',
label: 'Sudan cheetah',
link: 'https://en.wikipedia.org/wiki/File:Cheetah_at_Whipsnade_Zoo,_Dunstable.jpg'
},
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/TanzanianCheetah.jpg/180px-TanzanianCheetah.jpg',
label: 'Tanzanian cheetah',
link: 'https://en.wikipedia.org/wiki/File:TanzanianCheetah.jpg'
},
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Cheetah_portrait_Whipsnade_Zoo.jpg/220px-Cheetah_portrait_Whipsnade_Zoo.jpg',
label: 'Cheetah',
link: 'https://en.wikipedia.org/wiki/File:Cheetah_portrait_Whipsnade_Zoo.jpg'
},
{
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/King_cheetah.jpg/170px-King_cheetah.jpg',
label: 'King cheetah',
link: 'https://en.wikipedia.org/wiki/File:King_cheetah.jpg'
},
];
grid.configure('fadeinWhenCallbackInPromise', true);
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
56
57
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
56
57