How to hide ag-grid column on mobile?

Question

I'm trying to hide a column in ag-grid on mobile.

I'm using ag-grid for a vue.js app. I have tired the below code, but it's not working properly.

{
headerName: "Action",
field: "action",
minWidth: 54,
suppressMovable: true,
editable: true,
hide : ( window.innerWidth < 786 ? true : false ) 
}

I expect the output to be hide this column on mobile and show on desktop, but the output is bit strange to me. Initially when I load the page on mobile and desktop the column hide/show accordingly, but on mobile it's also hide some of other column's header titles(only header titles). Also when I resize the window from mobile to desktop the require column won't show and also resizing from desktop to mobile won't hide the required column.

Answer 1

You should use columnApi.setColumnVisible("your_column", false).

To be able to do so, first save the columnApi on @grid-ready

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
             class="ag-theme-balham"
             :columnDefs="columnDefs"
             :rowData="rowData"
             rowSelection="multiple"

             @grid-ready="onGridReady">
</template>

...

import {AgGridVue} from "ag-grid-vue";

const hideActionColumn = () => {
    if(this.columnApi) {
        this.columnApi.setColumnVisible("action", true);

        if(window.innerWidth < 786) {
            this.columnApi.setColumnVisible("action", false);
        }
    }
}

export default {
    name: 'App',
    data() {
        return {
            columnDefs: null,
            rowData: null
        }
    },
    components: {
        AgGridVue
    },
    methods: {
        onGridReady(params) {
            this.columnApi = params.columnApi;
        }
    },
    mounted() {
        // hide the column, if the initial load is in mobile view
        hideActionColumn();

        window.addEventListener('resize', hideActionColumn);
    },
    beforeDestroy() {
        window.removeEventListener('resize', hideActionColumn);
    }
}

Then you need to appends an event listener, so you can call hideActionColumn() on window.resize

window.addEventListener('resize', hideActionColumn);

Also you need to remove the event listener, before your component is destroyed.

I hope this will help you. Regards