Complete vue-datasource

package.json

@@ -9,6 +9,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.15.3",
     "element-ui": "^1.1.6",
     "vue": "^2.1.10",
     "vue-datasource": "^1.0.4",

src/components/page/VueTable.vue

@@ -18,40 +18,14 @@
 </template>
 
 <script>
+    import axios from 'axios';
     import Datasource from 'vue-datasource';
     export default {
         data: function(){
             return {
                 information: {
-                    pagination: {
+                    pagination:{},
-                        total: 25, // Number of total rows (default 0)
+                    data:[]
-                        per_page: 15, // Number of rows to show (default 15)
-                        current_page: 1, // Actual page
-                        last_page: 2, // Last page
-                        from: 1, // Beginning of visible rows
-                        to: 15 // End of visible rows
-                    },
-                    data: [{
-                        "id": 1,
-                        "name": "Jaylen Schmidt",
-                        "email": "aheaney@example.org",
-                        "city": "Conroyburgh",
-                        "company": "Kunde, Gerhold and Runte"
-                        },
-                        {
-                            "id": 2,
-                            "name": "Ms. Desiree Franecki III",
-                            "email": "pweissnat@example.net",
-                            "city": "New Mathew",
-                            "company": "Davis Ltd"
-                        },
-                        {
-                            "id": 3,
-                            "name": "Clyde Corwin",
-                            "email": "rolfson.lexus@example.com",
-                            "city": "East Ron",
-                            "company": "Zieme and Sons"
-                        }]
                 },
                 columns: [
                     {
@@ -73,11 +47,10 @@
                 ],
                 actions: [
                     {
-                        text: 'Click me', // Button label
+                        text: 'Click',
-                        icon: 'glyphicon glyphicon-check', // Button icon
+                        class: 'btn-primary',
-                        class: 'btn-primary', // Button class (background color)
+                        event(e, row) {
-                        event(e, row) { // Event handler callback. Gets event instace and selected row
+                            alert('Click row: ' + row.row.id);
-                            console.log('Click row: ', row); // If no row is selected, row will be NULL
                         }
                     }
                 ],
@@ -105,6 +78,12 @@
                     }
                 })
             }
+        },
+        beforeMount(){
+            axios.get('../../../static/data.json').then( (res) => {
+                console.log(res.data)
+                this.information = res.data;
+            })
         }
     }
 </script>

static/css/datasource.css

@@ -100,6 +100,9 @@
 .vue-datasource .table-striped > tbody > tr:nth-of-type(odd) {
     background-color: #f9f9f9;
 }
+.vue-datasource .success th ,.vue-datasource .success td{
+    background-color: #dff0d8;
+}
 .vue-datasource .pagination {
     display: inline-block;
     padding-left: 0;

static/data.json

@@ -0,0 +1,162 @@
+{
+    "pagination": {
+        "total": 15,
+        "per_page": 15,
+        "current_page": 1,
+        "last_page": 1,
+        "from": 1,
+        "to": 15
+    },
+    "data": [
+        {
+            "id": 1,
+            "name": "Jaylen Schmidt",
+            "email": "aheaney@example.org",
+            "city": "Conroyburgh",
+            "company": "Kunde, Gerhold and Runte",
+            "job": "Soil Scientist",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 2,
+            "name": "Ms. Desiree Franecki III",
+            "email": "pweissnat@example.net",
+            "city": "New Mathew",
+            "company": "Davis Ltd",
+            "job": "Customer Service Representative",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 3,
+            "name": "Clyde Corwin",
+            "email": "rolfson.lexus@example.com",
+            "city": "East Ron",
+            "company": "Zieme and Sons",
+            "job": "Claims Taker",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 4,
+            "name": "Mr. Tyrese Kuphal",
+            "email": "libby.heaney@example.com",
+            "city": "Cristianland",
+            "company": "Abernathy LLC",
+            "job": "Occupational Health Safety Technician",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 5,
+            "name": "Ms. Amya West PhD",
+            "email": "uheller@example.org",
+            "city": "Treutelmouth",
+            "company": "Mraz-Effertz",
+            "job": "Hazardous Materials Removal Worker",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 6,
+            "name": "Murphy Stamm IV",
+            "email": "ckautzer@example.com",
+            "city": "Myleneshire",
+            "company": "Sporer-Wolf",
+            "job": "Pipelaying Fitter",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 7,
+            "name": "Elsa Jast",
+            "email": "kaitlyn.lang@example.net",
+            "city": "Mariahstad",
+            "company": "Hackett LLC",
+            "job": "Record Clerk",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 8,
+            "name": "Hardy Mosciski DVM",
+            "email": "soledad44@example.net",
+            "city": "Jasminborough",
+            "company": "Haley Ltd",
+            "job": "Kindergarten Teacher",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 9,
+            "name": "Demarcus Littel",
+            "email": "americo84@example.com",
+            "city": "New Lilaton",
+            "company": "Satterfield Group",
+            "job": "Plant Scientist",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 10,
+            "name": "Dr. Shad Gleichner",
+            "email": "eleanora23@example.com",
+            "city": "Lake Whitneyberg",
+            "company": "Fay Group",
+            "job": "Rotary Drill Operator",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 11,
+            "name": "Milford Mann",
+            "email": "shartmann@example.net",
+            "city": "Lake Austinport",
+            "company": "Sporer-Langosh",
+            "job": "Social and Human Service Assistant",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 12,
+            "name": "Prof. Mustafa Lindgren Sr.",
+            "email": "lizeth.morissette@example.net",
+            "city": "Roweborough",
+            "company": "Mitchell-Ratke",
+            "job": "Shoe Machine Operators",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 13,
+            "name": "Mrs. Brittany Bode Sr.",
+            "email": "wiegand.mozelle@example.org",
+            "city": "South Maxwellville",
+            "company": "Reilly Inc",
+            "job": "Bridge Tender OR Lock Tender",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 14,
+            "name": "Dariana Bauch",
+            "email": "dessie.schamberger@example.net",
+            "city": "East Linnie",
+            "company": "Wuckert PLC",
+            "job": "Elementary and Secondary School Administrators",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        },
+        {
+            "id": 15,
+            "name": "Jalon Renner",
+            "email": "lulu45@example.net",
+            "city": "New Rashad",
+            "company": "Muller-Kuhn",
+            "job": "Manufactured Building Installer",
+            "created_at": "2017-01-13 19:17:16",
+            "updated_at": "2017-01-13 19:17:16"
+        }
+    ]
+}