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

Demo update

pull/345/head
cagataycivici 2020-05-16 11:46:04 +03:00
parent c9fcf2afaa
commit b8a3fb28d5
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,11 +11,12 @@
<DataTable :value="cars"> <DataTable :value="cars">
<template #header> <template #header>
<div style="text-align:left"> <div style="text-align:left">
<MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/> <MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/>
</div> </div>
</template> </template>
<Column field="vin" header="Vin" /> <Column field="vin" header="Vin" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column> <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable> </DataTable>
</div> </div>
@ -27,11 +28,12 @@
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align:left"&gt; &lt;div style="text-align:left"&gt;
&lt;MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/&gt; &lt;MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin" /&gt; &lt;Column field="vin" header="Vin" /&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt; &lt;Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -42,8 +44,8 @@ import CarService from '../../service/CarService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null,
columns: null, columns: null,
columnOptions: null,
cars: null cars: null
} }
}, },
@ -56,11 +58,15 @@ export default {
{field: 'brand', header: 'Brand'}, {field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'} {field: 'color', header: 'Color'}
]; ];
this.selectedColumns = this.columns;
this.columnOptions = [...this.columns];
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter(col => value.includes(col));
}
} }
} }
</CodeHighlight> </CodeHighlight>
@ -72,11 +78,12 @@ export default {
<script> <script>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null,
columns: null, columns: null,
columnOptions: null,
cars: null cars: null
} }
}, },
@ -89,11 +96,15 @@ export default {
{field: 'brand', header: 'Brand'}, {field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'} {field: 'color', header: 'Color'}
]; ];
this.selectedColumns = this.columns;
this.columnOptions = [...this.columns];
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter(col => value.includes(col));
}
} }
} }
</script> </script>