Vue Ag-grid hide/unhide all columns at once

Question

I am trying to hide and unhide all columns in ag-grid on data change from the parent component. This is my child component

<template>
  <v-card>
    <v-card-title>
      <v-row no-gutters>
        <v-col class="text-right">
          <v-btn color="blue" outlined @click="hideColumns">hide Format</v-btn>
        </v-col>
      </v-row>
    </v-card-title>
    <ag-grid-vue
      //
    ></ag-grid-vue>
  </v-card>
</template>

<script>
//All imports of aggrid

export default {
  name: "DetailsTable",
  props: {
    columnDefs: {
      type: Array,
      default() {
        return null;
      },
    },
    rowData: {
      type: Array,
      default() {
        return null;
      },
    },
  },
  components: {
    "ag-grid-vue": AgGridVue,
  },
  data() {
    return {
      agModule: AllModules,
      newRowData: [],
      gridApi: null,
      gridOptions: {},
    };
  },
  watch: {
    rowData: function (newVal, oldVal) {
      this.newRowData = newVal;
    },
    columnDefs: function (newval, oldval) {
      this.hideColumns();
    },
  },
  methods: {
    hideColumns() {
      this.gridOptions.columnApi.getAllColumns().forEach((e) => {
        this.gridOptions.columnApi.setColumnVisible(e.colId, false); //In that case we hide it
      });
    },
  },
  mounted() {
    this.newRowData = this.rowData;
    this.gridApi = this.gridOptions.api;
  },
};
</script>

In the parent component the columnDefs and rowData get's reinitialized whenever the api get's called in the parent component. And now again on the change of columnDefs I want to hide all the columns.

Answer 1

setColumnsVisible() accepts a number as an argument which is a Column.colId. getAllColumns() return an array of Column so you need to use a for-loop here

const showAllColumn = () => {
  const allColumns = columnApi.getAllColumns().forEach((c) => {
    columnApi.setColumnVisible(c.getColId(), true);
  });
};
const hideAllColumn = () => {
  const allColumns = columnApi.getAllColumns().forEach((c) => {
    columnApi.setColumnVisible(c.getColId(), false);
  });
};

Usage

<button onClick={showAllColumn}>Show all columns</button>
<button onClick={hideAllColumn}>Hide all columns</button>

Live Example