Headers in Vue Grid component

16 Mar 20239 minutes to read

Header text

By default, column header title is displayed from column field value.
To override the default header title, you have to define the headerText value.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource="data"  height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' width=90></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

If both the field and headerText are not defined in the column, the column renders with “empty” header text.

Header template

Customize the header element using the headerTemplate property. In this demo, the custom element is rendered for both the CustomerID and OrderDate column headers.

app.vue

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :allowPaging="true" height="273px">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" :headerTemplate="orderTemplate" width="150"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
        <e-column field="OrderDate" headerText="Order Date" width="135" format="yMd" type="date" :headerTemplate="dateTemplate" textAlign="Right"></e-column>
        <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import {
  GridPlugin,
  Page,
  Filter,
  Sort,
  Toolbar,
  Edit,
} from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      dateTemplate: function () {
        return {
          template: Vue.component("columnTemplate", {
            template: ` <div><span class="e-icon-calender e-icons headericon"></span> Order Date</div>`,
            data: function () {
              return {
                data: {},
              };
            },
            computed: {},
          }),
        };
      },
      orderTemplate: function () {
        return {
          template: Vue.component("columnTemplate", {
            template: `<div><span class="e-icon-userlogin e-icons employee"></span> Customer ID</div>`,
            data: function () {
              return {
                data: {},
              };
            },
            computed: {},
          }),
        };
      },
    };
  },

  methods: {},
  provide: {
    grid: [Page, Filter, Sort, Edit, Toolbar],
  },
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
@import "./style.css";
</style>

Change the orientation of header text

You can change the orientation of the header text by using the customAttributes property.

To change the Orientation of Header Text, Ensure the following steps:

Step 1:

Create a css class with orientation style for grid header cell.

.orientationcss .e-headercelldiv {
    transform: rotate(90deg);
}

Step 2:

Add the custom css class to particular column by using customAttributes property.

    <e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' :customAttributes='customAttributes' width=80></e-column>

Step 3:

Resize the header cell height by using the following code.

setHeaderHeight(args) {
    let textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
    let headerCell = document.querySelectorAll(".e-headercell");
    for(let i = 0; i < headerCell.length; i++) {
       (headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
    }
}

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :created='setHeaderHeight' height='240px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' :customAttributes='customAttributes' width=80></e-column>
               <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data: () => {
    return {
      data: data,
      customAttributes : {class : 'orientationcss'},
    };
  },
  methods: {
    setHeaderHeight: function(args) {
      let textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
      let headerCell = document.querySelectorAll(".e-headercell");
      for (let i = 0; i < headerCell.length; i++) {
        (headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
      }
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
   .orientationcss .e-headercelldiv {
    transform: rotate(90deg);
    padding-top:5px;
}
</style>