Ngx-datatable: Cannot set property 'offset' of undefined when filtering

[bobpal]

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 I type in the filter box, it gives the error: "Cannot set property 'offset' of undefined"

Expected behavior
It is supposed to filter the rows.

Reproduction of the problem
http://plnkr.co/edit/BP5Zw2

[import { Component, ViewChild } from '@angular/core';
import { DatatableComponent } from '../../../node_modules/@swimlane/ngx-datatable/src/components/datatable.component';

@Component({
    selector: 'app-school-list',
    template: `
    <input type='text'
      placeholder='Type to filter the name column...'
      (keyup)='updateFilter($event)' />
    <ngx-datatable
      #table
      [columns]="columns"
      [footerHeight]="50"
      [limit]="5"
      [rows]='rows'>
    </ngx-datatable>
  `
})

export class SchoolListComponent {
    temp = [];
    columns = [
        { prop: 'name' },
        { name: 'Gender' },
        { name: 'Company' }
    ];
    rows = [
        { name: 'Austin', gender: 'Male', company: 'Swimlane' },
        { name: 'Bobby', gender: 'Male', company: 'KFC' },
        { name: 'Christina', gender: 'Female', company: 'Burger King' },
        { name: 'Dustin', gender: 'Male', company: 'Swimlane' },
        { name: 'Ellie', gender: 'Female', company: 'KFC' },
        { name: 'Flower', gender: 'Female', company: 'Burger King' },
        { name: 'Gordon', gender: 'Male', company: 'Swimlane' },
        { name: 'Houston', gender: 'Male', company: 'KFC' },
        { name: 'Ian', gender: 'Male', company: 'Burger King' }
    ];

    @ViewChild(DatatableComponent) table: DatatableComponent;

    constructor() {
        this.temp = this.rows;
    }

    updateFilter(event) {
        const val = event.target.value.toLowerCase();

        const temp = this.temp.filter(function (d) {
            return d.name.toLowerCase().indexOf(val) !== -1 || !val;
        });

        this.rows = temp;
        this.table.offset = 0;
    }
}

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

Please tell us about your environment:

• Table version: 0.8.x
  9.1.0

• Angular version: 2.0.x
  4.0.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome v57

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

[amcdnl]

You imported import { DatatableComponent } from './datatable.component'; manually for some reason. The implementation does not use that class thus it can't find it.

[hotdog1987]

First off, I think you need to import like this:
import { DatatableComponent } from '@swimlane/ngx-datatable/src/components/datatable.component';

Secondly, I think you need to write the View Child like this:
@ViewChild('table') table: DatatableComponent;

@amcdnl
The example demo (https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts) is making reference to '#table' from the template. So, I think the above syntax works.

It worked for me.

[moose4lord]

I had the same problem. Thank you for posting the fix.

[NivethaMuthukumar]

First off, I think you need to import like this:
import { DatatableComponent } from '@swimlane/ngx-datatable/src/components/datatable.component';

Secondly, I think you need to write the View Child like this:
@ViewChild('table') table: DatatableComponent;

@amcdnl
The example demo (https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts) is making reference to '#table' from the template. So, I think the above syntax works.

It worked for me.

it's not working for me....how to fix this one

[hotdog1987]

@NivethaMuthukumar Its clear from the error that your webpack.config is not loading this ngx-datatables module and therefore, typescript compilation is failing.

[ashcse]

I'm also facing the same issue

"componentsdatatable.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. "

In node modules I can see the datatable.component.ts file is present.

whereas following import statement works fine.
import {DatatableComponent} from '@swimlane/ngx-datatable';

but it gives 'offset' of undefined when I try to set offset value using this.table.offset = 0;