Error: Assertion Failed: [ember-light-table] table must be an instance of Table. Ember 3.11 and above

[Rajkiran0147]

Tried upgrading an application to Ember 3.11 and seeing this Error: Assertion Failed: [ember-light-table] table must be an instance of Table error. In https://github.com/offirgolan/ember-light-table/blob/master/addon/components/light-table.js init method, the table is null.

[maxwondercorn]

Above Ember 3.5 you need to use the V2 beta version. I think the latest is v2.0.0-beta.4 and you no longer use new to create a table. Now you do a table.create

 const table = Table.create({ columns: this.columns, rows: this.tableRows });

[surekha199]

Above Ember 3.5 you need to use the V2 beta version. I think the latest is v2.0.0-beta.4 and you no longer use new to create a table. Now you do a table.create

 const table = Table.create({ columns: this.columns, rows: this.tableRows });

when I use above Table.create ()am getting the below error
message: "Assertion Failed: [ember-light-table] columns must be an array if defined", …}

if I try with new Table () then Error: Assertion Failed: [ember-light-table] table must be an instance of Table.

[maxwondercorn]

@surekha199 What version of Ember are you using?

[surekha199]

@maxwondercorn ,

ember-cli: 3.4.4
node: 12.14.0
os: darwin x64

but I am unable to use new Table() as well

[fran-worley]

Please see #701

For full details of the change in the API. Whilst new documentation hasn't been pushed to git pages yet, the dummy app is successfully running ember 3.16 and Ember Light Table with plenty of usage examples. You can find the most relevant file here: https://github.com/offirgolan/ember-light-table/blob/2-x/tests/dummy/app/mixins/table-common.js#L29

[surekha199]

I tried the above but still having same issue.
Tried below options and getting Assertion Failed: [ember-light-table] columns must be an array if defined", …}

1. new Table({ columns: this.get('columns'), rows: this.get('model'))
2. Table.create({ columns: this.get('columns'), rows: this.get('model'))
3. Table.create({ columns: [], rows: []))
4. let table = Table.create(this.get('columns'), this.get('model'));

With this below way , table is getting rendered with 100s of same error message in the console
Error: Assertion Failed: [ember-light-table] table must be an instance of Table.
5. let table = new Table(this.get('columns'), this.get('model'))

[fran-worley]

So 1,4 and 5 won't work as that's not the way you create a table. What value is this.columns ? Are you sure it's an array? You will need to pass your table instance into the template too.

[surekha199]

am trying to have static columns and rows and these are arrays as below and I have not created mixin/model, and taken everything in component.

columns: [{
label: 'Avatar',
valuePath: 'avatar',
width: '60px',
sortable: false,
cellComponent: 'user-avatar'
}, {
label: 'First Name',
valuePath: 'firstName',
width: '150px'
}, {
label: 'Last Name',
valuePath: 'lastName',
width: '150px'
}, {
label: 'Address',
valuePath: 'address'
}, {
label: 'State',
valuePath: 'state'
}, {
label: 'Country',
valuePath: 'country'
}],
model: computed(function() {
return [{
"email":"abc@gmail.email",
"name":"Abc",
"bio":"check"
}, {
"email":"xyz@gmail.email",
"name":"Xyz",
"bio":"check"
}];
}),

Yes passed table instance to template
{{#light-table table as |t|}}

[surekha199]

Is there any component other than light table to implement expanded-rows in table , so that it will be helpful for me to give try.

[haseebwaqas]

am facing same issue in using ember-light-table with ember-octane.I just want to display some static data into table. So instead of creating Mixin, I am writing code directly into component file but i have face this error:
"Uncaught (in promise) Error: Assertion Failed: [ember-light-table] table must be an instance of Table".
i have tried all above but still facing same issue.
Thanks in advance!.

Below is my component file:

import Component from "@glimmer/component";
import { computed } from "@ember/object";
import { action } from "@ember/object";
import { isEmpty } from "@ember/utils";
import { inject as service } from "@ember/service";
import Table from "ember-light-table";
import { task } from "ember-concurrency";
import { tracked } from "@glimmer/tracking";

export default class LeadsLeadTable extends Component {
@service store;
page = 0;
limit = 10;
dir = "asc";
sort = "firstName";

isLoading = computed.oneWay("fetchRecords.isRunning");
canLoadMore = true;
enableSync = true;

model = null;
meta = null;
columns = null;
table = null;

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

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

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

this.set("table", table);

}

@(task(function* () {
let records = yield this.get("store").query(
"user",
this.getProperties(["page", "limit", "sort", "dir"])
);
this.get("model").pushObjects(records.toArray());
this.set("meta", records.get("meta"));
this.set("canLoadMore", !isEmpty(records));
}).restartable())
fetchRecords;

@action
onScrolledToBottom() {
if (this.get("canLoadMore")) {
this.incrementProperty("page");
this.get("fetchRecords").perform();
}
}

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

columns = computed(function () {
return [
{
width: "40px",
sortable: false,
cellComponent: "row-toggle",
breakpoints: ["mobile", "tablet", "desktop"],
},
{
label: "Company Name",
valuePath: "companyName",
width: "150px",
},
{
label: "Address",
valuePath: "address",
width: "150px",
breakpoints: ["tablet", "desktop", "jumbo"],
},
{
label: "Phone Number",
valuePath: "phoneNumber",
breakpoints: ["tablet", "desktop", "jumbo"],
},
{
label: "Cell Number",
valuePath: "cellNumber",
breakpoints: ["desktop", "jumbo"],
},
{
label: "Email",
valuePath: "email",
breakpoints: ["jumbo"],
},
];
});

@action
onAfterResponsiveChange(matches) {
if (matches.indexOf("jumbo") > -1) {
this.get("table.expandedRows").setEach("expanded", false);
}
}
}

[maxwondercorn]

@haseebwaqas A copule things:

• make sure your using v2.0.0-beta.5, not the v3 beta
• ember-light-table still uses Ember object so the component needs to be @ember/component, not @glimmer/component
• install and apply the @classic decorator
• use Table.create instead of new Table

import Component from '@ember/component';
import classic from 'ember-classic-decorator';
// more imports

@classic
export default class LeadsLeadTableComponent extends Component {

  // some code
  
 let table = Table.create(this.get('columns'), this.get('model'), {
      enableSync: this.get('enableSync')
    });

// more code
}

These changes eliminated the table must be an instance of Table error.

[haseebwaqas]

@maxwondercorn :
Thanks for your time and the error is resolved thanks a lot.