vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

V3 support for Col Toggle

pull/496/head
Cagatay Civici 2020-09-23 22:48:53 +03:00
parent 1e56e62f40
commit 8164fbe703
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/datatable/DataTable.vue
View File

@ -1246,11 +1246,11 @@ export default {
}
},
findColumnByKey(columns, key) {
if(columns && columns.length) {
for(let i = 0; i < columns.length; i++) {
let child = columns[i];
if(child.columnKey === key || child.field === key) {
return child;
if (columns && columns.length) {
for (let i = 0; i < columns.length; i++) {
let column = columns[i];
if (column.props.columnKey === key || column.props.field === key) {
return column;
}
}
}
@ -1651,23 +1651,31 @@ export default {
];
},
columns() {
let columns = this.$slots.default().filter(child => child.type.name === 'column');
let cols = [];
let children = this.$slots.default();
children.forEach(child => {
if (child.dynamicChildren)
cols = [...cols, ...child.children];
else if (child.type.name === 'column')
cols.push(child);
});
if (this.reorderableColumns && this.d_columnOrder) {
let orderedColumns = [];
for (let columnKey of this.d_columnOrder) {
let column = this.findColumnByKey(columns, columnKey);
let column = this.findColumnByKey(cols, columnKey);
if (column) {
orderedColumns.push(column);
}
}
return [...orderedColumns, ...columns.filter((item) => {
return [...orderedColumns, ...cols.filter((item) => {
return orderedColumns.indexOf(item) < 0;
})];
}
return columns;
return cols;
},
frozenColumns() {
let frozenColumns = [];

4
src/views/datatable/DataTableColToggleDemo.vue
View File

@ -12,7 +12,7 @@
<DataTable :value="products">
<template #header>
<div style="text-align:left">
<MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
<MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
placeholder="Select Columns" style="width: 20em"/>
</div>
</template>
@ -30,7 +30,7 @@
&lt;DataTable :value="products"&gt;
&lt;template #header&gt;
&lt;div style="text-align:left"&gt;
&lt;MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
&lt;MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
placeholder="Select Columns" style="width: 20em"/&gt;
&lt;/div&gt;
&lt;/template&gt;