Cheetah Grid

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

<!-- 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
3
4
5
6
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

# 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

# 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
48
49

# 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
<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
56
57
58

← Define Cell Messages →