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

Added edit + sort + filter demo to DataTable

pull/2272/head
mertsincan 2022-03-09 11:59:22 +00:00
parent 67ace50831
commit 996e7a7fc9
1 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/datatable/DataTableEditDemo.vue
View File

@ -56,6 +56,20 @@
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column> <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card">
<h5>Cell Editing with Sorting and Filter</h5>
<DataTable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%" sortable filter>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
</div>
</div> </div>
<AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" /> <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
@ -64,6 +78,7 @@
<script> <script>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
import {FilterMatchMode} from 'primevue/api';
export default { export default {
data() { data() {
@ -72,11 +87,18 @@ export default {
columns: null, columns: null,
products1: null, products1: null,
products2: null, products2: null,
products3: null,
statuses: [ statuses: [
{label: 'In Stock', value: 'INSTOCK'}, {label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'}, {label: 'Low Stock', value: 'LOWSTOCK'},
{label: 'Out of Stock', value: 'OUTOFSTOCK'} {label: 'Out of Stock', value: 'OUTOFSTOCK'}
], ],
filters: {
'code': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'quantity': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'price': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
},
sources: { sources: {
'options-api': { 'options-api': {
tabName: 'Options API Source', tabName: 'Options API Source',
@ -128,11 +150,26 @@ export default {
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column> <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card">
<h5>Cell Editing with Sorting and Filter</h5>
<DataTable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%" sortable filter>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
</div>
</div> </div>
</template> </template>
<script> <script>
import ProductService from './service/ProductService'; import ProductService from './service/ProductService';
import {FilterMatchMode} from 'primevue/api';
export default { export default {
data() { data() {
@ -141,11 +178,18 @@ export default {
columns: null, columns: null,
products1: null, products1: null,
products2: null, products2: null,
products3: null,
statuses: [ statuses: [
{label: 'In Stock', value: 'INSTOCK'}, {label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'}, {label: 'Low Stock', value: 'LOWSTOCK'},
{label: 'Out of Stock', value: 'OUTOFSTOCK'} {label: 'Out of Stock', value: 'OUTOFSTOCK'}
] ],
filters: {
'code': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'quantity': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'price': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
}
} }
}, },
productService: null, productService: null,
@ -214,6 +258,7 @@ export default {
mounted() { mounted() {
this.productService.getProductsSmall().then(data => this.products1 = data); this.productService.getProductsSmall().then(data => this.products1 = data);
this.productService.getProductsSmall().then(data => this.products2 = data); this.productService.getProductsSmall().then(data => this.products2 = data);
this.productService.getProductsSmall().then(data => this.products3 = data);
} }
} }
<\\/script> <\\/script>
@ -275,18 +320,34 @@ export default {
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column> <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card">
<h5>Cell Editing with Sorting and Filter</h5>
<DataTable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%" sortable filter>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
</div>
</div> </div>
</template> </template>
<script> <script>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import ProductService from './service/ProductService'; import ProductService from './service/ProductService';
import {FilterMatchMode} from 'primevue/api';
export default { export default {
setup() { setup() {
onMounted(() => { onMounted(() => {
productService.value.getProductsSmall().then(data => products1.value = data); productService.value.getProductsSmall().then(data => products1.value = data);
productService.value.getProductsSmall().then(data => products2.value = data); productService.value.getProductsSmall().then(data => products2.value = data);
productService.value.getProductsSmall().then(data => products3.value = data);
}); });
const productService = ref(new ProductService()); const productService = ref(new ProductService());
@ -299,11 +360,18 @@ export default {
]); ]);
const products1 = ref(null); const products1 = ref(null);
const products2 = ref(null); const products2 = ref(null);
const products3 = ref(null);
const statuses = ref([ const statuses = ref([
{label: 'In Stock', value: 'INSTOCK'}, {label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'}, {label: 'Low Stock', value: 'LOWSTOCK'},
{label: 'Out of Stock', value: 'OUTOFSTOCK'} {label: 'Out of Stock', value: 'OUTOFSTOCK'}
]); ]);
const filters = ref({
'code': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'quantity': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'price': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
});
const onCellEditComplete = (event) => { const onCellEditComplete = (event) => {
let { data, newValue, field } = event; let { data, newValue, field } = event;
@ -356,7 +424,7 @@ export default {
} }
}; };
return { productService, editingRows, columns, products1, products2, statuses, onCellEditComplete, return { productService, editingRows, columns, products1, products2, products3, statuses, filters, onCellEditComplete,
isPositiveInteger, onRowEditSave, getStatusLabel } isPositiveInteger, onRowEditSave, getStatusLabel }
} }
} }
@ -421,16 +489,32 @@ export default {
<p-column :row-editor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></p-column> <p-column :row-editor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></p-column>
</p-datatable> </p-datatable>
</div> </div>
<div class="card">
<h5>Cell Editing with Sorting and Filter</h5>
<p-datatable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
<p-column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%" sortable filter>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</p-datatable>
</div>
</div> </div>
<script type="module"> <script type="module">
const { createApp, ref, onMounted } = Vue; const { createApp, ref, onMounted } = Vue;
const { FilterMatchMode } = primevue.api;
const App = { const App = {
setup() { setup() {
onMounted(() => { onMounted(() => {
productService.value.getProductsSmall().then(data => products1.value = data); productService.value.getProductsSmall().then(data => products1.value = data);
productService.value.getProductsSmall().then(data => products2.value = data); productService.value.getProductsSmall().then(data => products2.value = data);
productService.value.getProductsSmall().then(data => products3.value = data);
}); });
const productService = ref(new ProductService()); const productService = ref(new ProductService());
@ -443,11 +527,18 @@ export default {
]); ]);
const products1 = ref(null); const products1 = ref(null);
const products2 = ref(null); const products2 = ref(null);
const products3 = ref(null);
const statuses = ref([ const statuses = ref([
{label: 'In Stock', value: 'INSTOCK'}, {label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'}, {label: 'Low Stock', value: 'LOWSTOCK'},
{label: 'Out of Stock', value: 'OUTOFSTOCK'} {label: 'Out of Stock', value: 'OUTOFSTOCK'}
]); ]);
const filters = ref({
'code': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'quantity': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
'price': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
});
const onCellEditComplete = (event) => { const onCellEditComplete = (event) => {
let { data, newValue, field } = event; let { data, newValue, field } = event;
@ -500,7 +591,7 @@ export default {
} }
}; };
return { productService, editingRows, columns, products1, products2, statuses, onCellEditComplete, return { productService, editingRows, columns, products1, products2, products3, statuses, filters, onCellEditComplete,
isPositiveInteger, onRowEditSave, getStatusLabel } isPositiveInteger, onRowEditSave, getStatusLabel }
}, },
components: { components: {
@ -592,6 +683,7 @@ export default {
mounted() { mounted() {
this.productService.getProductsSmall().then(data => this.products1 = data); this.productService.getProductsSmall().then(data => this.products1 = data);
this.productService.getProductsSmall().then(data => this.products2 = data); this.productService.getProductsSmall().then(data => this.products2 = data);
this.productService.getProductsSmall().then(data => this.products3 = data);
} }
} }
</script> </script>