Table Column Visibility Not Updating When Visible Is Changed

[daleshort]

Table Column Visibility Not Updating When Visible Is Changed

[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.