# Define Column Types

# Standard Column Type

Set the column type by using columnType.

property description LINK
none draw text in the cell ---
'number' draw number in the cell with comma-separated NumberColumn
'check' draw checkbox in the cell CheckColumn
'button' draw button in the cell ButtonColumn
'image' draw image in the cell ImageColumn
'multilinetext' draw multiline text in the cell MultilineTextColumn
'radio' draw radio button in the cell RadioColumn
<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: "default", caption: "default", width: 150 },
  ],
});
grid.records = [
  { no: 1, default: "sample text" },
  { no: 2, default: "sample text" },
  { no: 3, default: "sample text" },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="sample2 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample2"),
  header: [
    { field: "no", caption: "no", width: 50 },

    { field: "number", caption: "number", width: 180, columnType: "number" },
    {
      field: "check",
      caption: "check",
      width: 50,
      columnType: "check",
      action: "check",
    },
    {
      caption: "button",
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "show rec",
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec));
        },
      }),
    },
  ],
});
grid.records = [
  { no: 1, number: 12345, check: true },
  { no: 2, number: 67890, check: false },
  { no: 3, number: 1234567890.098, check: 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

# Advanced Column Type

You can try kinds of view type by defining columnType property using the instance.

Please refer to here

Last Updated: 10/23/2024, 6:31:33 AM