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

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>

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>

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

← Define Column Types Indicators →