Field columns of DatatableComponent instance is undefined in 11.0.3

[nhducseuit]

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, post on Stackoverflow or Gitter

Current behavior

Field columns of DatatableComponent instance is undefined after table initiated Expected behavior

DatatableComponent.columns should be array of TableColumns objects for every column presents. Reproduction of the problem

Stackblitz demo: https://stackblitz.com/edit/angular-vpi2bx?file=app%2Fhello.component.ts

Just @ViewChild the table and check it after table is initiated. What is the motivation / use case for changing the behavior?

I was using 9.3.1 before upgrading to 11.0.3 due to an upgrade to Angular 5. In order to be able to toggle a custom checkbox column on an external event, I had to added/removed a column object representing the checkbox column to/from columns array. I named it checkboxColumn. Noted that I constructed the column in TS code, then add it to columns array on an external event, because if I just add the column directly in HTML, there isn't any hook on table view successfully initiated event so that I can hide that column immediately. Basically I want the checkbox column to only show when user request for checkbox selection mode. I don't find any notes about this change so I guess it's a bug.

I was able to get the columns array though, by accessing the TableComponent.bodyComponent.columns - but if I try to add checkboxColumn to that array, this error is thrown: this.column.$$valueGetter is not a function May be doing that is not recommended? I'm not sure.

Also the column object I constructed and how I added it to bodyComponent.columns array:

  private checkboxColumn: any = {
    flexGrow: 1,
    sortable: false,
    canAutoResize: false,
    draggable: false,
    resizeable: false,
    name: 'Select'
  };

this.datatable.bodyComponent.columns = [this.checkboxColumn, ...this.datatable.bodyComponent.columns];

Please tell us about your environment:

Ubuntu 16.04 x64, Visual Studio Code, npm, ...

• Table version: 11.0.3

  Tried with 11.0.2, issue is still there.

• Angular version: 5.1.0-beta.0

  Checked with 5.0.1, it's still there

• Browser: [Chrome 59 | Firefox 56 ]

• Language: [ TypeScript 2.4 ]

[nhducseuit]

Hello, could someone please response?

[nhducseuit]

Hello, please response on the possibility to solve this issue. I need to know if I should switch to using another table component or not.

[thornblom]

I have the same problem since the update..

[amcdnl]

Hi - Sorry for the delay. So many people asking for help and its just me.

I'd recommend not accessing the columns like this: this.datatable.bodyComponent.column. You want to make sure to access it through the main component to make sure everything reacts properly.

If you can make a stackblitz demo that would be very helpful in helping me debug it.

[nhducseuit]

I updated first post with stackblitz link. In dev console, you only need to select the datatable tag and issue this script to look at columns value (undefined) ng.probe($0).componentInstance.columns

[nhducseuit]

It's pretty weird that when I specify columns input in datatable declaration like [columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]" then the column field won't be undefined anymore.

Is this a requirement?

---

But in another way, doing this in my component cause many weird behaviors when toggling columns. So I think that's not an option ...