Potential performance issue for multi-selectable table row

@li-xinyang wrote:

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.

Posts: 2

Participants: 2

Read full topic