DataTable Edit demos style updates

doc/datatable/edit/CellEditDoc.vue

@@ -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>
     </DocSectionText>
     <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%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -19,7 +19,7 @@
             </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>
@@ -37,7 +37,7 @@ export default {
             ],
             code: {
                 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%">
         <template #body="{ data, field }">
             {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -55,7 +55,7 @@ export default {
                 options: `
 <template>
     <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%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -128,11 +128,17 @@ export default {
     }
 };
 <\/script>
-`,
+
+<style lang="scss" scoped>
+::v-deep(.editable-cells-table td.p-cell-editing) {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+</style>`,
                 composition: `
 <template>
     <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%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -201,7 +207,13 @@ const formatCurrency = (value) => {
 }
 
 <\/script>
-`,
+
+<style lang="scss" scoped>
+::v-deep(.editable-cells-table td.p-cell-editing) {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+</style>`,
                 data: `
 {
     id: '1000',
@@ -260,3 +272,10 @@ const formatCurrency = (value) => {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+::v-deep(.editable-cells-table td.p-cell-editing) {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+</style>

doc/datatable/edit/FilterSortEditDoc.vue

@@ -3,7 +3,7 @@
         <p>Cell Editing with Sorting and Filter</p>
     </DocSectionText>
     <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>
                 <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" />
@@ -14,7 +14,7 @@
             </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>
@@ -34,7 +34,7 @@ export default {
             },
             code: {
                 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">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
@@ -48,7 +48,7 @@ export default {
                 options: `
 <template>
     <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">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <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: `
 <template>
     <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">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <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>
+
+<style lang="scss" scoped>
+::v-deep(.editable-cells-table td.p-cell-editing) {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+</style>

doc/datatable/edit/RowEditDoc.vue

@@ -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>