How to export table data with a custom header to excel in Bootstrap VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To export the bootstrap b-table data with a custom header to excel or CSV in VueJS.we are using the vue-json-excel package to export the bootstrap b-table data to excel or CSV in VueJS.

Today I am going to show you How do you export the bootstrap b-table data with a custom header to excel in VueJS?

Table of contains

  • Install the Bootstrap and BootstrapVue
  • Create FirstComponent.vue and import it into App.js
  • Define items Arrays of objects property for Test
  • Using the b-table tag create table
  • Install the vue-json-excel package
  • Register JsonExcel to vue entry point
  • Add download-excel to your template

Let’s start today’s tutorial let’s check the examples of a bootstrap-vue table with a custom header export to excel.

Install the Bootstrap and BootstrapVue

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation. In that article, I had also show you how to install BootstrapVue in your vue.js project step by step.

How to install or configure vue-bootstrap in VueJS?

Create FirstComponent.vue and import it into App.js

Create the new component into src/components/ components folder.the component name is FirstComponent.vue and import into App.js file:

App.js

<template>
  <div id="app">
    <FirstComponent />
  </div>
</template>

<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
  name: "App",
  components: {
    FirstComponent,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Define items Arrays of objects property for Test

Let’s define the items in the data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            items: [
          { id: 1, site_name: "SortoutCode", site_url: "https://sortoutcode.com/",status:"Active" },
          { id: 2, site_name: "Aguidehub", site_url: "https://aguidehub.com/",status:"Active" },
          { id: 3, site_name: "Infinitbility", site_url: "https://infinitbility.com/",status:"Active" },
          { id: 4, site_name: "Test", site_url: "https://test.com/",status:"Inactive" },
        ],
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been described in the function.

we define the items you can see that.

Using the b-table tag create table

<b-table> automatically samples the first row of the key of the array into the table heading. and All the first row of the array of keys Field names are automatically humanized by converting kebab-case, snake_case, and camelCase to individual words and capitalizing each word. you can see some of the examples listed below:

  • first_name becomes First Name
  • last-name becomes Last Name
  • age becomes Age
  • YEAR remains YEAR
  • isActive becomes Is Active

FirstComponent.vue

<template>
  <div class="hello">
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
export default {
  name: "FirstComponent",
  data() {
    return{
      items: [
        { id: 1, site_name: "SortoutCode", site_url: "https://sortoutcode.com/",status:"Active" },
        { id: 2, site_name: "Aguidehub", site_url: "https://aguidehub.com/",status:"Active" },
        { id: 3, site_name: "Infinitbility", site_url: "https://infinitbility.com/",status:"Active" },
        { id: 4, site_name: "Test", site_url: "https://test.com/",status:"Inactive" },
      ],
    }
  }
};
</script>

You can see the table data below output:

b-table listing

Install the vue-json-excel package

To export the bootstrap b-table data to excel or CSV. we are using the vue-json-excel package, for installing the package enter this npm install vue-json-excel command in your terminal.

Install JsontoExcel Package

Register JsonExcel to vue entry point

First, we have to register the JsonExcel package to vue entry point. Then we can use the package in our component template. To register the package you can use this code in your main.js file:

import Vue from "vue";
import JsonExcel from "vue-json-excel";
 
Vue.component("downloadExcel", JsonExcel);

Add download-excel to your template

Add the download-excel code to your template And pass the props :data=“items” data and value of the props should be your table data array of objects. In this example, we are passing the props value items. For the Custom heading we are using the fields props and passing the object name :fields=“fields”.In the Fields object, the key of the object is our custom header label, we won’t set our excel header like No, Website Name, Website Link and Website Status, and value of the fields object should be items key of an array of object like id,site_name,site_url and status.You can the code below:

FirstComponent.vue

<template>
    <div class="hello">
        <download-excel :data="items" :fields="fields" >
        <b-button class="mb-5">Export To Excel</b-button>
        </download-excel>
        <b-table striped hover outlined :items="items"></b-table>        
    </div>
</template>

<script>
export default {
    name: "FirstComponent",
    data() {
        return {
            fields: {
              "No": "id",
              "Website Name": "site_name",
              "Website Link": "site_url",
              "Website Status": "status"
            },
            items: [
                { id: 1, site_name: "SortoutCode", site_url: "https://sortoutcode.com/", status: "Active" },
                { id: 2, site_name: "Aguidehub", site_url: "https://aguidehub.com/", status: "Active" },
                { id: 3, site_name: "Infinitbility", site_url: "https://infinitbility.com/", status: "Active" },
                { id: 4, site_name: "Test", site_url: "https://test.com/", status: "Inactive" },
            ],
        }
    }
};
</script>

You can see the Export To Excel button before the table, this table data is exported to excel.

bootstrap-vue Table export to excel

For now, let’s check the output.

Output

ExportToExcel Custom Header

All the best 👍.

Follow me on Twitter