title: how can I update the number of columns in angular-datatables with server-side rendering. version 6.0.0 or higher
body: <p>I am having trouble getting my angular-datatable to show a new column list after a rerender. I have followed the example shown in the docs for rerendering and I can get the table to rerender. I am able to manipulate certain features like searching and pageLength, but for some reason I cannot get my columns to change. </p>
  
  <p>I have a very deep data set that would make my table look awful if I rendered all the columns at once, so I would like to give users the ability to select which columns they see.</p>
  
  <p>I would even be open to loading in all the columns at once and just switching visibility off and on, but I cannot effect visibility either.</p>
  
  <p>Has anyone had this issue before?</p>
  
  <p>Rerender function:</p>
  
  <pre><code>rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
    dtInstance.destroy();
    // these work
    this.dtOptions.searching = true;
    this.dtOptions.pageLength = 2;
    // these do not
    this.dtOptions.columns = newColumnList;
    this.dtOptions.columns[some-index].visible = false;
    this.dtTrigger.next();
  });}
  </code></pre>
  
  <p>Initial dtOptions:</p>
  
  <pre><code>this.dtOptions = {
    searching: false,
    pagingType: 'full_numbers',
    pageLength: 10,
    retrieve: true,
    serverSide: true,
    processing: true,
    language: {
      zeroRecords: 'Nothing Found'
    },
    ajax: (dataTablesParameters: any, callback) =&gt; {
      const payload = this.passFilterService.processPagination(this.filter, dataTablesParameters);
      this.http
        .post&lt;any&gt;(
          environment.api + '/things/list',
          {payload: payload}, {}
        ).subscribe(resp =&gt; {
          if (resp.data.data === null) {
            resp.data.data = 0;
          }
        callback({
          recordsFiltered: resp.data.totalCount,
          data: resp.data.data,
          recordsTotal: resp.data.totalCount
        });
      });
    },
    columns: this.tableColumns
  };
  </code></pre>
  
  <p>Initial Columns (limited fields):</p>
  
  <pre><code>tableColumns = [
  {
    title: 'Customer',
    data: 'Id',
    render: function(data) {
      return `&lt;a href="/pass/` + data + `" class="cursor-pointer actionView" title="View"&gt;Action&lt;/a&gt;`;
    }
  }, {
    title: 'Created',
    data: 'createdAt',
    orderable: true,
    visible: true,
  }, {
    title: 'Updated',
    data: 'updatedAt',
    orderable: true,
    visible: true,
  }, {
    title: 'Disabled',
    data: 'isVoided',
    orderable: true,
    visible: true,
  }
  ];
  </code></pre>
  
  <p>Table implementation:</p>
  
  <pre><code>&lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"&gt;
  &lt;/table&gt;
  </code></pre>