Headers in Vue TreeGrid

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.

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='1' height='315px'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='startDate' headerText='Start Date' width=90 format="yMd" textAlign='Right'></e-column>
                <e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script setup>

import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

const data = sampleData;

</script>
<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='1' height='315px'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='startDate' headerText='Start Date' width=90 format="yMd" textAlign='Right'></e-column>
                <e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";


export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data() {
    return {
      data: sampleData,
    };
  },
}
</script>

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

Header template

You can customize the header element by using the headerTemplate property.

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='0' height='315px'>
            <e-columns>
                <e-column field='taskName' :headerTemplate='projectName' width=180></e-column>
                <e-column field='startDate' :headerTemplate='dateTemplate' format="yMd" textAlign='Right'></e-column>
                <e-column field='duration' :headerTemplate='durationTemplate' textAlign='Right'></e-column>
                <e-column field='progress' :headerTemplate='progressTemplate' textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script setup>

import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { headerData } from "./datasource.js";
import { createApp } from 'vue';

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Task Name
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Taskname.png";
        }
    }
});

const columnTemplate1 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Start Date
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Startdate.png";
        }
    }
});

const columnTemplate2 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Duration
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Duration.png";
        }
    }
});

const columnTemplate3 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Progress
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "progress.png" ;
        }
    }
});

const data = headerData;

const projectName = function () {
    return { template : columnTemplate}
};

const dateTemplate = function () {
    return { template : columnTemplate1}
};

const durationTemplate = function () {
    return { template : columnTemplate2}
};

const progressTemplate = function () {
    return { template : columnTemplate3}
};

</script>
<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='0' height='315px'>
            <e-columns>
                <e-column field='taskName' :headerTemplate='projectName' width=180></e-column>
                <e-column field='startDate' :headerTemplate='dateTemplate' format="yMd" textAlign='Right'></e-column>
                <e-column field='duration' :headerTemplate='durationTemplate' textAlign='Right'></e-column>
                <e-column field='progress' :headerTemplate='progressTemplate' textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { headerData } from "./datasource.js";
import { createApp } from 'vue';

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Task Name
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Taskname.png";
        }
    }
});

const columnTemplate1 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Start Date
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Startdate.png";
        }
    }
});

const columnTemplate2 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Duration
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "Duration.png";
        }
    }
});

const columnTemplate3 = app.component('columnTemplate', {
    template: `<div class="image">
                    <img :src="image" width=20 height=20 class="e-image"/> Progress
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        image: function() {
            return "progress.png" ;
        }
    }
});



export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data() {
    return {
      data: headerData,
       projectName: function () {
          return { template : columnTemplate}
      },
     dateTemplate: function () {
          return { template : columnTemplate1}
      },
      durationTemplate: function () {
          return { template : columnTemplate2}
      },
      progressTemplate: function () {
          return { template : columnTemplate3}
      }
    };
  },
}
</script>