Cheetah Grid

# CGridColumnGroup

Defines multiple header.
Can be used in the default slot of CGrid.

# Vue Template Structure

<div class="demo-grid middle">
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <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>
  </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
export default {
  data() {
    return {
      records,
    };
  },
};
1
2
3
4
5
6
7

# Slots

# default slot

Use this slot to set the children columns definition

# Properties

# Optional Properties

Name Type Description Default
caption string|function Defines a header caption ''
header-action object|string|function Defines a column header action. Same as the headerAction property of the JS API. undefined
header-field string Defines a column header data field undefined
header-icon object|string Defines a header icon undefined
header-style object|string|function Defines a column header style. Same as the headerStyle property of the JS API undefined
header-type object|string|function Defines a column header type. Same as the headerStyle property of the JS API undefined
sort boolean|string|function Defines a sort. See "Sort by Column" for detail. undefined

# Methods

Name Return Type Description
invalidate --- Redraws the whole grid.

← CGridHeader →