Vue-tables-2: Column Visibility, hide column on init

[vstruhar]

Is it possible to hide a column(s) on page load?
Went through the documentation a few times and I still can't figure it out.

I have tried to use:

columnsDisplay: {
    order_id: 'mobile',
}

It works, but then the column will show up on mobile which is not desirable.

[MatiasOlivera]

You must use a logical operator (min, max or not) as a prefix of the device type. You can use not_mobileor min_tablet.

[vstruhar]

Thanks for the reply Matias. I know that I can use logic operators, but the idea is to hide a column on every device on page load. Sorry, maybe my description wasn't clear.

[francislavoie]

@vstruhar you can bind to the columns parameter, and update the columns array as you please. If the column isn't in the array, it isn't rendered.

[vstruhar]

Francis thanks for the idea, I have seen that matfish2 also suggested that here.
But then I would have to somehow add a checkbox to columns dropdown.

Adding a "never" option to columnsDisplay sounds like a really good solution, as suggested by @vesper8 in this issue #304.

[theharshin]

I too need this kind of option. Some columns are not always required to show at initial. But we need to give the option to enable it whenever required.
The current configuration is like we'll show all the columns, the user will hide which is not required.
@vstruhar did you find any proper solution/hack?

[vstruhar]

I didn't find any solution for this, still showing all columns on table load.

But I'm using the solution described here when I need to show/hide for example some admin specific columns.

[eddivalen]

Hey @vstruhar , please could you share how do you solve this issue? I want to hide a column by a condition

[vstruhar]

@eddivalen Sure, it's really simple, here is what I did:

<v-server-table ref="table" :columns="columns" :options="options" :name="name">

I removed/added item to columns array when needed:

mounted() {
     // hide admin column
     if (!this.isAdmin) {
          this.columns.splice(this.columns.findIndex(column => column == 'checkbox'), 1);
     }
},

So the idea is to modify the columns variable and the change will reflect in the vue-table.

[eddivalen]

@vstruhar Thanks for sharing!

[cheuberg]

It seems that this approach does not work when using vuex because the columns are stored in the store, taking the columns property as an initial value, but never updating it again. And I could not find a mutation which would do the job.

[AlexanderLindkjaer]

For anybody looking for a solution.
I found a toogleColumn() function directly on the v-server-table component that worked for me and still keeps the column in the dropdown.

<v-server-table ref="table" :columns="columns" :options="options" :name="name" class="has-bulk-selection">

mounted() {
     // hide desired column
     const serverTableRef = this.$refs.table;
     serveTableRef.toggleColumn(column_to_hide);
}

https://github.com/matfish2/vue-tables-2/blob/master/lib/methods/toggle-column.js

[matfish2]

solved by visibleColumns/hiddenColumns options