# CGrid

Defines the Grid.

# Vue Template Structure

<div class="demo-grid middle">
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <!-- define checkbox -->
    <c-grid-check-column
      field="check"
      width="50" />
    <c-grid-column
      field="personid"
      width= "85"
    >
      ID
    </c-grid-column>
    <!-- multiple header -->
    <c-grid-column-group
      caption="Name">
      <c-grid-input-column
        field="fname"
        width="20%"
        min-width="150"
      >
        First Name
      </c-grid-input-column>
      <c-grid-input-column
        field="lname"
        width= "20%"
        min-width="150"
      >
        Last Name
      </c-grid-input-column>
    </c-grid-column-group>
    <!-- button -->
    <c-grid-button-column
      caption="SHOW REC"
      width="120"
      @click="onClickRecord"
    />
  </c-grid>
</div>

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

export default {
  data() {
    return {
      records,
    };
  },
  methods: {
    onClickRecord(rec) {
      alert(JSON.stringify(rec));
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12

# Slots

# `default` slot

Use this slot to set the simple header definition.
The definition is set to header property described in Define Headers and Columns

# `layout-header` slot

Use this slot to set the layout header definition.
Use this slot in combination with the layout-body slot.
The definition is set to layout.header property described in Advanced Layout.

# `layout-body` slot

Use this slot to set the layout body definition.
Use this slot in combination with the layout-header slot.
The definition is set to layout.body property described in Advanced Layout.

# Properties

# Optional Properties

Name	Type	Description	Default
data	`Array`\|`object`	Defines a records or data source.	`undefined`
frozen-col-count	`number`\|`string`	Defines a frozen col Count	`0`
header-row-height	`number`\|`Array`	Defines the header row height(s)	`undefined`
allow-range-paste	`boolean`	Allow pasting of range.	`undefined`
trim-on-paste	`boolean`	Trim the pasted text on pasting.	`undefined`
default-row-height	`number`	Default grid row height.	`undefined`
default-col-width	`number`	Default grid col width.	`undefined`
filter	`function`	Defines a records filter	`undefined`
font	`string`	Default font.	`undefined`
underlay-background-color	`string`	Underlay background color.	`undefined`
theme	`object`\|`string`	Defines the grid theme	`undefined`
move-cell-on-tab-key	`boolean`\|`function`	Specify `true` to enable cell movement by Tab key. You can also specify a function that determines which cell to move to.	`false`
move-cell-on-enter-key	`boolean`\|`function`	Specify `true` to enable cell movement by Enter key. You can also specify a function that determines which cell to move to.	`false`
delete-cell-value-on-del-key	`boolean`	Specify `true` to enable enable deletion of cell values with the Del and BS keys.	`undefined`
select-all-on-ctrl-a-key	`boolean`	Specify `true` to enable select all cells by Ctrl + A key.	`undefined`
disable-column-resize	`boolean`	Specify `true` to disable column resizing	`undefined`
disabled	`boolean`	Defines disabled	`undefined`
readonly	`boolean`	Defines readonly	`undefined`
options	`object`	Defines a raw options for Cheetah Grid	`undefined`

# Examples of using Properties

# theme

<div class="demo-grid middle">
  <c-grid
    :data="records"
    :theme="userTheme"> <!-- set theme -->
    <c-grid-check-column field="check" :width="50"/>
    <c-grid-column field="personid" width= "85">ID</c-grid-column>
    <c-grid-column-group caption="Name">
      <c-grid-input-column field="fname" width="20%" min-width="150" :sort="true">First Name</c-grid-input-column>
      <c-grid-input-column field="lname" width="20%" min-width="150" :sort="true">Last Name</c-grid-input-column>
    </c-grid-column-group>
    <c-grid-button-column caption="SHOW REC" width="120" @click="onClickRecord" />
  </c-grid>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

export default {
  name: "App",
  data() {
    return {
      records,
      // you can set the theme name or object.
      // userTheme: 'BASIC',
      userTheme: {
        color: "#2c3e50",
        frozenRowsColor: "#2c3e50",
        frozenRowsBgColor: "#40b883",
        borderColor: "#35495e",
        frozenRowsBorderColor: "#35495e",
        checkbox: {
          checkBgColor: "#35495e",
          borderColor: "#35495e",
        },
        button: {
          color: "#FFF",
          bgColor: "#2c3e50",
        },
      },
    };
  },
  methods: {
    onClickRecord(rec) {
      alert(JSON.stringify(rec));
    },
  },
};

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

# Data

Name	Type	Initial Value	Description
headerValues	Map<any, any>	`new Map()`	Header values.

# Events

Name	Description
click-cell	Click on cell.
dblclick-cell	Doubleclick on cell.
selected-cell	Selected cell.
paste-cell	Paste on cell.
changed-value	Changed value.
changed-header-value	Changed header value.

and more...

TIP

The events for which the column can be identified emit the same event to each column definition component.
e.g. <c-grid-column>

<div class="demo-grid middle">
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <c-grid-column field="personid" width= "85"
      @click-cell="onClickCell($event, 'ID')"
    >
      ID
  </c-grid-column>
    <c-grid-input-column field="fname" width="20%"
      @click-cell="onClickCell($event, 'First Name')"
    >
      First Name
    </c-grid-input-column>
    <c-grid-input-column field="lname" width= "20%"
      @click-cell="onClickCell($event, 'Last Name')"
    >
      Last Name
    </c-grid-input-column>
  </c-grid>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export default {
  data() {
    return {
      records,
    };
  },
  methods: {
    onClickCell(event, colName) {
      alert("Click at " + colName + ": $event=" + JSON.stringify(event));
    },
  },
};