title: How do I hide a button from cell rendered component in Ag-Grid?
body: <p>I have a list of button in mcomponent that I am using to show it in the grid for performing actions on the grid. I need to hide on of them.</p>
  
  <p>My code is somewhat like this:</p>
  
  <pre><code>let cols = [{
      field: '',
      headerName: 'Actions',
      width: 250,
      colId: 'params',
      cellRendererFramework: 'gridEditButtons'
    }];
  </code></pre>
  
  <p>This is the first column of my grid and then I am concatenating the rest in this logic. So, I am able to hide columns but what if the cellRendererFramework: 'gridEditButtons' has 5 buttons and I want to hide 2 columns that are in the black box in below image. </p>
  
  <p><a href="https://i.stack.imgur.com/acjWK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/acjWK.jpg" alt="enter image description here"></a></p>
  
  <p><strong>HTML Code for GridEditbuttons.Vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
  &lt;!-- Approve Button --&gt;
  &lt;!-- &lt;v-tooltip bottom&gt;
  &lt;v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
      color="primary" slot="activator"
      @click.stop="approveRow"&gt;
      &lt;v-icon&gt;fa-check&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;span&gt;Approve&lt;/span&gt;
  &lt;/v-tooltip&gt; --&gt;
  &lt;!-- Release Button --&gt;
  &lt;!-- &lt;v-tooltip bottom&gt;
  &lt;v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
      color="primary" slot="activator"
      @click.stop="releaseRow"&gt;
      &lt;v-icon&gt;fa-paper-plane&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;span&gt;Release&lt;/span&gt;
  &lt;/v-tooltip&gt; --&gt;
  &lt;!-- Edit Button --&gt;
  &lt;v-tooltip bottom&gt;
  &lt;v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
      color="primary" slot="activator"
      @click.stop="editRow"&gt;
      &lt;v-icon&gt;fa-pencil-alt&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;span&gt;Edit&lt;/span&gt;
  &lt;/v-tooltip&gt;
  &lt;!-- Delete Button --&gt;
  &lt;v-tooltip bottom&gt;
  &lt;v-btn xs4 fab small style="height: 23px; width:23px; margin-top: 0px;"
      color="primary" slot="activator"
      @click.stop="deleteRow"&gt;
      &lt;v-icon&gt;fa-trash-alt&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;span&gt;Delete&lt;/span&gt;
  &lt;/v-tooltip&gt;
  &lt;!-- View Button --&gt;
  &lt;!-- calls to function viewRow in this file when clicked on--&gt;
  &lt;v-tooltip bottom&gt;
  &lt;v-btn xs4 fab small style="height: 23px; width:23px; margin-top: 0px;"
      color="primary" slot="activator"
      @click.stop="viewRow"&gt;
      &lt;v-icon&gt;fa-book&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  &lt;span&gt;View&lt;/span&gt;
  &lt;/v-tooltip&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Script in GridEditButtons.Vue</strong></p>
  
  <pre><code>&lt;script&gt;
  import Vue from 'vue';
  
  export default Vue.extend({
  data () {
  return {
    dialogDelete: false,
    execStatusDialog: false
  };
  },
  methods: {
  deleteRow () {
    // pass the id and collection name to delete here
    let rowObj = this.params.api.getRowNode(this.params.rowIndex);
    if (!rowObj || !rowObj.data) {
      return this.params.context.vm.alert('error', '', 'Unable to identify the selected record.');
    }
    this.params.context.vm.tableDeleteBtnClicked(rowObj);
    this.dialogDelete = !this.dialogDelete;
    },
    // Executes when the edit button in the grid is clicked
    editRow (event) {
    let rowObj = this.params.api.getRowNode(this.params.rowIndex);
    // Checks to see if a row is selected or if the selected row has data
    if (!rowObj || !rowObj.data) {
      // If it doesn't then an error is thrown
      return this.params.context.vm.alert('error', '', 'Unable to identify the selected record.');
      }
    // calls the tableEditBtnClicked method in the Brightspot file
    this.params.context.vm.tableEditBtnClicked(rowObj);
  },
  // Executes when the view button in the grid is clicked
  viewRow (event) {
    // Gets the selected row
    let rowObj = this.params.api.getRowNode(this.params.rowIndex);
    // Checks to see if a row is selected or if the selected row has data
    if (!rowObj || !rowObj.data) {
      // If it doesn't then throw an error
      return this.params.context.vm.alert(
        'error',
        '',
        'Unable to identify the selected record.'
      );
    }
    // Calls the tableViewBtnClicked method in Brightspot file
    this.params.context.vm.tableViewBtnClicked(rowObj);
  },
  approveRow (event) {
    alert('Approved!'); // chunk of code
  },
  releaseRow (event) {
    alert('Released!'); // chunk of code
  }
  }
  });
  &lt;/script&gt;
  </code></pre>