# 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 (opens new window). 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