# 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
/*
  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

# 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
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