Merge pull request #20 from ks-labs/feature/add-new-treegrid-functions

Feature/add new treegrid functions

Author: victorLessa

README.md

@@ -57,10 +57,10 @@ Vue.use(TreeGrid);
       :rows="rows"
       :columns="columns"
       :rowStyle="rowStyle"
+      :formatNoMatches="formatNoMatches"
       @onPostBody="onPostBody"
       @onClickRow="onClickRow"
       @headerStyle="headerStyle"
-      @formatNoMatches="formatNoMatches"
     >
     </treegrid>
   </div>
@@ -165,24 +165,29 @@ Below are some configurations supported by the component, if you need a new conf
 
 ## Props
 
-| Name          | Type     | Default | Description                                                        |
-| ------------- | -------- | ------- | ------------------------------------------------------------------ |
-| Rows          | Array    |         | All table body data                                                |
-| Columns       | Array    |         | All data on column headings                                        |
-| idField       | String   | id      | Overwrite the default idField to 'id'                              |
-| parentIdField | String   | pid     | Set the parent id field.                                           |
-| treeShowField | String   |         | Set the treeShowField will auto enable the tree grid.              |
-| rootParentId  | String   | null    | Set the root parent id.                                            |
-| treeEnable    | Boolean  | false   | Set true to enable the tree grid.                                  |
-| stickyHeader  | Boolean  | false   | Set true to use sticky header.                                     |
-| clickColor    | String   |         | Color displayed in the background when clicking on a line          |
-| rowStyle      | Function | {}      | The row style formatter function, takes two parameters: row, index |
+| Name            | Type     | Default | Description                                                        |
+| --------------- | -------- | ------- | ------------------------------------------------------------------ |
+| Rows            | Array    |         | All table body data                                                |
+| Columns         | Array    |         | All data on column headings                                        |
+| idField         | String   | id      | Overwrite the default idField to 'id'                              |
+| parentIdField   | String   | pid     | Set the parent id field.                                           |
+| treeShowField   | String   |         | Set the treeShowField will auto enable the tree grid.              |
+| rootParentId    | String   | null    | Set the root parent id.                                            |
+| treeEnable      | Boolean  | false   | Set true to enable the tree grid.                                  |
+| stickyHeader    | Boolean  | false   | Set true to use sticky header.                                     |
+| clickColor      | String   |         | Color displayed in the background when clicking on a line          |
+| rowStyle        | Function | {}      | The row style formatter function, takes two parameters: row, index |
+| formatNoMatches | Function | ''      | Set message when the rows array is empty                           |
 
 ## Events
 
-| Name            | Description                                                                                  | params                         |
-| --------------- | -------------------------------------------------------------------------------------------- | ------------------------------ |
-| onPostBody      | It fires after the table body are rendered and available in the DOM. The parameters contain: | element treegrid               |
-| onClickRow      | It fires when the user clicks a row                                                          | Object: {row, $element, field} |
-| headerStyle     | The header style formatter function                                                          | column                         |
-| formatNoMatches | --                                                                                           |                                |
+| Name           | Description                                                                                  | params                                |
+| -------------- | -------------------------------------------------------------------------------------------- | ------------------------------------- |
+| onPostBody     | It fires after the table body are rendered and available in the DOM. The parameters contain: | element treegrid                      |
+| onClickRow     | It fires when the user clicks a row                                                          | Object: {row, $element, field}        |
+| onClickCell    | It fires when the user clicks a cell                                                         | Object: {field, value, row, $element} |
+| onDblClickRow  | It fires when the user double clicks a row                                                   | Object: {row, $element, field}        |
+| onDblClickCell | It fires when the user double clicks a cell                                                  | Object: {field, value, row, $element} |
+| onExpandRow    | It fires when you click the detail icon to expand the detail view                            | Object: { index, row, $detail}        |
+| onCollapseRow  | It fires when you click the detail icon to collapse the detail view                          | Object: {index, row, detailView}      |
+| headerStyle    | The header style formatter function                                                          | column                                |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ks-labs/treegrid",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": "Victor Lessa victordsgnr@gmail.com",
   "main": "src/wrapper.js",
   "module": "dist/vue-treegrid.esm.js",

src/vue-treegrid.vue

@@ -28,6 +28,12 @@ export default {
       type: String,
       default: "table table-bordered text-nowrap",
     },
+    formatNoMatches: {
+      type: Function,
+      default: function () {
+        return "";
+      },
+    },
     stickyHeader: {
       type: Boolean,
       default: true,
@@ -76,12 +82,22 @@ export default {
         stickyHeader: this.stickyHeader,
         treeShowField: this.treeShowField,
         parentIdField: this.parentIdField,
+        rowStyle: this.rowStyle,
         onPostBody: () => this.$emit("onPostBody", treeGrid),
         onClickRow: (row, element, field) =>
           this.$emit("onClickRow", { row, element, field }),
+        onClickCell: (field, value, row, element) =>
+          this.$emit("onClickCell", { field, value, row, element }),
+        onDblClickRow: (row, element, field) =>
+          this.$emit("onDblClickRow", { row, element, field }),
+        onDblClickCell: (field, value, row, element) =>
+          this.$emit("onDblClickCell", { field, value, row, element }),
+        onExpandRow: (index, row, detail) =>
+          this.$emit("onExpandRow", { index, row, detail }),
+        onCollapseRow: (index, row, detailView) =>
+          this.$emit("onCollapseRow", { index, row, detailView }),
         headerStyle: (column) => this.$emit("headerStyle", column),
-        rowStyle: this.rowStyle,
-        formatNoMatches: () => this.$emit("formatNoMatches"),
+        formatNoMatches: () => this.formatNoMatches(),
       });
     },
   },