Responsive columns in Vue Treegrid component

16 Mar 20231 minute to read

You can toggle column visibility based on media queries which are defined
at the hideAtMedia.
The hideAtMedia accepts valid
Media Queries.

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks' height='315px'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' textAlign='Right'  hideAtMedia='(min-width: 700px)' width=90></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='startDate' headerText=' Start Date' textAlign='Right'  hideAtMedia='(max-width: 500px)' format='yMd' type='date' width=90></e-column>
                <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

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