Conditonally rendering columns in DataTable with v-if is throwing error

[redsuperbat]

<Column
:sortable="true"
headerClass="md:w-28"
field="volume"
header="Volym"
v-if="!sm"
/>

sm is just a boolean that checks the screenwidth. I want to conditionally render columns but it throws the error below.

nonIterableSpread.js:2 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (nonIterableSpread.js:2)
    at _toConsumableArray (toConsumableArray.js:6)
    at DataTable.vue:1669
    at Array.forEach (<anonymous>)
    at Proxy.columns (DataTable.vue:1667)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:827)
    at Object.get [as columns] (runtime-core.esm-bundler.js:5622)
    at Proxy.render (DataTable.vue:21)
    at renderComponentRoot (runtime-core.esm-bundler.js:705)

[dheimoz]

Hello @redsuperbat , have you considered using a Breakpoint class with PrimeFlex? https://primefaces.org/primevue/showcase/#/display
Something like

<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>

I haven´t tested myself on a DataTable, but I believe should be straightforward.

[redsuperbat]

Hey @dheimoz! Thanks for your response. I will definitely check that out! However I think using vue's built in rendering should be something that works with DataTable since it is a core feature of vue and this library is targeting the vue framework.

[WhyKickAmooCow]

It should definitely be possible to do this. I have just run into this when trying to create a DataTable that I wish to respond to whether or not the current user has permission to edit it or not. As it stands it was simpler and easier to create another DataTable to have one with editing capabilities and one without.

I am not sure if it belongs in the same issue, but this also does not work when trying to use v-if on a ColumnGroup.

[Eireternal]

I've run into this issue as well where I use Datatable on multiple pages but need to conditional set things like row selection, edit, expand etc. Running into major problems as its too deep to create multiple Datatables for each condition and defeats the purpose of a component.

[mllull]

Hi!

What about this issue @cagataycivici? I think that this feature is a must, I you try to conditionaly hidde a column (with v-if) it throws lots of errors.

Maybe an attr like isVisible (default to true) would be a nice approach, it would prevent breaking the current implementation of Column.

[mllull]

Hi guys,

Finally I've implemented this feature in my fork of this lib: mllull@e3aeaf3

I haven't created a PR basically for two reasons:

1. My previous PR's where ignored.
2. I really need my modifications in my project and can't wait this changes to be in primevue. I understand that maintaining this libreary is not trivial (and has to be "in line" with other flavors of Prime, like PrimNG, etc.) and authors maybe have their own job and can't be focused all time to this lib. So I decided that I will put my work on my fork and if anyone need my code, only take it and use it as you want.

I have also added examples in docs. Enjoy it if you want! 😊

[AndreasNasman]

I got bit by this today too. I'll follow @WhyKickAmooCow advice for now and create a copy of my existing DataTable.

[tugcekucukoglu]

All PR's always welcomed. Please feel free to create PR.

Also PrimeVue has similar concept ColToggle

[AndreasNasman]

@tugcekucukoglu I already had a look a at dynamic columns (which ColToggle uses) but couldn't figure out how to conditionally render more advanced Columns with a custom <template #body> for instance.

However, I found out that you can conditionally render Columns with v-if if you put it on a plain wrapping <div>!

<DataTable>
  <div v-if="condition">
    <Column field="name" header="Name" />
  </div>
  <div v-else>
    <Column field="age" header="Age" />
  </div>  
</DataTable>

It looks quite odd and not sure if this is the intended behavior, but no extra <div> element seems to be rendered on screen. I previously only tried this putting the v-if on a simple <template> tag, but that gives a TypeError: child.children is not iterable error.

[ozeebee]

@AndreasNasman the <div> wrapper only works if you have an v-else condition.
For instance, this does not work:

<DataTable>
  <Column field="id" header="ID" />
  <div v-if="condition">
    <Column field="name" header="Name" />
  </div>
</DataTable>

So, today there is no way of conditionnally toggling an individual Column except by using some CSS/styling trick.
And the "ColToggle" (with v-for) is not suitable either since you cannot customize a Column with slots, etc.

[mertsincan]

Hi,

I made some changes in the computed columns method. Could you please try the following link?
https://codesandbox.io/s/pensive-christian-nsl1d?file=/src/DataTableBasicDemo.vue

Note: Please check DataTable.computed.columns = function () { in main.js