add and remove dynamically columns and recalculate them

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior I add and remove dynamically some columns, which does not work well. The table does not recalculate the column sizes. I think it is the same problem you can show on your demo column toggling.

Expected behavior After adding or removing rows the column size should be recalculate, showing your code I think this is would you also are expecting but it does not work

Reproduction of the problem Show your demo for column toggling on http://swimlane.github.io/ngx-datatable/#

On open demo

After hide all columns

After show all columns

• Table version: 6.1.1

• Ionic version: 2.0.1

• Angular version: 2.2.1

[sarora2073]

Hi,

I was also looking for a way to maintain the column order, and came up with one approach by just adding one line to the toggle method as follows:

  toggle(col) {
    const isChecked = this.isChecked(col); // confirm if selected column *was previously* checked

    if (isChecked) {
      this.columns = this.columns.filter(c => {
        return c.name !== col.name; // return every column except the one previously checked; this is the new desired array
      });
    } else { // this handles scenario where box goes goes from unchecked to checked..it appends the previously unchecked to the this.columns array
      this.columns = [...this.columns, col]; // append newly selected column
      this.columns = _.intersectionBy(this.allColumns,this.columns,'name'); // retain original sequence of columns by comparing to allColumns array; this means allColumns manages state of desired sequence
    }

The underlying issue was that the ‘columns’ array doesn’t maintain sequence info nor does it know where to re-add a removed object, so i ended up relying on ‘allColumns’ sequence to fill both gaps here. I thought about whether it would be worth refactoring the solution such that ‘allColumns’ array alone would be utilized, but for now i prefer the current approach of keeping two arrays (‘columns’ array contains currently selected columns, and ‘allColumns’ contains all available columns / in what sequence) because it works well in combination with some DnD (drag and drop) functionality i’m using, which relies on the simple data structure of ‘allColumns’.

Incidentally, if anyone is interested in adding DnD functionality to manage sequence, just check out ng2-dnd …example 9 here: https://github.com/akserg/ng2-dnd

after installing the library, you just need add a few things to the column toggling html as follows:

            <h4>&nbsp;&nbsp;&nbsp;Available Columns</h4>
            <ul class="list-group" dnd-sortable-container [sortableData]="allColumns">
              <li *ngFor='let col of allColumns; let i = index' class="list-group-item" dnd-sortable [sortableIndex]="i" (onDropSuccess)="sortColumns()">
                <input type='checkbox' [id]="col.name" (click)='toggle(col)' [checked]='isChecked(col)' />
                <label [attr.for]="col.name">{{col.name}}</label>
              </li>
            </ul>

Additionally, to get the DnD drop event (in the available columns panel) to update the ngx-datatable columns, add this method:

  sortColumns() {
      this.columns = _.intersectionBy(this.allColumns,this.columns,'name'); // retain sequence in allColumns
  }

Hope that helps, If it’s appropriate I can update the examples in this code base, however, i’m not sure it’s a problem to add dependencies like lodash / ng2-dnd, so i’m leaving it here for now…

Regards,

• S. Arora

[mburger81]

Ok I try to explain it better:

Using last angular version the impact of the issue is less. Some screenshots:

Click first time on search it looks like this

Click a second time on search the space between first column (Date & Time) and second column “Temperature T&H Ext.” increase. Every time I click search again the space between the columns increase.

This is what I have done before:

I have a simple ngx-datatable like this <ngx-datatable [rows]="rows" [columns]="columns"....../></ngx-datatable>

In my component I do something like that

private rows: any[];
private columns: any[];

loadData() {
    this.columns.push(  .... first column');
    this.columns.push( .... second column');
    this.columns.push( .... third column');

    this.rows.push( ... first row....');
    this.rows.push( ... second row....');
    ....
    this.rows.push( ... last row....');
}

Adding dynamically columns and data on the same variable which is bind to ngx-datatable columns and rows property, drives the table column size crazy, like the pinning demo.

Change the code a little bit, we have the behavior for first and second screenshot.

private rows: any[];
private columns: any[];

loadData() {
    let tmpColumns: any[] = [];
    let tmpRows: any[] = [];

    tmpColumns.push(  .... first column');
    tmpColumns.push( .... second column');
    tmpColumns.push( .... third column');

    tmpRows.push( ... first row....');
    tmpRows.push( ... second row....');
    ....
    tmpRows.push( ... last row....');

    // at the and set temporary variables to binding variables
   this.columns = tmpColumns;
   this.rows = tmpRows;
}

set the property at the end and do the whole dynamic stuff with temporary variables works better, but we have still the issue like the first and second screenshot.

So to repeat: Add dynamical data to column and rows property with old and new angular does not work. Add dynamical data to column and rows using temporary variable, with old angular version still does not work and with angular version >= 2.4.0 does work better (first two screenshots)

Now at the end, I tested your version:

Using temporary variables and your version anything is working fine, but using your version and set dynamically columns and rows do ngx-datable property has still the same error.

But the combination between temporary variables and your lib resolves me the issue, also if it does not close the complete issue, in my opinion.

I hope I was clear enough and my English was good enough 🐙