# CheckColumn

Show the checkbox.

To make it editable, please use CheckEditor.

# Style Properties

Property Description Default
checkBgColor Define background color of checkbox, when it is checked. Resolve by the theme.
uncheckBgColor Define background color of checkbox, when it is unchecked. Resolve by the theme.
borderColor Define border color of checkbox. Resolve by the theme.
textAlign Define horizontal position of checkbox in cell. 'center'
textBaseline Define vertical position of checkbox in cell. --
bgColor Define background color of cell. Resolve by the theme.
<div class="sample1 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "c1",
      caption: "check",
      width: 100,
      columnType: "check", // or `new cheetahGrid.columns.type.CheckColumn()`
    },
    {
      field: "c2",
      caption: "style",
      width: 100,
      columnType: "check",
      style: {
        uncheckBgColor: "#FDD",
        checkBgColor: "rgb(255, 73, 72)",
        borderColor: "red",
      },
    },
    {
      caption: "show",
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "SHOW",
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec, null, "  "));
        },
      }),
    },
  ],
});
grid.records = [
  { c1: true, c2: false },
  { c1: false, c2: true },
  { c1: true, c2: false },
  { c1: false, c2: true },
  { c1: true, c2: false },
  { c1: false, c2: true },
  { c1: true, c2: false },
  { c1: false, c2: true },
  { c1: true, c2: false },
  { c1: false, c2: 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