Table Column Visibility Not Updating When Visible Is Changed

[daleshort]

Overview of the problem

Toggling visible on table columns does not cause the table column to hide.

Oruga version: 0.8.6
Vuejs version: 3.4.21
OS/Browser: Firefox/Chrome

Description

When the visible property of the table columns is reactive, and changed between true and false the columns do not hide.

Static values of true or false do control the column visibility successfully. It seems this works in Vue 3.2.41 but does not work in 3.4.21 and may be related to rerender efficiency improvements in Vue. Specifically this line spreads the props using the toRaw function which breaks the reactivity of the props. Removing the toRaw and just spreading props as-is fixes the bug.

Steps to reproduce

1. Navigate to Oruga Examples Table Detailed.
2. In the detail example table try toggling the "Name" column and observe that the Name column does not hide. The boardgame names do hide in the detail pane but that pane does not use oruga table components.

Expected behavior

Table columns to hide when visibility prop is programmatically toggled to false

Actual behavior

Column visibility always maintains the initial state of the visibility prop.

[mlmoravek]

@daleshort Thanks for pointing out this bug. When I added the toRaw props enclosure, I didn't realise that the props were no longer fully reactive.

However, it is not as simple as just removing the toRaw, because it has a reason.

If you remove rowRaw and add a thAttrs or tdAttrs property as a template prop, a "Maximum recursive updates exceeded" error is thrown.

Add this to any o-table-column component from the docs (I tested it with the detailed example):

<o-table-column
    ...
    :th-attrs="(column) => ({ 'data-col': column.field })"
    :td-attrs="(row) => ({ 'data-id': row.id })">
...
</o-table-column>  

[daleshort]

In that case I updated the PR with a more narrow approach.

[daleshort]

(and tested it with ThAttrs and tdAttrs)

[mlmoravek]

I admit this is a problem, but I would like to fix it in such a way that all or atleast all of the function props become reactive again. But I don't know how... (without setting all props one by one in the computed function)

[daleshort]

I actually can't reproduce the infinite update error. Here is why I'm doing to try and reproduce the issue with spreading just props.

Firefox 124.0.1
Vue 3.4.21 (also tried 3.2 but no error)

in TableColumn
`const providedData = computed(() => {
console.log("providedDataRefresh2");

return {
    ...props,
    $el: vm.proxy,
    $slots: vm.slots,
    style: style.value,
    isHeaderUnselectable: isHeaderUnselectable.value,
};

});`

in Table detail example:

        <o-table
            ref="table"
            :data="data"
            detailed
            hoverable
            :custom-detail-row="!showDefaultDetail"
            :opened-detailed="['Board Games']"
            :default-sort="['name', 'asc']"
            detail-key="name"
            :show-detail-icon="showDetailIcon"
            :th-attrs="(column) => ({ 'data-col': column.field })"
            :td-attrs="(row) => ({ 'data-id': row.id })"
        >

I was hoping to see if I could find another way.

I understand where you're coming from but in the absence of a more elegant solution, and given this is breaking your own examples (and in our production code), I'd strongly vote for the pragmatic fix of listing the props that can be reactive in the computed. It can always be improved later, and it's not like the props aren't already explicitly enumerated in the props declaration 10 lines above or somehow a naive user could introduce a new prop that wouldn't be listed in the computed.

[mlmoravek]

You have to set the thAttrs and tdAttrs to a o-table-column component not the o-table, and only if the function is a inline function in the template, not when its a defined function in the script block.

I confirm your point, and the pragmatic fix will be introduced in the next release, which came in the near future.

[daleshort]

ah sorry. Thanks for bearing with me. I can reproduce it now. I tried some stuff but nothing worked nor am I an expert in the advanced reactivity features.

Thanks for your consideration.

[mlmoravek]

Not for the fix, but for 0.9, I consider moving thAttrs and tdAttrs as property to o-table, then the problem could be solved, and ...props can be used again in the computed function of the table-column. And this might not be a big change because the row and column are given as props anyway.