# Indicators

You can use the style property to display the indicators.
Currently the only indicator style supported is "triangle".

# Usage

<div class="sample-basic demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample-basic"),
  header: [
    {
      field: "no",
      caption: "No",
      width: 50,
    },
    {
      field: "text",
      caption: "Text",
      width: 150,
      style: { indicatorTopLeft: "triangle" },
    },
    {
      field: "text",
      caption: "Text",
      width: 150,
      style: { indicatorTopRight: "triangle" },
    },
  ],
});
grid.records = [
  { no: 1, text: "data" },
  { no: 2, text: "data" },
  { no: 3, text: "data" },
  { no: 4, 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

It supports indicatorTopLeft, indicatorTopRight, indicatorBottomRight, and indicatorBottomLeft

You can also control the display of indicators per record using functions.

<div class="sample-function demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample-function"),
  header: [
    {
      field: "no",
      caption: "No",
      width: 50,
    },
    {
      field: "text",
      caption: "Text",
      width: 150,
      style(record) {
        if (record.no === 1) {
          return { indicatorTopLeft: "triangle" };
        }
        if (record.no === 2) {
          return { indicatorTopRight: "triangle" };
        }
        if (record.no === 3) {
          return { indicatorBottomRight: "triangle" };
        }
        if (record.no === 4) {
          return { indicatorBottomLeft: "triangle" };
        }
        return undefined;
      },
    },
  ],
});
grid.records = [
  { no: 1, text: "data" },
  { no: 2, text: "data" },
  { no: 3, text: "data" },
  { no: 4, 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

# Indicator Styles

We recommend using themes to control the style of the indicator. You can control the size and color of the indicators by setting the theme's indicators.topLeftColor, indicators.topLeftSize, indicators.topRightColor, indicators.topRightSize, indicators.bottomRightColor, indicators.bottomRightSize , indicators.bottomLeftColor, and indicators.bottomLeftSize properties.

<div class="sample-theme demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample-theme"),
  header: [
    {
      field: "no",
      caption: "No",
      width: 50,
    },
    {
      field: "text",
      caption: "Text",
      width: 150,
      style(record) {
        if (record.no === 1) {
          return { indicatorTopLeft: "triangle" };
        }
        if (record.no === 2) {
          return { indicatorTopRight: "triangle" };
        }
        if (record.no === 3) {
          return { indicatorBottomRight: "triangle" };
        }
        if (record.no === 4) {
          return { indicatorBottomLeft: "triangle" };
        }
        return undefined;
      },
    },
  ],
});
grid.records = [
  { no: 1, text: "data" },
  { no: 2, text: "data" },
  { no: 3, text: "data" },
  { no: 4, text: "data" },
];
grid.theme = {
  indicators: {
    topLeftColor: "blue",
    topLeftSize: 10,
    topRightColor: "red",
    topRightSize: 10,
    bottomRightColor: "green",
    bottomRightSize: 10,
    bottomLeftColor: "black",
    bottomLeftSize: 10,
  },
};

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

You can also specify the indicator in object form if you want to change its style individually.

<div class="sample-style demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample-style"),
  header: [
    {
      field: "no",
      caption: "No",
      width: 50,
    },
    {
      field: "text",
      caption: "Text",
      width: 150,
      style(record) {
        if (record.no === 3) {
          return {
            indicatorTopLeft: {
              style: "triangle",
              color: "red",
              size: 15,
            },
          };
        }
        return undefined;
      },
    },
  ],
});
grid.records = [
  { no: 1, text: "data" },
  { no: 2, text: "data" },
  { no: 3, text: "data" },
  { no: 4, 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

← Define Column Styles Define Column Actions →