Working with templates in ember-models-table

Question

I am using ember-models-table (https://github.com/onechiporenko/ember-models-table) and I want to customize the output of a table cell. As the documentation suggests I tried with assigning templates and components to columns in the columns definition.

import Ember from 'ember';

export default Ember.Controller.extend({
    columnDefs
    {
        "propertyName": "id",
        "title": "ID",
    },
    {
        "propertyName": "name",
        "title": "Name",
    },
    {
        "propertyName": "postTypeId",
        "title": "Post Type",
        "template": "ember-models-table/column/enumType", // can be template or component
    }
});

So I am not talking about the ember-models-table component but about custom templates / component that can be assigned to specific column as can be seen in column 3 in my code snipplet. Whereas it seems that to a template only a record reference is passed, the docs (http://onechiporenko.github.io/ember-models-table/#/examples) say that to a component a table, a column, a record and a data reference is passed but what I need is

a) the specific value (or model property) I defined within the columnDefs in the controller (this is because I want to use this template / component with many models and different property names, so I can't hardcode the property name in the template / component)

b) the ability to pass arbitrary data to the column's component (here I am talking about component only because it seems that it is possible with components to pass something in with the data attribute, but I could not figure out how to do it)

Hope my problem is getting a little bit clearer and would appreciate every suggestion.

P.S If there's a better way to format the output within a table cell (for example by somehow assigning a helper to the cell's value) please tell me.

Answer 1

I might have misunderstood your case; but please take a look at the dummy application I have created in this twiddle. I have passed my-custom-property-for-component in column definition for the custom component (my-component) and table wide custom property named tableWideCustomProperty to models-table.

You can retrieve these properties from within my-component as follows:

Retrieving my-custom-property-for-component: column.my-custom-property-for-component because column definition is passed with the name column to the custom component.

Retrieving tableWideCustomProperty: table.tableWideCustomProperty because models-table itself is passed with the name table to the custom component.

As you can see, you have access to the table, record, data and column attributes within the custom component defined within column definition.

Answer 2

While I may not 100% understand your use case, I'm assuming rendering the tables on your routes. One method would be defining the column definitions on a controller property and pass it with the model to the component.

app/controllers/person.js

import Ember from 'ember';

export default Ember.Controller.extend({
columnDefs: [
    {
        "propertyName": "id",
        "title": "ID"
    },
    {
        "propertyName": "firstName",
        "title": "First Name"
    },
    {
        "propertyName": "lastName",
        "title": "Last Name"
    }]
});

app/models/person.js

import DS from 'ember-data';

export default DS.Model.extend({
    firstName:     DS.attr('string'),
    lastName:      DS.attr('string')
});

app/routes/person.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('person');
  }
})

app/templates/person.hbs

{{models-table
        data=model
       columns=columnDefs}}

You can add any options (template, sortedBy, etc) to the objects as needed.