Improve Actions Documentation Story

[alexander-alvarez]

Opening this issue to discuss & track what needs to be done to better facilitate users cleanly implementing interactions between the user, cells, and table. Will open a PR once we've agreed on next steps.

For example when should we use tableActions?
http://offirgolan.github.io/ember-light-table/docs/classes/light-table.html#property_tableActions
(related: should make sure all references to tableActions point to the definition -- https://github.com/offirgolan/ember-light-table/search?l=JavaScript&q=tableActions&utf8=%E2%9C%93)

When should we override the implementation of Cell?
I did this to add a column-is-selected class to every cell (which involves having a click callback with an implementation provided, as opposed to calling a parent and implementing it everywhere it gets used), and also to wire up a right click event.

• Maybe we provide a new component new cell component provided with the lib that has callbacks for click and right click already baked in?

/**
 * Enriches ember-light-table cell with column selection functionality.
 *
 * The class `column-is-selected` is added to the element when the column is selected.
 * Only one column can be selected at a time, and clicking within the same column does not un-select a column.
 * On right click, the component will call the `contextMenu` action on `tableActions`
 */
export default Cell.extend({
  classNameBindings: ['columnIsSelected'],
  columnIsSelected: computed.readOnly('column.selected'),
  contextMenu(event){
     // really anything could be done here, for example tracking right clicks
    const fn = this.get('tableActions.contextMenu');
    if (fn) {
      fn(event);
    }
  },

  click(event) {
    const columns = this.get('table.columns');
    const column = this.get('column');
    // this 'selects' columns 
    this.get('table.selectedColumns').setEach('selected', false);
    column.set('selected', true);
  },

});

I've done this, and I'm not sure how I feel about it

{{!-- onCellClick can be implemented differently for each column, 
          and since it's implemented on the column, then the logic lives
          in JS with the parent of the table, not in other files --}}
{{drilldown-button click=(action column.onCellClick column row)}}

Component.extend({
  componentFunction: K, // could be anything
  primaryColumn: computed(function() {
    return Column.create({
      /// ...
      onCellClick: this.componentFunction.bind(this)
    });
  })
})

The other option for something like this is delegating to tableActions and in that callback redelegating to the column depending on which it is. That would look something like this:
{{button click=(action tableActions.onButtonClick column row rowValue)}}

{{#light-table tableActions=(hash buttonClick=(action 'cellButtonClicked') )}} 
...
{{/light-table}}

and in the component

{
  actions: {
    cellButtonClicked(event, column, row, value) {
       // detect column and delegate to the appropriate function in the component.
    }
  }
}

It's a lot of writing simply because we go from from logic related to column <> table <> column

• Maybe we find a way to allow the user to enable linking cell events (contextMenu, mouseEnter, etc...) to tableAction events while defining the Column?
• How do we facilitate calling column specific actions implementations from their respective cell?

[alexander-alvarez]

@offirgolan Your insights requested here