TypeError: Cannot read property 'map' of null

[ghost]

Hi,

I am trying to get light-table working on, I copied the example from the demo page, but when I try to run this, I got an error from console:

Table.js:433 Uncaught TypeError: Cannot read property 'map' of null
    at Function.createRows (Table.js:433)
    at new Table (Table.js:104)
    at Class.init (table-component.js:29)
    at Class.superWrapper [as init] (ember.debug.js:40426)
    at new Class (ember.debug.js:36118)
    at Function._ClassMixinProps.create (ember.debug.js:36306)
    at CurlyComponentManager.create (ember.debug.js:12594)
    at OpenComponentOpcode.evaluate (ember.debug.js:47194)
    at VM.execute (ember.debug.js:53785)
    at Object.render (ember.debug.js:53348)

It is pointing at line 29 in table-component, which is right above the init() function. However, if I manually supply data to model, it works fine. If I set model: [] instead of model: null, it works...

//app/components/table-component.js

import Ember from 'ember';
import Table from 'ember-light-table';

const {
    inject,
    isEmpty,
    computed
} = Ember;

export default Ember.Component.extend({
    store: inject.service('store'),

    page: 0,
    limit: 10,
    dir: 'asc',
    sort: 'name',

    isLoading: false,
    canLoadMore: true,

    model: null,

    columns: computed(function () {
        return [{
            label: 'Name',
            valuePath: 'name',
            width: '150px'
        }];
    }),

    init() {
        this._super(...arguments);

        let table = new Table(this.get('columns'), this.get('model'), { enableSync: true });
        let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sort'));

        // Setup initial sort column
        if (sortColumn) {
        sortColumn.set('sorted', true);
        }

        this.set('table', table);
    },

    fetchRecords() {
        this.set('isLoading', true);
        this.get('store').query('shopping', this.getProperties(['page', 'limit', 'sort', 'dir'])).then((records) => {
            console.log(records.toArray());
            this.get('model').pushObjects(records.toArray());
            this.set('canLoadMore', !isEmpty(records));
        }).finally(() => {
            this.set('isLoading', false);
        });
    },

    actions: {
        onScrolledToBottom() {
            if (this.get('canLoadMore')) {
                this.incrementProperty('page');
                this.fetchRecords();
            }
        },

        onColumnClick(column) {
            if (column.sorted) {
                this.setProperties({
                    dir: column.ascending ? 'asc' : 'desc',
                    sort: column.get('valuePath'),
                    canLoadMore: true,
                    page: 0
                });
                this.get('model').clear();
            }
        }
    }
});

[alexander-alvarez]

@coolzai sorry for the late response, this seemed to have fallen through the cracks.
The column and row attributes of the Table need to be arrays, as specified here http://offirgolan.github.io/ember-light-table/docs/classes/Table.html

Is there anyway we could make this clearer to you?

[zuekut]

I am also having the same issue as coolzai

[buschtoens]

@zuekut as you can see in the code excerpt above, model—which is passed to the Table constructor as the columns array—is null when init is run. Since ELT tries to call columns.map( ... ) you get that error. To fix it, make sure the values you pass to the Table constructor (i.e. columns and rows) are arrays.

We could add assertions to the constructor that print more detailed instructions. The current error message is admittedly a bit cryptic.