support more props

Author: njleonzhang

README.md

@@ -99,6 +99,16 @@
     <td>Boolean</td>
     <td>true</td>
   </tr>
+  <tr>
+    <td>tableProps</td>
+    <td></td>
+    <td></td>
+    <td>
+      an object to pass any proptery to el-table. refer to <a href="http://element.eleme.io/#/en-US/component/table#table-attributes">el-table proptery</a>
+    </td>
+    <td>Object</td>
+    <td>undefined</td>
+  </tr>
   <tr>
     <td>actions-def</td>
     <td></td>
@@ -265,13 +275,29 @@
     <td>[]</td>
   </tr>
   <tr>
-    <td rowspan="2"></td>
+    <td rowspan="4"></td>
     <td>name</td>
     <td></td>
     <td>the row action button text</td>
     <td>String</td>
     <td>-</td>
   </tr>
+  <tr>
+    <td>type</td>
+    <td></td>
+    <td>type of the button</td>
+    <td>String</td>
+    <td>text</td>
+  </tr>
+  <tr>
+    <td>buttonProps</td>
+    <td></td>
+    <td>
+      an object to pass any proptery to el-button. refer to <a href="http://element.eleme.io/#/en-US/component/button#attributes">el-button proptery</a>
+    </td>
+    <td>Object</td>
+    <td>undefined</td>
+  </tr>
   <tr>
     <td>handler</td>
     <td></td>
@@ -323,28 +349,28 @@
     <td rowspan="4"></td>
     <td>layout</td>
     <td></td>
-    <td>refer to <a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
+    <td>refer to <a href="http://element.eleme.io/#/en-US/component/pagination">Elmeme Doc</a></td>
     <td>String</td>
     <td>[prev, pager, next, jumper, sizes, total]</td>
   </tr>
   <tr>
     <td>pageSize</td>
     <td></td>
-    <td>refer to <a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
+    <td>refer to <a href="http://element.eleme.io/#/en-US/component/pagination">Elmeme Doc</a></td>
     <td>Number</td>
     <td>20</td>
   </tr>
   <tr>
     <td>pageSizes</td>
     <td></td>
-    <td>refer to <a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
+    <td>refer to <a href="http://element.eleme.io/#/en-US/component/pagination">Elmeme Doc</a></td>
     <td>Array</td>
     <td>[20, 50, 100]</td>
   </tr>
   <tr>
     <td>currentPage</td>
     <td></td>
-    <td>refer to <a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
+    <td>refer to <a href="http://element.eleme.io/#/en-US/component/pagination">Elmeme Doc</a></td>
     <td>Number</td>
     <td>1</td>
   </tr>
