To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in. Today we’ll look at how to customize table contents, including headers and footers.

Rendering Custom Headers and Footers

We can customize the render of headers and footers by populating slots.

For example, we can write:

<template>
  <div id="app">
    <b-table :items="items" foot-clone>
      <template v-slot:head(firstName)="data">
        <span>{{ data.label.toUpperCase() }}</span>
      </template>
<template v-slot:foot()="data">
        <span>{{ data.label.toUpperCase() }}</span>
      </template>
    </b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { firstName: "alex", lastName: "green" },
        {
          firstName: "may",
          lastName: "smith"
        },
        { firstName: "james", lastName: "jones" }
      ]
    };
  }
};
</script>

With the head slot, we can format the header. We can pass in the field name for the field we want to format. Or we can leave it blank to format all column headers. Likewise, we can do the same for footer.

Add Additional Rows top the Header

We can add more rows to the header.

To do that, we populate the thead-top slot.

Inside the slot, we use the b-tr component to add a table row.

Then inside it, we add our b-th components to add the headers.

For example, we can write:

<template>
  <div id="app">
    <b-table :items="items">
      <template v-slot:thead-top="data">
        <b-tr>
          <b-th>
            <span>Name</span>
          </b-th>
          <b-th>Surname</b-th>
        </b-tr>
      </template>
    </b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { firstName: "alex", lastName: "green" },
        {
          firstName: "may",
          lastName: "smith"
        },
        { firstName: "james", lastName: "jones" }
      ]
    };
  }
};
</script>

Now we have the table header with the cells Name and Surname on top of the table.

#web-development #programming #software-development #bootstrapvue #vue #vuejs