Vue-tables-2 options.hiddenColumns doesn't work

Question

I can't figure out why the hiddenColumns option does not work. When I set it to hiddenColumns:['name'], I still can see the name column... I've tried the newest version but the problem remains.

EDIT

I want to have name column hidden by default but user can unhide it using columnsDropdown. So I can't just remove it from the columns array.

<script>
        new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data: {
                product_list_url: "{% url "api:product-list" %}?source__user_eshop={{ user.get_current_eshop.id }}",
                columns: ['is_active','code', 'name',  'category_full_text', 'brand', 'manufacturer', 'import_price', 'export_price', 'import_export_price_diff', 'on_stock', 'quantity',],
                options: {
                    perPage: 25,
                    perPageValues: [],
                    default: '-',
                    headings: {
                        code: 'Kód',
                        name: 'Názov',
                        on_stock: 'Na sklade',
                        quantity: 'Počet (sklad)',
                        import_price: 'Cena (zdroj)',
                        {#export_price: 'Cena (export)',#}
                        is_active: 'Zobraziť v exporte',
                        category_full_text: 'Kategória',
                        import_export_price_diff: 'Navýšenie',
                        manufacturer: 'Výrobca',
                        brand: 'Značka',
                    },
                    sortIcon: {
                        base: 'fa float-right',
                        is: 'fa-sort',
                        up: 'fa-sort-up',
                        down: 'fa-sort-down'
                    },
                    filterByColumn: true,
                    filterable: ['code', 'name', 'on_stock', 'category_full_text', 'manufacturer', 'brand'],
                    pagination: false,
                    listColumns: {
                        on_stock: [{
                            id: 'true',
                            text: 'Áno',
                        }, {
                            id: 'false',
                            text: 'Nie',
                        },
                        ]
                    },
                    sortable: ['name', 'code', 'quantity', 'import_price', 'category_full_text', 'manufacturer', 'brand'],
                    requestFunction: tablesRequestFunction,
                    responseAdapter: tablesResponseAdapter,

                    templates: {
                        on_stock: 'boolean',
                        is_active: 'boolean',
                        name: 'vue-tables-2-product',
                    },
                    columnsDropdown:true,
                    hiddenColumns:['name'],
                    texts: {
                        count: "Zobrazujem {from} - {to} z {count} záznamov|{count} záznamov|Jeden záznam",
                        first: 'Prvá',
                        last: 'Posledná',
                        filter: "Filter:",
                        filterPlaceholder: "Vyhladať",
                        limit: "Záznamy:",
                        page: "Strana:",
                        noResults: "Nenašli sa žiadne záznamy",
                        filterBy: "Filtrovať",
                        loading: 'Načítavanie...',
                        defaultOption: 'Vyberte {column}',
                        columns: 'Stĺpce'
                    },
                },
            },
            mounted() {
            },
            methods: {
                loading: function (id) {
                    // Animate loader off screen
                    $("#" + id).show();
                },
                onLoaded: function (id) {
                    $("#" + id).hide();
                },
                displayPrice: function (price, suffix) {
                    if (price !== null) {
                        return price + ' ' + suffix;
                    }
                },
                displayDiffPrice: function (price, suffix) {
                    if (price !== null) {
                        if (price < 0) {
                            return this.displayPrice(price, suffix);
                        } else if (price > 0) {
                            return '+' + this.displayPrice(price, suffix);
                        }
                    }
                },
                diffPriceStyle: function (price) {
                    var color = null;
                    if (!((price === null) || (price === 0))) {
                        if (price < 0) {
                            color = 'red';
                        } else if (price > 0) {
                            color = 'green';
                        }
                    }
                    return {color: color}
                }
            },
        })

    </script>

I've run out of ideas. Do you have any?

Answer 1

if you are using an version older than november 2019 it properly wont work based on matfish2 last post on this GitHub issue. I had the same issue, but using latest version did the trick for me.