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

Add new row selection demo

pull/6483/head
Cagatay Civici 2024-09-26 12:00:05 +03:00
parent 0362c9e3a3
commit 53dab14b88
2 changed files with 149 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Row selection with an element inside a column is implemented with templating.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['ProductService']" />
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null,
code: {
basic: `
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
`,
options: `
<template>
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
<Toast/>
</div>
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null
};
},
mounted() {
ProductService.getProductsMini().then((data) => (this.products = data));
},
methods: {
selectRow(data) {
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
<Toast />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProductsMini().then((data) => (products.value = data));
});
const products = ref();
const toast = useToast();
const selectRow = (data) => {
toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
};
<\/script>
`,
data: `
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...
`
}
};
},
methods: {
loadDemoData() {
ProductService.getProductsMini().then((data) => (this.products = data));
},
selectRow(data) {
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
}
}
};
</script>

6
apps/showcase/pages/datatable/index.vue
View File

@ -41,6 +41,7 @@ import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDo
import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue'; import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue'; import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue'; import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue'; import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue'; import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue'; import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
@ -181,6 +182,11 @@ export default {
label: 'Checkbox', label: 'Checkbox',
component: CheckboxRowSelectionDoc component: CheckboxRowSelectionDoc
}, },
{
id: 'column_row_selection',
label: 'Column',
component: ColumnRowSelectionDoc
},
{ {
id: 'row_selection_events', id: 'row_selection_events',
label: 'Events', label: 'Events',