Cheetah Grid

# 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.
visibility Specifying hidden to it will stop drawing the cell's content. Note that this does not stop the cell's action.

Note that the column type may add style properties that you can use. The properties added are described in the documentation for each column type.

<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
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
59
<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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

# 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
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
59
60
61
62
63
64
65

← Indicators →