Vue-good-table: Hide/Show Columns On Demand

Created on 22 Jun 2018 · 7Comments · Source: xaksis/vue-good-table

Issue Type (delete the irrelevant ones)

[x] Enhancement Request

Specs

What version are you using?
2.6.3

Actual Behavior

What actually happened?
Currently, you can set each column to 'hidden: true' or 'hidden: false' (https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#hidden). This allows the developer to hide columns in the table.

Expected Behavior

What did you expect to happen?
It would be useful to allow the user to choose which columns they want to see once the table has been created; i.e allow the user to hide/show columns on demand.

Source

sorayadragon

Most helpful comment

For anybody looking to do this, here's example code of how I did it (on site with bootstrap):

<vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed striped" :pagination-options="{ enabled: true, mode: 'records'}">
    <div slot="table-actions">
        <div class="button-group">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i> <span class="caret"></span></button>
            <ul class="dropdown-menu" style="top: auto; left: auto;">
                <li v-for="(column, index) in columns" :key="index">
                    <a href="#" class="small" tabIndex="-1" @click.prevent="toggleColumn( index, $event )"><input :checked="!column.hidden" type="checkbox"/>&nbsp;{{column.label}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div slot="emptystate">
        No records found
    </div>
</vue-good-table>

And inside methods:

toggleColumn( index, event ){
    // Set hidden to inverse of what it currently is
    this.$set( this.columns[ index ], 'hidden', ! this.columns[ index ].hidden );
}

tripflex on 5 Oct 2018

❤9

All 7 comments

hey @sorayadragon, you can set columns to hidden at any time... but you have to do it the vue way. If you do this.$set(this.columns[0], 'hidden', true) it will work as expected.

so to make this work, simply create a list of columns on your component and on-click on column name, set hidden to true or false. Or am I not understanding the ask here?

xaksis on 23 Jun 2018

👍1

@xaksis I didn't realize I had to set it the Vue way, thanks! I had to make my own checklist to allow the user to choose which columns to hide/show, but I've got it working now.

sorayadragon on 25 Jun 2018

@sorayadragon sweet! closing.

xaksis on 27 Jun 2018

I think this would be a good feature to have available natively, since it would be pretty standard and easy to do

tripflex on 4 Oct 2018

👍3

For anybody looking to do this, here's example code of how I did it (on site with bootstrap):

<vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed striped" :pagination-options="{ enabled: true, mode: 'records'}">
    <div slot="table-actions">
        <div class="button-group">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i> <span class="caret"></span></button>
            <ul class="dropdown-menu" style="top: auto; left: auto;">
                <li v-for="(column, index) in columns" :key="index">
                    <a href="#" class="small" tabIndex="-1" @click.prevent="toggleColumn( index, $event )"><input :checked="!column.hidden" type="checkbox"/>&nbsp;{{column.label}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div slot="emptystate">
        No records found
    </div>
</vue-good-table>

And inside methods:

toggleColumn( index, event ){
    // Set hidden to inverse of what it currently is
    this.$set( this.columns[ index ], 'hidden', ! this.columns[ index ].hidden );
}

tripflex on 5 Oct 2018

❤9

@xaksis can we use milliseconds in dateInputFormat
{
label: 'Done On',
field: 'completedDate',
type: 'date',
dateInputFormat: 'ms',
dateOutputFormat: 'DD-MM-YYYY'
}
If i am using it in the above way it is always returning today's date ? Because i am getting milliseconds as date input,