Ability to change columns

[gmixson]

• I'm submitting a ...

  • bug report
  • feature request
  • [ ] support request Ask in the official Ember Discord server.

• What is the current behavior?

I provide an array of ModelsTableColumnOptions to the component from a getter in my component class. When I change the output of the getter the columns displayed stay the same.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

• [Bug] What is the expected behavior?

• [Feature] What is the motivation / use case for changing the behavior?

I would like to show/hide different columns based on user interaction that is not directly tied to the table. For example, I have a form that I use to determine which types of columns should be displayed.

A side effect would be an easy way to change the order of displayed columns.

• [Support] What exactly you try to do?

• Please tell us about your environment:

• ember-models-table version: 5.2
• ember version: 5.6
• ember-data version: 5.3
• ember-cli version: 5.6
• node version: 18.15
• npm or yarn version: 9.5

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

I believe this occurs because the _setupColumns function is only run from the constructor. One possible implementation would be to refactor the 'results' of _setupColumns such as this.processedColumns to be getters that depend on this.args.columns.

[JulienRavet]

Hi !

I'm encountering the same issue and expect the standard behavior to be that the table reloads when a column changes.

However I can provide a dirty workaround: you can force the re-rendering of the ModelsTable component.

• In your component template, show/hide your table component using a boolean tracked property
• In your controller, toggle this property when you need to update your columns

controller:

@tracked hideTableForRerendering: boolean = false;

@action onWhateverTriggerColumnsUpdate() {
      this.hideTableForRerendering = true;
      // update the columns definition
      setTimeout(() => {
         this.hideTableForRerendering = false;
      }, 0);
   }

template:

{{#unless this.hideTableForRerendering}}
<ModelsTable ... />
{{/unless}}

Be sure to set the hideTableForRerendering to false using setTimeout otherwise it will not work