search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

ngx-datatable-column and non camelCase JSON property #1537

Open Qualaelay opened 6 years ago

Qualaelay commented 6 years ago

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 If we use a ngx-datatable-column to specify definition of columns (and take actions accordingly, such as display a column based on a property), then values from ngx-datatable-cell-template need to be camelCase. I couldn't find a way to have values bound to prop

Expected behavior I would expect that the JSON model can be non camelCase, in the stackblitz commentNONCAMEL values should appear as well

Reproduction of the problem I created a reproduction here: https://stackblitz.com/edit/angular-3fjfsb Values coming from the non camel-case property is not fetched (or I couldn't find a documented way/example)

What is the motivation / use case for changing the behavior? Business case where I need to use ngx-datatable-column to display certain columns, and where response from the backend does contain properties which are non camelCase (to be specific, "commentCRO")

Please tell us about your environment: Windows 10,

ghost commented 5 years ago

Having the same issue

jasonbhuang commented 6 months ago

Was this ever fixed, this is such a silly problem and has consummed of a lot of time from devs trying to debug.

alex-ht-work commented 6 months ago

It is not actually a bug, you just use it incorrectly. We had exactly the same problem.

The answer sits here: https://github.com/swimlane/ngx-datatable/blob/5eed8493fa016bcbf49f7fe7d9bc39e41916a4e7/docs/api/column/inputs.md?plain=1#L9

The column model has a name property and prop property. prop is used to get the value to display. name has a different purpose. But if you do not specify prop, the lib tries to do you a favour and figure it out from the name property by camel casing it.

See here: https://github.com/swimlane/ngx-datatable/blob/5eed8493fa016bcbf49f7fe7d9bc39e41916a4e7/projects/swimlane/ngx-datatable/src/lib/utils/column-helper.ts#L25

So instead of setting the name for the column, you should set prop. Your blitz can be fixed easily by changing this line: <ngx-datatable-column name="{{col.prop}}" *ngIf="col.display" to this: <ngx-datatable-column prop="{{col.prop}}" *ngIf="col.display" in your app.component.html file.