Ngx-datatable: DataTableFooterComponent: "Cannot read property 'toLocaleString' of undefined"

[AdamVig]

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

When initializing a data table with the below code, the below error is printed to the console.

<ngx-datatable class="material"
    [rows]="configs"
    [columns]="columns"
    [limit]="10"
    [headerHeight]="50"
    [footerHeight]="50">
</ngx-datatable>

The following error (and its corresponding DebugContext) is logged to the console four times when I load my page:

DataTableFooterComponent.html:20 ERROR TypeError: Cannot read property 'toLocaleString' of undefined
    at Object.eval [as updateRenderer] (DataTableFooterComponent.html:20)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13144)
    at checkAndUpdateView (core.es5.js:12293)
    at callViewAction (core.es5.js:12651)
    at execEmbeddedViewsAction (core.es5.js:12609)
    at checkAndUpdateView (core.es5.js:12289)
    at callViewAction (core.es5.js:12651)
    at execComponentViewsAction (core.es5.js:12583)
    at checkAndUpdateView (core.es5.js:12294)
    at callViewAction (core.es5.js:12651)

This is the value of the component property in the DebugContext printed to the console:

This is confusing to me, because all of the component's values seem to be defined. Also confusing because DataTableFooterComponent.html:20 points to a line without any bindings on it, but that could just be a sourcemap problem:

Despite the errors, the footer seems to render correctly:

Expected behavior

The table displays without logging any errors to the console.

Reproduction of the problem

The problem happens on page load. Could not reproduce in Plunker. Seems to be related to this commit.

What is the motivation / use case for changing the behavior?

This is a bug.

Please tell us about your environment:

macOS 10.12.5
VS Code 1.13.1
node 8.0.0, npm 5.0.0
Angular CLI 1.1.3

• Table version: 9.3.0
  

• Angular version: 4.2.4
  

• Browser: [all | Chrome 58.0.3029.110 (64-bit) | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[dannyvenier]

Seems from the error that selectedCount is null at some point - could it be that selectedCount is not initialized when the view part of the footer is rendered (on first load) and that is the source of the error. Then when selectedCount gets set, the binding kicks in and all is good. However, looking at what you posted, I would expect the footer to say something like "0 selected / 29 total". It is hard to tell without much of the code. Also possible that the error message is pointing at rowCount rather than selectedCount, or more likely both since you saw duplicates of the error. Either way, when the error is thrown, the property is null, likely prior to its initialization. Take a look at the lifecycle of selectedCount and rowCount to see when they get initialized.

[LuisUrrutia]

Have you solved it? I have the same problem and i don't know how to proceed

EDIT:
Well, I have a class called Paging and it have the property count, and i was expecting that this value was zero (zero value of a number) when i initialized it without any value, but it doesn't and that was causing the error.

Before:

this.paging = new Paging();

After:

this.paging = new Paging();
this.paging.count = 0;

[IbrahimElkhatib]

I faced this issue, in our case it was my teammate mistake, she was initializing the rows as empty object not array

[ikilled]

I also faced this issue and figured out that the problem was that I was providing to DataTable _an Object_ containing multiple Objects (rows) but I should provide _an Array_ containing multiple Objects.

More specifically, in my case the cause of problem was that the API providing the rows was filtering some results out of all DB results. This filtering caused that the array of rows didn't have sequential keys any more
(but something like 2,3,5,8,..) so PHP automatically added "explicit" keys to my array. I solved it by removing these keys with php's function array_values() before API sending the response to my front-end Angular App.

[AdamVig]

I ended up moving to Angular Material's MdTable component, which was released this week. It lacks some of the features that NgxDatatable has, but has significantly better scroll performance and will grow more feature-rich over time.

Because of this, I'm unsubscribing from notifications on this issue.

[anbiniyar]

FWIW I had the same issue. It seems like I get into this issue if I use lodash cloneDeep() to clone the array for the rows. If I don't clone the array, it works just fine for me.

[hungtruongquoc]

@LuisUrrutia Thanks. I applied the same solution.

[mxchange]

I have a similar issues where in some cases the table would show nothing and no error when count is not passed, in other cases it will throw an error.
Should the count be defaulted to the length of the rows when not passed?

[tonivj5]

Any news on this?

[techno2mahi]

Pls refer this
solved