The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists.
UPDATE
I am trying to hide the name column by default while allowing users to unhide it using the columnsDropdown. Simply removing it from the columns array is not an option in this case.
<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'm stumped at this point. Any suggestions?