Update readme

muhimasri · Jan 3, 2022 · 817ca04 · 817ca04
1 parent 02bf7de
commit 817ca04
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,14 @@ Please refer to [BoostrapVue Docs](https://bootstrap-vue.org/docs) for more deta
 [Run example on CodeSandbox](https://codesandbox.io/s/bootstrap-vue-editable-table-wx012?file=/src/App.vue)
 ```html
 <template>
-    <b-editable-table v-model="items" :fields="fields"></b-editable-table>
+<div>
+    <b-editable-table bordered class="editable-table" v-model="items" :fields="fields" @input-change="handleInput">
+      <template #cell(isActive)="data">
+        <span v-if="data.value">Yes</span>
+        <span v-else>No</span>
+      </template>
+    </b-editable-table>
+</div>
 </template>
 
 <script>
@@ -73,32 +80,75 @@ export default {
   data() {
     return {
       fields: [
-        { key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name..."},
-        { key: "department", label: "Department", type: "select", options: [
+        { key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name...", class: "name-col"},
+        { key: "department", label: "Department", type: "select", editable: true, class: "department-col" , options: [
           { value: 1, text: 'HR' },
           { value: 2, text: 'Engineer' },
           { value: 3, text: 'VP' },
           { value: 4, text: 'CEO'}
-        ], editable: true },
-        { key: "age", label: "Age", type:"range", min:"0", max:"100", editable: true, placeholder: "Enter Age..." },
-        { key: "dateOfBirth", label: "Date Of Birth", type: "date", editable: true, locale: "en",
+        ]},
+        { key: "age", label: "Age", type:"range", min:"0", max:"100", editable: true, placeholder: "Enter Age...", class: "age-col" },
+        { key: "dateOfBirth", label: "Date Of Birth", type: "date", editable: true, class: "date-col", locale: "en",
           "date-format-options": {
             year: "numeric",
             month: "numeric",
             day: "numeric",
           }, },
-        { key: "isActive", label: "Is Active", type: "checkbox", editable: true },
+        { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
       ],
        items: [
           { age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
           { age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
           { age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
-          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true }
+          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
         ]
     };
   },
+  methods: {
+      handleInput(value, data) {}
+  }
 };
 </script>
+
+<style>
+table.editable-table {
+  margin: auto;
+}
+
+table.editable-table td {
+  vertical-align: middle;
+}
+
+.editable-table .data-cell {
+  padding: 8px;
+  vertical-align: middle;
+}
+
+.editable-table .custom-checkbox {
+  width: 50px;
+}
+
+.name-col {
+  width: 120px;
+}
+
+.department-col {
+  width: 150px;
+}
+
+.age-col {
+  width: 100px;
+}
+
+.date-col {
+  width: 200px;
+}
+
+.is-active-col {
+  width: 100px
+}
+</style>
+
 ```
 
 `items` and `fields` are the same properties used in BootstrapVue Table except we are introducing a new `type` and `editable` property in the `fields` object to indicate what element is required in every column and whether or not it should be editable. Also, `v-model` is supported for two-way binding but you can still use `:items` instead for one-way binding. More on that in the [Data Binding](#data-binding) section
@@ -129,14 +179,11 @@ Otherwise, using `:items` prop to pass data will require updating the data manua
 <template>
 <div>
     <b-editable-table :items="items" :fields="fields" @input-change="handleInput">
-      <template #cell-isActive="data">
+      <template #cell(isActive)="data">
         <span v-if="data.value">Yes</span>
         <span v-else>No</span>
       </template>
     </b-editable-table>
-    <pre>
-      {{items}}
-    </pre>
 </div>
 </template>
 
@@ -246,14 +293,11 @@ Here is an example of how to style and customize a table:
 <template>
 <div>
     <b-editable-table bordered class="editable-table" v-model="items" :fields="fields" @input-change="handleInput">
-      <template #cell-isActive="data">
+      <template #cell(isActive)="data">
         <span v-if="data.value">Yes</span>
         <span v-else>No</span>
       </template>
     </b-editable-table>
-    <pre>
-      {{items}}
-    </pre>
 </div>
 </template>
 
@@ -280,13 +324,13 @@ export default {
             month: "numeric",
             day: "numeric",
           }, },
-        { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" },
+        { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
       ],
        items: [
           { age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
           { age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
           { age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
-          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true }
+          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
         ]
     };
   },
@@ -300,6 +344,11 @@ export default {
 table.editable-table {
   margin: auto;
 }
+
+table.editable-table td {
+  vertical-align: middle;
+}
+
 .editable-table .data-cell {
   padding: 8px;
   vertical-align: middle;
@@ -329,7 +378,6 @@ table.editable-table {
   width: 100px
 }
 </style>
-
 ```
 `.data-cell` is an internal class used for the `div` element within every non-editable cell. You can customize it however you like. 
 
@@ -368,9 +416,6 @@ For more details about custom slots, please read [BootstrapVue Table documentati
           <BIconX class="remove-icon" @click="handleDelete(data)"></BIconX>
       </template>
     </b-editable-table>
-    <pre>
-      {{items}}
-    </pre>
 </div>
 </template>
 
@@ -477,7 +522,7 @@ table.editable-table td {
 <template>
 <div>
     <b-editable-table :busy="loading" bordered class="editable-table" v-model="users" :fields="fields">
-      <template #cell-isActive="data">
+      <template #cell(isActive)="data">
         <span v-if="data.value">Yes</span>
         <span v-else>No</span>
       </template>
@@ -488,9 +533,6 @@ table.editable-table td {
         </div>
       </template>
     </b-editable-table>
-    <pre>
-      {{users}}
-    </pre>
 </div>
 </template>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-editable-table",
-  "version": "0.1.1-beta.9",
+  "version": "0.1.1-beta.10",
   "description": "A Bootstrap Vue editable table for editing cells using built-in Bootstrap form elements",
   "repository": {
     "type": "git",