# Define Headers and Columns
# Standard Column
You can define the behavior and appearance of columns and headers cells by defining <c-grid-column> in slot of <c-grid>.
<div class="demo-grid middle">
<c-grid :data="records" frozen-col-count="1">
<c-grid-column
field="personid"
width="100">
ID
</c-grid-column>
<c-grid-column
field="fname"
width="200">
First Name
</c-grid-column>
<c-grid-column
field="lname"
width="200">
Last Name
</c-grid-column>
<c-grid-column
:field="getBirthday"
width="200">
Birthday
</c-grid-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
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
record object properties
{
personid: 'ID',
fname: 'First Name',
lname: 'Last Name',
email: 'Email',
birthday: 'birthday',
}
*/
const records = generatePersons(100);
export default {
data() {
return {
records,
};
},
methods: {
getBirthday(rec) {
const dateTimeFormat = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "numeric",
day: "numeric",
});
return dateTimeFormat.format(rec.birthday);
},
},
};
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
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
# Multiple Header
To use multiple header, define <c-grid-column-group>.
<div class="demo-grid middle">
<c-grid :data="records" frozen-col-count="1">
<c-grid-column
field="personid"
width="100">
ID
</c-grid-column>
<!-- multiple header -->
<c-grid-column-group caption="Name">
<c-grid-column
field="fname"
width="200">
First Name
</c-grid-column>
<c-grid-column
field="lname"
width="200">
Last Name
</c-grid-column>
</c-grid-column-group>
<c-grid-column
:field="getBirthday"
width="200">
Birthday
</c-grid-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
22
23
24
25
26
27
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
const records = generatePersons(100);
export default {
data() {
return {
records,
};
},
methods: {
getBirthday(rec) {
const dateTimeFormat = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "numeric",
day: "numeric",
});
return dateTimeFormat.format(rec.birthday);
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19