# Multi-Row Header

<since 2.0>

You can customize Vuetable to display more than one table header row via

• tableHeader scoped slot, or
• header-rows prop using header component

By default, Vuetable uses VuetableRowHeader component to render table header. It will iterate through each field to display the provided title.

# Using tableHeader scoped slot

When you define a scoped slot named tableHeader, this will completely replace the header auto-generated by Vuetable.

Vuetable will also pass the normalized fields definition to the tableHeader slot. You will have complete control on how the table header row is rendered, you can even write a component to render your own table header. It's your choice.

<vuetable>
  <template slot="tableHeader" slot-scope="{ fields }">
    <!-- define your own table row -->
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </template>
</vuetable>

Luckily, Vuetable uses VuetableRowHeader component to generated the default table header row that also handle user interaction. That means you can also use it in your tableHeader slot as well.

<template>
  <vuetable ref="vuetable"
    api-url="..."
    :fields="..."
  >
    <template slot="tableHeader">
      <vuetable-row-header></vuetable-row-header>
    </template>
  </vuetable>
</template>

<script>
import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetableRowHeader from 'vuetable-2/src/components/VuetableRowHeader.vue'

export default {
  components: {
    Vuetable,
    VuetableRowHeader
  },
  //...
}
</script>

See example here

# Using header-rows prop

Another way to render multi-row header is to use header-rows prop.

By default, it is an array containing the only value VuetableRowHeader. That means it will delegate the rendering of table header row to VuetableRowHeader component.

But since it is an array, you can write your own component and add it to the array of header-rows prop. Vuetable will use the component in the array to render the table header row one by one in sequence specified.

The component can also be as simple as this.

<template>
  <tr>
    <th colspan="2">Group AAA</th>
    <th colspan="4">Group BBB</th>
  </tr>
</template>

See example here

# Communicating with Vuetable

If you need to communicate with the parent Vuetable, you can either create a computed property and return this.$parent, which is what VuetableRowHeader does.

export default {
  //...
  computed: {
    vuetable() {
      return this.$parent
    }
  }
}

Or, you can emit an vuetable:header-event event containing two parameters as followed:

• type String
  A named string used to distinguish the origin of the event, e.g. the name of your header row component.

• payload Object
  An object containing anything that is necessary or relevant to the outside component.

Vuetable will relay this event out from itself, so that the outside component can capture and used it.

<template>
  <vuetable
    //..
    @vuetable:header-event="onHeaderEvent"
  ></vuetable>
</template>

<script>
export default {
  //...
  methods: {
    //...
    onHeaderEvent (type, payload) {
      // if (type === 'my-header-row') {
      //   .. do something ..
      // }
    }
  }
}
</script>