Potential performance issue for multi-selectable table row

Performance
1

I have create an multi-selectable table which allows you to select multiple rows; however, in order to check the current marking (whether checked OR not) I need to do the following.

Inside the table component,

  {{#each rows as |row index|}}
    {{table-x-row
      row=row
      index=index
      data=data
      selected=(mut selected)
      maxSelectionCount=maxSelectionCount
    }}
  {{/each}}

Inside the table-row JavaScript file,

  classNameBindings: ['isSelected:selected'],

  isSelected: computed('selected.[]', {
    get() {
      const index = this.get('index');
      const row = this.get('data.rows')[index];
      return this.get('selected').includes(row);
    }
  }),

Code above triggers every time the selected list changes plus for every table-row components which means if I have 10 rows. The computed property will get called for 10 times.

Any suggestion to solve this performance issue?

Thanks in advance.

2

  1. You might want to make selected as declared property on the row component and toggle the same when a row is selected or not…

  2. In order to get a handle of all the selected rows, you might have to have a property in table component.

This use case is similar to the Todo List use case mentioned in guides here, where ‘isDone’ flag on each todo item is toggled, while the todo list controller aggregates them. An example of this can be found in Todo MVC emberjs codebase here

You might also want to refer ember-light-table