What is the best way to conceal an ag-grid column when viewing on a mobile

I am attempting to conceal a column in ag-grid when viewing it on mobile devices.

For my vue.js application, I have tried using the code snippet below, but unfortunately, it is not functioning as expected.

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

My intention is for this column to be hidden on mobile devices and visible on desktops. However, the output is perplexing. Upon initial loading of the page on both types of devices, the column visibility seems correct. But on mobile, some of the other columns' header titles are also hidden (only the headers). Additionally, when resizing from mobile to desktop, the desired column fails to appear, and vice versa when resizing from desktop to mobile, the required column does not hide as expected.

javascriptvue.jsag-grid

Answer №1

One way to hide a column in ag-Grid is by using columnApi.setColumnVisible("your_column", false).

In order to achieve this, it is important to first save the columnApi when the grid is 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);
    }
}

Furthermore, remember to add an event listener for window.resize to call hideActionColumn() appropriately.

window.addEventListener('resize', hideActionColumn);

Lastly, make sure to remove the event listener before your component gets destroyed.

This guide should assist you in managing the visibility of columns effectively. Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The foreach loop speeds through its iterations

Here is the loop that I am currently working on: client.users.forEach(user => { if (user.presence.status == "online") { fnHistory.userUpdate(user.id, status, false, message); } }); The function being called within this loop is as follo ...

javascriptnode.jsdiscord.js

Is there a way to retrieve a list of functions using ScriptEngine in Java?

I am using Jsoup to extract the JavaScript portion of an HTML file and store it as a Java String object. Furthermore, I am looking to extract lists of functions and variables within the JavaScript functions using javax.script.ScriptEngine. The JavaScript ...

javajavascriptscriptengine

Guide to Implementing Code Splitting in Webpack 4 for a Library that Exports Separate Modules in a Similar Manner to Lodash or Office Fabric UI

I currently have a large custom NPM library that is utilized by multiple teams within the organization. The library is currently published as one extensive single file, similar to the main lodash file. However, this approach results in bloated application ...

javascriptnpmwebpackmodulecode-splitting

Utilizing the power of modular promises with Promise.all()

I've encountered a situation where I have multiple functions that return promises, and I want to generalize them. As a result, I've structured them in the following way: function checkWebpageForReference(data){ //code to check webpage for re ...

javascriptdesign-patternspromisees6-promise

Ways to access a function variable within an AJAX `done` function

This is the JavaScript function I am working with: $('.editable').change(function () { event.preventDefault(); var el_text = this.lastElementChild; var action = this.action; var method = this.method; var data = $(this).serialize(); ...

javascriptjqueryajax

Tips on determining the Meteor collection a client will subscribe to at runtime

In the process of developing a web application, I am faced with the task of dynamically examining the collections (publications) of a DDP server. One challenge that has surfaced is that once a Meteor collection is created, it persists throughout the durati ...

javascriptdynamicmeteorddp

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

How can I create a simpler JavaScript code for clicking buttons to input letters into a text box? Instead of creating getElementByID for each button, is it possible to use some kind of loop? <div id="alpha" > <br/> <div align="cente ...

javascripthtmlcss

Is it possible that the rotation of multiple images using jquery in php is not functioning properly?

Is there a way to display images using PHP and rotate them using canvas and jQuery? The issue arises when showing more than one image as the rotation fails. I suspect the problem lies in the image or canvas ID in the JavaScript code, but I'm unable to ...

javascriptphpjquerycanvas

Designing an interactive region using HTML, CSS, and JavaScript

I recently created this code with some assistance: When I tried to format the code, it all ended up on one line and looked unreadable. To view the code properly, please visit this link: http://jsfiddle.net/QFF4x/ <div style="border:1px solid black;" ...

javascriptjqueryhtmlcss

The issue of req.file being consistently undefined in Node.js multer

I am having issues trying to upload a file using multer because the req.file is always undefined and the destination folder remains empty: Server: var express = require('express'); var multer = require('multer') var app = express(); ...

javascriptnode.jsmulter

Obtaining rotate3d values using JavaScript / jQuery

When dealing with an element that has a transformation like the following: style="transform: rotate3d(1, 0, 0, -50deg);" I am looking to extract the value -50 using Javascript or jQuery. It's essential for me to get the absolute value, so negative d ...

javascriptjquerycsscss-transformsrotatetransform

Guide to implementing nested asynchronous calls using a foreach loop

I am eager to enhance my skills and gain a better understanding of how to improve this code. While the current code is functioning, I suspect there may be an issue that needs addressing. Here's the concept: 1: Initially, I send the first HTTP request ...

javascriptangulartypescriptasynchronous

Tips for integrating and showcasing API data in your React JS application by utilizing React Table and Axios

I am just starting out with React and I am faced with the task of fetching data from an API and displaying it in a table. I have decided to use React Table for this purpose. However, I am encountering some issues with getting the data from the API to sh ...

javascriptreactjsaxios

Change the object's property names from camel case to sentence case

Consider an array of objects like this: data = [{keyOne: 'value1', keyTwo: 'value2'}, {keyOne: 'value3', keyTwo: 'value4'}]; We need to change it to look like this: data = [{Key one: 'value1', Ke ...

javascriptarraysobjectecmascript-6

React Select Event Bug: Not firing on subsequent attempts

My select filter menu has 5 different options that work fine when the page loads or refreshes. However, when I try to continuously select an option, it does not filter the content as expected. Here is a snippet of the code: <div className="filter_ ...

javascriptreactjsreact-select

"Mastering the art of running a successful Dojo

As I delve into learning dojo, I encountered some peculiar syntax in a project on GitHub. dojo.declare('app.services.Favorites', [ dojo.store.Memory ], { constructor : function() { this.inherited(arguments); dojo.subscribe(& ...

javascriptdojo

What steps do I need to take in order to integrate an mpg video onto my

I am in need of embedding mpg (dvd compliant mpeg2) movie files onto my webpage. Unfortunately, I do not have the ability to convert these videos into any other format. This webpage is solely for personal use, so any solution would be greatly appreciated. ...

phpjavascripthtmlmpeg

Utilizing asynchronous operations dependent on the status of a separate entity

Dealing with asynchronous operations in Vue has been a challenge for me. Coming from a C# background, I find the async-await pattern more intuitive than in JavaScript or TypeScript, especially when working with Vue. I have two components set up without us ...

typescriptvue.jsasync-awaitvuex

Error: The property "indexOf" cannot be accessed because n is not defined

After rendering a page and retrieving data from Firebase upon clicking a button, I encounter an error upon refreshing the page: Unhandled Runtime Error TypeError: can't access property "indexOf", n is undefined Source pages\[id].js (1 ...

javascriptfirebasegoogle-cloud-firestorenext.js

Having trouble getting rid of the horizontal scroll bar on my navbar

I've been experimenting with my bootstrap navigation bar. Originally set to "fixed" position, I changed it to absolute and now a horizontal scrollbar is appearing. Any ideas on how to prevent this scrollbar from showing up? Thank you! So far, I' ...

javascripthtmlcss