# ButtonColumn
Show the button.
# Constructor Properties
Property | Description |
---|---|
caption | Define button caption. |
# Style Properties
Property | Description | Default |
---|---|---|
buttonBgColor | define background color of botton. | resolve by the theme. |
In addition to this, the Standard styles is available.
<div class="sample1 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
caption: 'Button1',
width: 180,
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'FIXED LABEL',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
},
{
caption: 'Button2',
field: 'buttonCaption', // Get caption of button from record
width: 180,
columnType: 'button',
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
},
],
});
grid.records = [
{buttonCaption: 'BUTTON1'},
{buttonCaption: 'BUTTON2'},
{buttonCaption: 'BUTTON3'},
{buttonCaption: 'BUTTON4'},
{buttonCaption: 'BUTTON5'},
];
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
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