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

Resize, Toggle and Reorder demo update

pull/358/head
cagataycivici 2020-06-30 14:50:58 +03:00
parent 01ecb64076
commit 38ca903f3f
3 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -11,21 +11,23 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Fit Mode</h5> <h5>Fit Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit"> <DataTable :value="products" :resizableColumns="true" columnResizeMode="fit">
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<h5>Expand Mode</h5>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="expand">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
<h5>Expand Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="expand">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">
@ -34,38 +36,38 @@
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Fit Mode&lt;/h3&gt; &lt;h3&gt;Fit Mode&lt;/h3&gt;
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit"&gt; &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;h3&gt;Expand Mode&lt;/h3&gt; &lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="expand"&gt; &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="expand"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</CodeHighlight> </CodeHighlight>
@ -76,20 +78,20 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
} }
} }
</script> </script>

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

@ -9,14 +9,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars"> <DataTable :value="products">
<template #header> <template #header>
<div style="text-align:left"> <div style="text-align:left">
<MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle" <MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/> placeholder="Select Columns" style="width: 20em"/>
</div> </div>
</template> </template>
<Column field="vin" header="Vin" /> <Column field="code" header="Code" />
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column> <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
</DataTable> </DataTable>
</div> </div>
@ -27,43 +27,43 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="products"&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 :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle" &lt;MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
placeholder="Select Columns" style="width: 20em"/&gt; 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="code" header="Code" /&gt;
&lt;Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"&gt;&lt;/Column&gt; &lt;Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null, selectedColumns: null,
columns: null, columns: null,
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
this.columns = [ this.columns = [
{field: 'year', header: 'Year'}, {field: 'name', header: 'Name'},
{field: 'brand', header: 'Brand'}, {field: 'category', header: 'Category'},
{field: 'color', header: 'Color'} {field: 'quantity', header: 'Quantity'}
]; ];
this.selectedColumns = this.columns; this.selectedColumns = this.columns;
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onToggle(value) { onToggle(value) {
@ -79,29 +79,29 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
selectedColumns: null, selectedColumns: null,
columns: null, columns: null,
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
this.columns = [ this.columns = [
{field: 'year', header: 'Year'}, {field: 'name', header: 'Name'},
{field: 'brand', header: 'Brand'}, {field: 'category', header: 'Category'},
{field: 'color', header: 'Color'} {field: 'quantity', header: 'Quantity'}
]; ];
this.selectedColumns = this.columns; this.selectedColumns = this.columns;
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onToggle(value) { onToggle(value) {

46
src/views/datatable/DataTableReorderDemo.vue
View File

@ -9,8 +9,8 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"> <DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" /> <Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable> </DataTable>
</div> </div>
@ -21,39 +21,39 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt; &lt;DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt;
&lt;Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" /&gt; &lt;Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" /&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 columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
columns: null, columns: null,
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
this.columns = [ this.columns = [
{field: 'vin', header: 'Vin'}, {field: 'code', header: 'Code'},
{field: 'year', header: 'Year'}, {field: 'name', header: 'Name'},
{field: 'brand', header: 'Brand'}, {field: 'category', header: 'Category'},
{field: 'color', header: 'Color'} {field: 'quantity', header: 'Quantity'}
]; ];
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onColReorder(event) { onColReorder() {
this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000}); this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
}, },
onRowReorder(event) { onRowReorder(event) {
@ -70,28 +70,28 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
columns: null, columns: null,
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
this.columns = [ this.columns = [
{field: 'vin', header: 'Vin'}, {field: 'code', header: 'Code'},
{field: 'year', header: 'Year'}, {field: 'name', header: 'Name'},
{field: 'brand', header: 'Brand'}, {field: 'category', header: 'Category'},
{field: 'color', header: 'Color'} {field: 'quantity', header: 'Quantity'}
]; ];
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onColReorder() { onColReorder() {