vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

DataTable Edit demos style updates

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-03-06 16:44:07 +03:00
parent 8453cdb428
commit cf5c47ac6a
3 changed files with 97 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

50
doc/datatable/edit/RowEditDoc.vue
View file

@ -6,7 +6,7 @@
</p>
</DocSectionText>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableStyle="min-width: 50rem">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -40,7 +40,7 @@
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
<DocSectionCode :code="code" :service="['ProductService']" />
<DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template>
<script>
@ -59,7 +59,7 @@ export default {
code: {
basic: `
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableStyle="min-width: 50rem">
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -96,7 +96,7 @@ export default {
<template>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableStyle="min-width: 50rem">
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -176,12 +176,19 @@ export default {
}
}
};
<\/script>`,
<\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>`,
composition: `
<template>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableStyle="min-width: 50rem">
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -257,7 +264,29 @@ const formatCurrency = (value) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
}
<\/script>`
<\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>`,
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
},
...
`
}
};
},
@ -291,3 +320,10 @@ const formatCurrency = (value) => {
}
};
</script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>