I am not able to create even a basic table using ember-table latest version

Ember CLI
1

https://opensource.addepar.com/ember-table/latest/docs/quickstart I have follwed the above documentatiom but not able to create table. shows error in column definitions. Can anyone show me a complete example of creating basic table. Can someone please give me a example of columns and rows constrcton details.!! I follows the docs but not wotking for me!

2

I can help a bit, but you haven’t provided much to respond to. “shows error in column definitions” can cover a lot of territory. The quickstart is accurate but limited. The other examples flesh things out a bit more. They show the creation of the data structures for columns and rows. I can attest that these things work, as we used them as a basis for our own implementation. As long as the row property names are specified as the values of the column valuePath properties, everything should fundamentally hold together. Beyond that, it will mostly ignore things it doesn’t understand, rather than fail.

Perhaps you can share a simplified reduction of the column and row structures you are trying to use and how you’re using it in your table template and we can spot where things are going off the rails. This will also help us to discover how to make the documentation clearer.

3

template.js

import Component from '@ember/component';

class DemoComponent extends Component {
  columns = [
    {
      name: `First Name`,
      valuePath: `firstName`
    },
    {
      name: `Last Name`,
      valuePath: `lastName`
    }
  ];

  rows = [
    {
      firstName: 'MR',
      lastName: 'XXXXX',
    },
    {
      firstName: 'MRS',
      lastName: 'YYYYYY',
    }
  ];
}

Template.hbs

  <EmberTable as |t|>
    <t.head @columns={{columns}} />
    <t.body @rows={{rows}} />
  </EmberTable>
4

Looks like your template names are not the same, one is capital T the other is lower case, so your ember table @colums has no access to your Columns component in your template.js file.

7

I am facing a similar issue as Omed.

“Property set failed: object in path “unwrappedApi” could not be found.”

Here is more information about my setup:

  1. Using the same code as given on the ember-table web-site.
  2. Ember-table version: “^2.0.0-beta.4”
  3. Ember version: “~3.1.3”

Any help with resolving this is highly appreciated.

Thanks,

2 Likes
8

I got the same issue and resolved it by changing to ember-table to version 2.0.0-beta.7

9

I just came across this now when I did a basic install of ember-table

ember install ember-table, followed the quick start guides and got this breaking change. Upgrading to 2.0.0-beta.7 also helped me.

10

I am trying to use ember-table, however I am stumbling with probably a basic ember concept. The ember-table examples show ‘hard coded’ values in the component.js file for the example.

For most components, I pass the model (or a subset) to the template from the route, then in the template:

{{#each model as |t|}} ....

How would the code in the component.js file look if the lastName and firstName property were being passed from the route?? model.firstName??

Thanks for the help; apologies for the basic question.

11

It helps to know something of your structure. Can I presume that the model contains an array of the records that you want to display in the table? If so, in the simplest case, you end up with something like:

<EmberTable as |t|>;
    <t.head @columns={{columns}} />
    <t.body @rows={{model}}/>
</EmberTable>

init() {
  this.columns = [
    {
      name: `First Name`,
      valuePath: `firstName`
    },
    {
      name: `Last Name`,
      valuePath: `lastName`
    }
  ];

The table maps the valuePath for each field to the corresponding property of each item in the array. The other properties tell it how to handle the header and display the cells for that column. You won’t need your own {{each}} loop at all.

If you need to do something special for how your rows are displayed, you still don’t need to loop, but you can access the shape of the rows and cells, as per the documentation, using something like:

<t.body as |b|>
  <b.row as |r|>
    <r.cell ... />
  <b.row>
</t.body>

Did this answer your question or did I miss it?

12

I am unable to create basic ember table I did follow the document installed ember-table and added columns/rows

getting Compile Error: Cannot find component ember-table

13 
<EmberTable as |t|>;
    <t.head @columns={{columns}} />
    <t.body @rows={{model}}/>
</EmberTable>

should be:

<Ember-Table as |t|>;
    <t.head @columns={{this.columns}} />
    <t.body @rows={{this.model}}/>
</Ember-Table>