@@ -369,6 +395,9 @@ For details, check the [Demo](https://njleonzhang.github.io/vue-data-tables/) an
 # install dependencies
 npm install
 
-# serve demo with hot reload at localhost:8080
+# serve test/play with hot reload at localhost:8080
+npm run play
+
+# serve docs with hot reload at localhost:8080
 npm run dev
 ```

play/App.vue

@@ -15,7 +15,13 @@
 
 <template lang="pug">
   .app-wrapper
-    data-tables(:data='tableData', :actions-def='getActionsDef()', :checkbox-filter-def='getCheckFilterDef()', :row-action-def='getRowActionsDef()')
+    data-tables(
+      :data='tableData',
+      :actions-def='getActionsDef()',
+      :actionColFixed='false',
+      :checkbox-filter-def='getCheckFilterDef()',
+      :row-action-def='getRowActionsDef()',
+      :tableProps="{border: false, 'row-class-name':'test-class'}")
       el-table-column(prop='flow_no', label='No.', sortable='custom')
       el-table-column(prop='content', label='Content', sortable='custom')
       el-table-column(prop='create_time', label='Time', sortable='custom')
@@ -134,7 +140,7 @@
           },
           name: 'Edit'
         }, {
-          type: 'primary',
+          buttonProps: {icon: 'message'},
           handler(row) {
             self.$message('RUA in row clicked')
             console.log('RUA in row clicked', row)

readme_table_backup.pug

@@ -13,6 +13,29 @@ table
     td The data array which will be render in the table.
     td Array
     td -
+  tr
+    td border
+    td
+    td
+    td whether table has vertical border.
+    td Boolean
+    td true
+  tr
+    td stripe
+    td
+    td
+    td whether table is striped.
+    td Boolean
+    td true
+  tr
+    td tableProps
+    td
+    td
+    td 
+      | an object to pass any proptery to el-table. refer to 
+      a(href='http://element.eleme.io/#/en-US/component/table#table-attributes') el-table proptery
+    td Object
+    td undefined
   tr
     td actions-def
     td
@@ -163,12 +186,26 @@ table
     td Array
     td []
   tr
-    td(rowspan='2')
+    td(rowspan='4')
     td name
     td
     td the row action button text
     td String
     td -
+  tr
+    td type
+    td
+    td type of the button
+    td String
+    td text
+  tr
+    td buttonProps
+    td
+    td 
+      | an object to pass any proptery to el-button. refer to 
+      a(href='http://element.eleme.io/#/en-US/component/button#attributes') el-button proptery
+    td Function
+    td -
   tr
     td handler
     td
@@ -216,30 +253,30 @@ table
     td
     td
       | refer to 
-      a(href='http://element.eleme.io/#/zh-CN/component/pagination') Elmeme Doc
+      a(href='http://element.eleme.io/#/en-US/component/pagination') Elmeme Doc
     td String
     td [prev, pager, next, jumper, sizes, total]
   tr
     td pageSize
     td
     td
       | refer to 
-      a(href='http://element.eleme.io/#/zh-CN/component/pagination') Elmeme Doc
+      a(href='http://element.eleme.io/#/en-US/component/pagination') Elmeme Doc
     td Number
     td 20
   tr
     td pageSizes
     td
     td
       | refer to 
-      a(href='http://element.eleme.io/#/zh-CN/component/pagination') Elmeme Doc
+      a(href='http://element.eleme.io/#/en-US/component/pagination') Elmeme Doc
     td Array
     td [20, 50, 100]
   tr
     td currentPage
     td
     td
       | refer to 
-      a(href='http://element.eleme.io/#/zh-CN/component/pagination') Elmeme Doc
+      a(href='http://element.eleme.io/#/en-US/component/pagination') Elmeme Doc
     td Number
     td 1

src/components/DataTables.vue

@@ -54,6 +54,7 @@
       :border="border",
       fit,
       :stripe="stripe",
+      v-bind='tableProps',
       @row-click='handleRowClick',
       @selection-change='handleSelectChange',
       @select='handleSelect',
@@ -65,12 +66,14 @@
         prop='innerRowActions',
         inline-template,
         v-if='hasActionCol',
-        :min-width='actionColWidth')
+        :min-width='actionColWidth',
+        :fixed='actionColFixed')
         div.action-list
-          span(v-for='action in rowActionDef')
+          span(v-for='action in innerRowActionDef')
             el-button(
-              type='text',
-              @click='action.handler(row)') {{action.name}}
+              :type='action.type',
+              @click='action.handler(row)'
+              v-bind='action.buttonProps') {{action.name}}
 
     .pagination-wrap
       el-pagination(
@@ -100,6 +103,15 @@ export default {
       offset: 0
     }, this.actionsDef)
 
+    this.innerRowActionDef = this.rowActionDef.map(el => {
+      if (!el.type) {
+        el.type = 'text'
+      }
+      return el
+    })
+
+    console.log(this.innerRowActionDef)
+
     this.innerCheckboxFilterDef = Object.assign({}, {
       props: undefined,
       def: [],
@@ -143,6 +155,9 @@ export default {
         return true
       }
     },
+    tableProps: {
+      type: Object
+    },
     actionsDef: {
       type: Object,
       default() {
@@ -176,6 +191,7 @@ export default {
       default: true
     },
     actionColWidth: String,
+    actionColFixed: [String, Boolean],
     colNotRowClick: {
       type: Array,
       default() {