Fixes #3

Add ability to enable cell editing and add an example to documentation.

README.md

@@ -510,8 +510,36 @@ function(e, args) {
 ### SlickGrid Options
 > Each of the base SlickGrid Grid options are also available. *See the [SlickGrid Grid Options Wiki](https://github.com/mleibman/SlickGrid/wiki/Grid-Options) for defaults and descriptions.*
 
-## Available Events
+## Enable Editing
+> You can enable editing of cells by enabling the SlickGrid edit options and setting editors on the columns you want. *See the [SlickGrid Examples](https://github.com/mleibman/SlickGrid/wiki/Examples) for examples & cell editor info.*
+```html
+
+  <template>
+    <slim-grid :editable="true" :column-options="columnOptions"></slim-grid>
+  </template>
+
+  <script>
+    import { Editor } from 'slickgrid-es6';
+    import SlimGrid from 'vue-slimgrid';
 
+    export default {
+      components: { SlimGrid },
+      data: () => ({
+        columnOptions: {
+
+          // Add a text editor to all columns. If you want to write your own custom cell editor, see below:
+          // https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors
+          '*': {
+            editor: Editor.Text
+          }
+
+        }
+      })
+    }
+  </script>
+```
+
+## Available Events
 > All events you can listen for on the SlimGrid component use the kebab-case syntax:
 ```html
   <template>

examples/App.vue

@@ -2,14 +2,15 @@
   <div id="app">
     <slim-grid :data="data" 
                :height="500"
+               :editable="true"
                :column-options="columnOptions"
                :grouping="groupByDuration"
     ></slim-grid>
   </div>
 </template>
 
 <script>
-import { Data } from 'slickgrid-es6';
+import { Data, Editors } from 'slickgrid-es6';
 import SlimGrid from "../src/components/SlimGrid.vue";
 
 export default {
@@ -31,6 +32,7 @@ export default {
       },
       columnOptions: {
         percentComplete: {
+          editor: Editors.Text,
           groupTotalsFormatter(totals, columnDef) {
             let val = totals.avg && totals.avg[columnDef.field];
             if (val != null) {

src/assets/js/default-events.js

@@ -97,6 +97,9 @@ export default {
     onBeforeCellEditorDestroy: {
       on(e, args) {
         this.$emit("before-cell-editor-destroy", e, args);
+      },
+      after(e, args) {
+        this.dataView.refresh();
       }
     },
     onBeforeDestroy: {

src/assets/js/methods.js

@@ -447,7 +447,7 @@ export default {
     }
 
     return _.mapValues(defaults, (value, key) => {
-      return _.isFunction(value) && ["groupTotalsFormatter", "formatter", "hidden", "order"].indexOf(key) === -1 ? value(defaults) : value;
+      return _.isFunction(value) && ["groupTotalsFormatter", "formatter", "hidden", "order", "editor"].indexOf(key) === -1 ? value(defaults) : value;
     });
   },
 

src/assets/js/props.js

@@ -116,7 +116,7 @@ export default {
   },
   autoEdit: {
     type: Boolean,
-    default: true
+    default: false
   },
   autoHeight: {
     type: Boolean,