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.
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);
});
};
<button onClick={showAllColumn}>Show all columns</button>
<button onClick={hideAllColumn}>Hide all columns</button>