Pass table object into cellComponent

[billdami]

If possible, it would be nice to able to have access to the table object within a custom cell component, for example, to have "delete row" button cell component which calls table.removeRow(row). Currently, I'm defining an action on tableActions within the parent component's init() that the cell component invokes, but it seems a bit messy.

I noticed that the table object does get passed to custom column components (https://github.com/offirgolan/ember-light-table/blob/master/addon/templates/components/columns/base.hbs#L2). Any reason why we couldn't do the same for the cell components?

[offirgolan]

@billdami from my experience, including the table instance in a cell component should be considered bad practice. The table headers should have access to the table instance since they have the ability to modify its entire content (i.e. sort/filter rows).

It seems as though you are not the only person to need this feature, as it could def. reduce code complexity and keep custom components more modular. I should have some more time to add this feature hopefully this or next week.

[billdami]

@offirgolan Thanks for reviewing this! Yeah I see the argument for not wanting to pass the table instance around too much, although it seems like in some cases you really do want to do table-level things from the context of a cell (such as in my example, deleting/removing the row). Maybe that particular use case could solved another way though, perhaps a row.remove() instance method or something like that.

The reason it makes it a bit messy for me to accomplish this with the tableActions object is due to the fact that I have encapsulated the table object creation in an isolated component, while my model deletion logic is in the consuming context of this component (aka a controller), which doesn't have access to the table object in order to call removeRow() after it performs its own deletion processing (calling destroyRecord() on the model).

if I had access to the table object in the cell component that was executing the delete action, I could bypass the table component completely, by directly calling the appropriate action provided in tableActions which returns a promise, and when it resolves, call table.removeRow(row). Currently, I'm having to basically setup a proxy for this action within my table component, so it is able to perform the removeRow() call. So I have a line like this in my component's init() method:

init() {
    this.get('tableActions').removeRow = Ember.$.proxy(this.get('actions').removeRow, this);
}

...

actions {
   removeRow(row) {
        if(this.attrs.removeRow) {
            this.attrs.removeRow(row.get('content')).then(() => {
                this.get('table').removeRow(row);
            });
        }
    }
}

[offirgolan]

@taras what do you think of this?

Solutions proposed:

1. Add access to the table instance in cellComponents
2. Add methods on the row/column instances that actually interact with the table instance
   • row.remove() --> row.__table__.removeRow(this)
   • column.remove() --> column.__table__.removeColumn(this)

[billdami]

👍

For my use case, #2 would obviously be perfect, though I'm not sure if others have scenarios which would be simplified by having access to table directly that don't deal with the removal of the row.

[offirgolan]

Resolved with #163