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>