CGridLayoutRow
Defines layout row.
Can be used in the layout-header
slot and the layout-body
slot of CGrid
.
Vue Template Structure
vue
<template>
<div class="demo-grid middle">
<c-grid :data="records" :frozen-col-count="1">
<template v-slot:layout-header>
<!-- header line1 -->
<c-grid-layout-row>
<c-grid-header width="85" rowspan="2">ID</c-grid-header>
<c-grid-header width="20%" min-width="150">
First Name
</c-grid-header>
</c-grid-layout-row>
<!-- header line2 -->
<c-grid-layout-row>
<c-grid-header width="20%" min-width="150"> Last Name </c-grid-header>
</c-grid-layout-row>
</template>
<template v-slot:layout-body>
<!-- line1 -->
<c-grid-layout-row>
<c-grid-column field="personid" width="85" rowspan="2" />
<c-grid-input-column field="fname" />
</c-grid-layout-row>
<!-- line2 -->
<c-grid-layout-row>
<c-grid-input-column field="lname" />
</c-grid-layout-row>
</template>
</c-grid>
</div>
</template>
<script>
export default {
data() {
return {
records,
};
},
};
</script>
Slots
default
slot
Use this slot to set the row layout definition