From 8556e83fbb1feaa013e01da0e02738c5ad675c9a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Mar 2021 13:08:28 +0300
Subject: [PATCH] Add widths to columns

---
 src/views/datatable/DataTableEditDemo.vue | 58 +++++++++++------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 60a36a42d..abce32078 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -14,17 +14,17 @@
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
                 <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
-                    <Column field="code" header="Code">
+                    <Column field="code" header="Code" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status">
+                    <Column field="inventoryStatus" header="Status" style="width:25%">
                         <template #editor="slotProps">
                             <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
                                 <template #option="slotProps">
@@ -36,7 +36,7 @@
                             {{getStatusLabel(slotProps.data.inventoryStatus)}}
                         </template>
                     </Column>
-                    <Column field="price" header="Price">
+                    <Column field="price" header="Price" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
@@ -48,7 +48,7 @@
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
                 <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
+                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
                         <template #editor="slotProps">
                             <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
                         </template>
@@ -60,17 +60,17 @@
                 <h5>Row Editing</h5>
                 <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
                     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll">
-                    <Column field="code" header="Code">
+                    <Column field="code" header="Code" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
                         </template>
                     </Column>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status">
+                    <Column field="inventoryStatus" header="Status" style="width:20%">
                         <template #editor="slotProps">
                             <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                                 <template #option="slotProps">
@@ -82,12 +82,12 @@
                             {{getStatusLabel(slotProps.data.inventoryStatus)}}
                         </template>
                     </Column>
-                    <Column field="price" header="Price">
+                    <Column field="price" header="Price" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
+                    <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
                 </DataTable>
             </div>
 		</div>
@@ -102,17 +102,17 @@
 &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
 &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
 &lt;DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"&gt;
-    &lt;Column field="code" header="Code"&gt;
+    &lt;Column field="code" header="Code" style="width:25%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="name" header="Name"&gt;
+    &lt;Column field="name" header="Name" style="width:25%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="inventoryStatus" header="Status"&gt;
+    &lt;Column field="inventoryStatus" header="Status" style="width:25%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt;
                 &lt;template #option="slotProps"&gt;
@@ -124,7 +124,7 @@
             {{getStatusLabel(slotProps.data.inventoryStatus)}}
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="price" header="Price"&gt;
+    &lt;Column field="price" header="Price" style="width:25%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
         &lt;/template&gt;
@@ -136,7 +136,7 @@
 &lt;h5&gt;Advanced Cell Editing&lt;/h5&gt;
 &lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
 &lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"&gt;
-    &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;
+    &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /&gt;
         &lt;/template&gt;
@@ -148,17 +148,17 @@
 &lt;h5&gt;Row Editing&lt;/h5&gt;
 &lt;DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"&gt;
-    &lt;Column field="code" header="Code"&gt;
+    &lt;Column field="code" header="Code" style="width:20%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="name" header="Name"&gt;
+    &lt;Column field="name" header="Name" style="width:20%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="inventoryStatus" header="Status"&gt;
+    &lt;Column field="inventoryStatus" header="Status" style="width:20%"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt;
                 &lt;template #option="slotProps"&gt;
@@ -175,7 +175,7 @@
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
+    &lt;Column :rowEditor="true" style="width: 10%;min-width:8rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </code></pre>
@@ -322,17 +322,17 @@ export default {
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
                 <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
-                    <Column field="code" header="Code">
+                    <Column field="code" header="Code" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status">
+                    <Column field="inventoryStatus" header="Status" style="width:25%">
                         <template #editor="slotProps">
                             <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                                 <template #option="slotProps">
@@ -344,7 +344,7 @@ export default {
                             {{getStatusLabel(slotProps.data.inventoryStatus)}}
                         </template>
                     </Column>
-                    <Column field="price" header="Price">
+                    <Column field="price" header="Price" style="width:25%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
@@ -356,7 +356,7 @@ export default {
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
                 <DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
+                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
                         <template #editor="slotProps">
                             <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
                         </template>
@@ -368,17 +368,17 @@ export default {
                 <h5>Row Editing</h5>
                 <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
                     @rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
-                    <Column field="code" header="Code">
+                    <Column field="code" header="Code" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
                         </template>
                     </Column>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status">
+                    <Column field="inventoryStatus" header="Status" style="width:20%">
                         <template #editor="slotProps">
                             <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
                                 <template #option="slotProps">
@@ -390,12 +390,12 @@ export default {
                             {{getStatusLabel(slotProps.data.inventoryStatus)}}
                         </template>
                     </Column>
-                    <Column field="price" header="Price">
+                    <Column field="price" header="Price" style="width:20%">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
                         </template>
                     </Column>
-                    <Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
+                    <Column :rowEditor="true" style="width: 10%; min-width:8rem" bodyStyle="text-align:center"></Column>
                 </DataTable>
             </div>
 		</div>