🚀 - Allow tuiSortable to configured dynamically

[evantrimboli]

Description

Consider the following component structure. Note this isn't intended to be 100% correct, just for illustration.

As far as I can tell, because it's not possible to dynamically add a directive, to toggle sorting using a condition, I need to branch on whether it's sortable and then repeat the th for a second time and duplicate the code.

I'm not sure of the best way to solve it, but it would be nice to be able to provide a flag to the directive which would toggle it on or off.

interface Column {
  readonly id: string
  readonly title: string
  readonly sortable: boolean
  // Other configs
}

@Component(
  selector: 'my-table',
  template: `
  <table>
    <thead tuiHead>
      <tr tuiThGroup>
      @for (c of columns(); track c.id) {
        @if (c.sortable) {
         <th tuiTh *tuiHead="c.id" tuiSortable>
            {{ c.title }}
          </th>
        } @else {
          <th tuiTh *tuiHead="c.id">
            {{ c.title }}
          </th>
        }
      }
      </tr>
    </thead>
  </table>
`
);
export Class MyTable {
  readonly columns = input<readonly Column[]>([]);
}

[waterplea]

We need to allow passing true / false to tuiSortable and then look for keys only among enabled ones in TuiTableSortBy

[tsironis13]

Is something ready to consume regarding this? I need to enable sorting only for columns which are configured to be sortable. Otherwise, I would like to fix it in the source code if nobody has been assigned to it.

[waterplea]

We need to allow passing true / false to tuiSortable and then look for keys only among enabled ones in TuiTableSortBy

Here's what needs to be done, you can make a PR.

[tsironis13]

We need to allow passing true / false to tuiSortable and then look for keys only among enabled ones in TuiTableSortBy

Here's what needs to be done, you can make a PR.

@waterplea I am on it, thanks

[waterplea]

@evantrimboli could you clarify the issue please, the sorting is enabled dynamically by passing [sorter] value. tuiSortable is just a directive to connect sorter and column key when you operate with keys rather than sorters, for example, for server side sorting.

EDIT: Oh, nevermind, got it. Problem was that sortable overrides it in ngOnInit so it was not possible to control with just setting [sorter]="null". PR is up.