0

I am trying to use ngx-datatables in my angular 2 app. I tried following the example: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts I'm getting the error: "Cannot set property 'offset' of undefined" whenever I type in the filter box. I striped it down as much as possible and hard-coded the rows in to try to see what was wrong, but I can't figure it out. Any help is appreciated.

Component:

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;
    }
}
bobpal
  • 117
  • 1
  • 8
  • Can you add your `AppModule`? Looks like `this.table` is undefined. And i see strange import. Shouldn't it be `import { DatatableComponent } from '@swimlane/ngx-datatable'`? – yurzui May 11 '17 at 18:13
  • See it in action https://plnkr.co/edit/eLuuvtN1NzoIZWhqGCyy?p=preview – yurzui May 11 '17 at 18:15

1 Answers1

0

@yurzui Thanks. The import was wrong. In the example, it is: "from '../../src/components/datatable.component';".

I tried to do that with mine, just my folder was a few directories up. None of their examples do it this way. They need better documentation.

bobpal
  • 117
  • 1
  • 8