Problems with cellComponent

[adopted-ember-addons]

Problems with cellComponent

[offirgolan]

Hi @aexmachina, sorry you're facing so many issues. I think the documentation definitely needs a lot more work but in the mean time, ill try to answer your questions as best I can.

I've encountered several issues trying to use the cellComponent property on my column definition. The docs don't make it clear that the component path must be light-table/cells/my-component.

cellComponent can be declared anywhere (see here) but a cellType must be declared in light-table/cells/ (see here)

If I provide a valuePath in the columns spec I get an error Cannot set read-only property "value" on object. The workaround is to define value: null on the Cell subclass, but the valuePath has no effect.

Not really sure what you are trying to do here. valuePath should be a string with the path on the model to the value you want to display.

Also, the only way for me to get the value was from row.content.

Row is an ObjectProxy. To access content on it you just need to do row.get('someProp') no need to use row.content unless you are attempting to call a function.

[simonexmachina]

cellComponent can be declared anywhere (see here) but a cellType must be declared in light-table/cells/ (see here)

Okay, cool thanks. So to be clear the difference between cellComponent and cellType is that cellType is looked up in light-table/cells/? FWIW, my feeling is that it adds complexity for little benefit. Also the fact that they have a different interface is perhaps confusing - cellType is provided rawValue and cellComponent is provided value.

Not really sure what you are trying to do here. valuePath should be a string with the path on the model to the value you want to display.

Here's what I'm providing:

new Table([{
      label: 'Status',
      valuePath: 'status',
      cellComponent: 'subbie-pca-status',
    }], data)

and I get Cannot assign to read only property 'stack' of object '[object Object]'. If I define the Cell as follows then it does work:

Cell.extend({
  value: null
})

In fact, even if I don't specify valuePath this is still required.

Row is an ObjectProxy.

Okay cool.

[offirgolan]

So to be clear the difference between cellComponent and cellType is that cellType is looked up in light-table/cells/?

cellType !== cellComponent. cellComponent is just the content of a tbody cell. You can find out more info about cellType here

I get Cannot assign to read only property 'stack' of object '[object Object]'

Im really sorry, but I dont have much context here. Can you post code snippets of the cellComponent, and your table component?

[simonexmachina]

Cool, got it.

Here's my code:

// app/pods/my-component/component.js
export default Component.extend({
  table: computed(function() {
    let columns = [{
      label: 'Status',
      valuePath: 'foo',
      cellComponent: 'subbie-pca-status',
    }]
    return new Table(columns, [
      {foo: 'bar'}
    ])
  })
})

// app/pods/my-component/template.hbs
{{#light-table table classNames='table' as |t|}}
  {{t.head
    iconAscending='fa fa-sort-asc'
    iconDescending='fa fa-sort-desc'}}

  {{#t.body as |body|}}
    {{#if table.isEmpty}}
      {{#body.no-data}}
        No matching subbies.
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}

{{/light-table}}

// app/pods/components/subbie-pca-status/component.js
import Cell from 'ember-light-table/components/cells/base';
export default Cell.extend({
  value: null,
})

// app/pods/components/subbie-pca-status/template.hbs
row.foo: {{row.foo}}<br>
value: {{value}}

This all works, except if I remove value: null on the Cell subclass it throws an error Cannot assign to read only property 'stack' of object '[object Object]'

[offirgolan]

export default Cell.extend({
  value: null,
})

Where is Cell coming from?

[simonexmachina]

import Cell from 'ember-light-table/components/cells/base'

[offirgolan]

import Cell from 'ember-light-table/components/cells/base'

The only place this should happen is for creating custom cell types and not for cellComponent. Just use Ember.Component.extend and it should fix your problem.

[simonexmachina]

Right okay thanks.