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

DataTable Edit demos style updates

pull/3711/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
doc/datatable/edit/CellEditDoc.vue
View File

@ -3,7 +3,7 @@
<p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p> <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableStyle="min-width: 50rem"> <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%"> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
<template #body="{ data, field }"> <template #body="{ data, field }">
{{ field === 'price' ? formatCurrency(data[field]) : data[field] }} {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@ -19,7 +19,7 @@
</Column> </Column>
</DataTable> </DataTable>
</div> </div>
<DocSectionCode :code="code" :service="['ProductService']" /> <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template> </template>
<script> <script>
@ -37,7 +37,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableStyle="min-width: 50rem"> <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%"> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
<template #body="{ data, field }"> <template #body="{ data, field }">
{{ field === 'price' ? formatCurrency(data[field]) : data[field] }} {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@ -55,7 +55,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableStyle="min-width: 50rem"> <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%"> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
<template #body="{ data, field }"> <template #body="{ data, field }">
{{ field === 'price' ? formatCurrency(data[field]) : data[field] }} {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@ -128,11 +128,17 @@ export default {
} }
}; };
<\/script> <\/script>
`,
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>`,
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableStyle="min-width: 50rem"> <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%"> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
<template #body="{ data, field }"> <template #body="{ data, field }">
{{ field === 'price' ? formatCurrency(data[field]) : data[field] }} {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@ -201,7 +207,13 @@ const formatCurrency = (value) => {
} }
<\/script> <\/script>
`,
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>`,
data: ` data: `
{ {
id: '1000', id: '1000',
@ -260,3 +272,10 @@ const formatCurrency = (value) => {
} }
}; };
</script> </script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>

35
doc/datatable/edit/FilterSortEditDoc.vue
View File

@ -3,7 +3,7 @@
<p>Cell Editing with Sorting and Filter</p> <p>Cell Editing with Sorting and Filter</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem"> <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" /> <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@ -14,7 +14,7 @@
</Column> </Column>
</DataTable> </DataTable>
</div> </div>
<DocSectionCode :code="code" :service="['ProductService']" /> <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template> </template>
<script> <script>
@ -34,7 +34,7 @@ export default {
}, },
code: { code: {
basic: ` basic: `
<DataTable v-model:filters="filters" :value="products" editMode="cell" <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table"
@cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem"> @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
@ -48,7 +48,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable v-model:filters="filters" :value="products" editMode="cell" <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table"
@cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem"> @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
@ -113,11 +113,18 @@ export default {
} }
} }
}; };
<\/script>`, <\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>`,
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable v-model:filters="filters" :value="products" editMode="cell" <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table"
@cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem"> @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter> <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
@ -175,7 +182,14 @@ const onCellEditComplete = (event) => {
} }
}; };
<\/script>` <\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>`
} }
}; };
}, },
@ -210,3 +224,10 @@ const onCellEditComplete = (event) => {
} }
}; };
</script> </script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
</style>

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

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <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%"> <Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<InputText v-model="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> <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
<DocSectionCode :code="code" :service="['ProductService']" /> <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template> </template>
<script> <script>
@ -59,7 +59,7 @@ export default {
code: { code: {
basic: ` basic: `
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" <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%"> <Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<InputText v-model="data[field]" /> <InputText v-model="data[field]" />
@ -96,7 +96,7 @@ export default {
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" <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%"> <Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<InputText v-model="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: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" <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%"> <Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<InputText v-model="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); 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> </script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>