CGridColumnGroup

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

Vue Template Structure

<template>
  <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>
</template>
<script>
export default {
  data() {
    return {
      records,
    };
  },
};
</script>

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.