<template>
<div>
<h2>Column Group</h2>
<DataGrid :data="data" style="height:250px">
<GridColumnGroup>
<GridHeaderRow>
<GridColumn :rowspan="2" field="itemid" title="Item ID"></GridColumn>
<GridColumn :rowspan="2" field="name" title="Name"></GridColumn>
<GridColumn :colspan="4" title="Item Details"></GridColumn>
<GridColumn :rowspan="2" field="test1" title="test1"></GridColumn>
<GridColumn :rowspan="2" field="test2" title="test2"></GridColumn>
<GridColumn :rowspan="2" field="test3" title="test3"></GridColumn>
<GridColumn :rowspan="2" field="test4" title="test4"></GridColumn>
<GridColumn :rowspan="2" field="test5" title="test5"></GridColumn>
</GridHeaderRow>
<GridHeaderRow>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</GridHeaderRow>
</GridColumnGroup>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
data: []
};
},
created() {
this.data = [
{
code: "FI-SW-01",
name: "Koi",
unitcost: 10.0,
status: "P",
listprice: 36.5,
attr: "Large",
itemid: "EST-1"
}
];
}
};
</script>