Responsive columns in Vue Grid component

16 Mar 20232 minutes to read

You can toggle column visibility based on media queries which are defined
at the hideAtMedia.
The hideAtMedia accepts valid
Media Queries. In the below sample, for OrderID column, hideAtMedia property value is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 hideAtMedia='(min-width: 700px)'>
                </e-column> //  column visibility hide when browser screen width lessthan 700px;
                <e-column field='CustomerID' headerText='Customer ID' width=140 hideAtMedia='(max-width: 700px)'>
                </e-column> // column Visibility show when browser screen width  500px or less;
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120
                hideAtMedia='(min-width: 500px)'>
                </e-column> // column visibility hide when browser screen width lessthan 500px;
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=140>
                </e-column> // it always shown
            </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>