Disable Data Table Sorter conditionally

[distor-sil3nt]

Hello naive-Community,

is there any way to conditionally disable the sorting function of the Data Table component?

I have an editable data table with input fields. I would like to disable the sorter and remove the default sorting icons in all columns when I am in edit mode, i. e. isEdit flag is true.

I tried to no avail to achieve this with the provided sortOrder, renderSorter and renderSorterIcon column properties.

Thanks in advance for your help and effort.

[07akioni]

Should sort state be kept? If not I think you may create a computed rows which removes sorter prop conditionally.

computed(() => {
  return [{ key: 'key', title: 'Title', ...(editableRef.value ? {} : { sorter: 'default', sortOrder: sortOrderRef.value }) }]
})

[07akioni]

If not I think you should control data display by yourself (using remote prop)

[distor-sil3nt]

Should sort state be kept? If not I think you may create a computed rows which removes sorter prop conditionally.

computed(() => {
  return [{ key: 'key', title: 'Title', ...(editableRef.value ? {} : { sorter: 'default', sortOrder: sortOrderRef.value }) }]
})

Hi @07akioni, this worked really well. Thanks a lot for your help!