Vue-tables-2 child row example with Demo

by

Today, We want to share with you Vue-tables-2 child row example.In this post we will show you Best 10+ Vue.js Tables and Data Grid Examples, hear for Vue tables 2 – Grid components for vue.js we will give you demo and example for implement.In this post, we will learn about A Vue.js 2 grid Tables components with an example.

Vue-tables-2 child row example

There are the Following The simple About Multiple child rows displayed Full Information With Example and source code.

As I will cover this Post with live Working example to develop Vue Datatable Component Example, so the some major files and Directory structures for this example is following below Vue-tables-2 child row example.

Vue.js – The simple Easy to Use Progressive JavaScript Framework.Vue.js is an free Based to open-source js Model–view–controller JavaScript framework for building user friendly interfaces and single-page super web applications. as well as you step by step simple vuejs based insert update delete or select On vue.It can be used to create applications such as CRMs and CMSs based on CRUD (create, read update, as well as delete). The Vue js CRUD.

Vue Tables 2 Demo(Vue-tables-2 child row example)

index.html

Vue Tables 2 Demo - Client Component




  
    

    

      The link to {{props.row.name}} is {{props.row.uri}}
    


    

      
        {{row.name}}

vuejs code

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'uri'],
    data: getData(),
    options: {
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        uri: 'View Record'
      },
      editableColumns:['name'],
      sortable: ['name', 'code'],
      filterable: ['name', 'code']
    }
  }
});

function getData() {
  return [{
    code: "ZW",
    name: "Zimbabwe",
    created_at: "2020-05-24T01:28:32.459583",
    updated_at: "2020-05-24T01:28:32.459593",
    uri: "https://www.pakainfo.com/tools/cname/245",
    id: 245
  }, {
    code: "ZM",
    name: "Zambia",
    created_at: "2020-05-24T01:28:32.457459",
    updated_at: "2020-05-24T01:28:32.457468",
    uri: "https://www.pakainfo.com/tools/cname/244",
    id: 244
  }, {
    code: "YE",
    name: "Yemen",
    created_at: "2020-05-24T01:28:32.454731",
    updated_at: "2020-05-24T01:28:32.454741",
    uri: "https://www.pakainfo.com/tools/cname/243",
    id: 243
  }, {
    code: "EH",
    name: "Western Sahara",
    created_at: "2020-05-24T01:28:32.452002",
    updated_at: "2020-05-24T01:28:32.452011",
    uri: "https://www.pakainfo.com/tools/cname/242",
    id: 242
  }, {
    code: "WF",
    name: "Wallis & Futuna",
    created_at: "2020-05-24T01:28:32.449346",
    updated_at: "2020-05-24T01:28:32.449355",
    uri: "https://www.pakainfo.com/tools/cname/241",
    id: 241
  }, {
    code: "VN",
    name: "Vietnam",
    created_at: "2020-05-24T01:28:32.446644",
    updated_at: "2020-05-24T01:28:32.446652",
    uri: "https://www.pakainfo.com/tools/cname/240",
    id: 240
  }, {
    code: "VE",
    name: "Venezuela",
    created_at: "2020-05-24T01:28:32.444031",
    updated_at: "2020-05-24T01:28:32.444040",
    uri: "https://www.pakainfo.com/tools/cname/239",
    id: 239
  }, {
    code: "VU",
    name: "Vanuatu",
    created_at: "2020-05-24T01:28:32.441423",
    updated_at: "2020-05-24T01:28:32.441433",
    uri: "https://www.pakainfo.com/tools/cname/238",
    id: 238
  }, {
    code: "UZ",
    name: "Uzbekistan",
    created_at: "2020-05-24T01:28:32.438748",
    updated_at: "2020-05-24T01:28:32.438757",
    uri: "https://www.pakainfo.com/tools/cname/237",
    id: 237
  }, {
    code: "UY",
    name: "Uruguay",
    created_at: "2020-05-24T01:28:32.435761",
    updated_at: "2020-05-24T01:28:32.435770",
    uri: "https://www.pakainfo.com/tools/cname/236",
    id: 236
  }, {
    code: "VI",
    name: "United States Virgin Islands",
    created_at: "2020-05-24T01:28:32.433229",
    updated_at: "2020-05-24T01:28:32.433238",
    uri: "https://www.pakainfo.com/tools/cname/235",
    id: 235
  }, {
    code: "US",
    name: "United States",
    created_at: "2020-05-24T01:28:32.430335",
    updated_at: "2020-05-24T01:28:32.430340",
    uri: "https://www.pakainfo.com/tools/cname/234",
    id: 234
  }, {
    code: "GB",
    name: "United Kingdom",
    created_at: "2020-05-24T01:28:32.427956",
    updated_at: "2020-05-24T01:28:32.427961",
    uri: "https://www.pakainfo.com/tools/cname/233",
    id: 233
  }, {
    code: "AE",
    name: "United Arab Emirates",
    created_at: "2020-05-24T01:28:32.425383",
    updated_at: "2020-05-24T01:28:32.425392",
    uri: "https://www.pakainfo.com/tools/cname/232",
    id: 232
  }, {
    code: "UA",
    name: "Ukraine",
    created_at: "2020-05-24T01:28:32.422970",
    updated_at: "2020-05-24T01:28:32.422980",
    uri: "https://www.pakainfo.com/tools/cname/231",
    id: 231
  }, {
    code: "UG",
    name: "Uganda",
    created_at: "2020-05-24T01:28:32.419963",
    updated_at: "2020-05-24T01:28:32.419968",
    uri: "https://www.pakainfo.com/tools/cname/230",
    id: 230
  }, {
    code: "TV",
    name: "Tuvalu",
    created_at: "2020-05-24T01:28:32.417896",
    updated_at: "2020-05-24T01:28:32.417906",
    uri: "https://www.pakainfo.com/tools/cname/229",
    id: 229
  }, {
    code: "TC",
    name: "Turks & Caicos Islands",
    created_at: "2020-05-24T01:28:32.414854",
    updated_at: "2020-05-24T01:28:32.414868",
    uri: "https://www.pakainfo.com/tools/cname/228",
    id: 228
  }, {
    code: "TM",
    name: "Turkmenistan",
    created_at: "2020-05-24T01:28:32.412601",
    updated_at: "2020-05-24T01:28:32.412605",
    uri: "https://www.pakainfo.com/tools/cname/227",
    id: 227
  }, {
    code: "TR",
    name: "Turkey",
    created_at: "2020-05-24T01:28:32.411105",
    updated_at: "2020-05-24T01:28:32.411110",
    uri: "https://www.pakainfo.com/tools/cname/226",
    id: 226
  }, {
    code: "TN",
    name: "Tunisia",
    created_at: "2020-05-24T01:28:32.409535",
    updated_at: "2020-05-24T01:28:32.409539",
    uri: "https://www.pakainfo.com/tools/cname/225",
    id: 225
  }, {
    code: "TT",
    name: "Trinidad & Tobago",
    created_at: "2020-05-24T01:28:32.408030",
    updated_at: "2020-05-24T01:28:32.408034",
    uri: "https://www.pakainfo.com/tools/cname/224",
    id: 224
  }, {
    code: "TO",
    name: "Tonga",
    created_at: "2020-05-24T01:28:32.406306",
    updated_at: "2020-05-24T01:28:32.406311",
    uri: "https://www.pakainfo.com/tools/cname/223",
    id: 223
  }, {
    code: "TK",
    name: "Tokelau",
    created_at: "2020-05-24T01:28:32.404794",
    updated_at: "2020-05-24T01:28:32.404799",
    uri: "https://www.pakainfo.com/tools/cname/222",
    id: 222
  }, {
    code: "TG",
    name: "Togo",
    created_at: "2020-05-24T01:28:32.403306",
    updated_at: "2020-05-24T01:28:32.403310",
    uri: "https://www.pakainfo.com/tools/cname/221",
    id: 221
  }, {
    code: "TH",
    name: "Thailand",
    created_at: "2020-05-24T01:28:32.400840",
    updated_at: "2020-05-24T01:28:32.400849",
    uri: "https://www.pakainfo.com/tools/cname/220",
    id: 220
  }, {
    code: "TZ",
    name: "Tanzania",
    created_at: "2020-05-24T01:28:32.397846",
    updated_at: "2020-05-24T01:28:32.397855",
    uri: "https://www.pakainfo.com/tools/cname/219",
    id: 219
  }, {
    code: "TJ",
    name: "Tajikistan",
    created_at: "2020-05-24T01:28:32.394924",
    updated_at: "2020-05-24T01:28:32.394933",
    uri: "https://www.pakainfo.com/tools/cname/218",
    id: 218
  }, {
    code: "TW",
    name: "Taiwan",
    created_at: "2020-05-24T01:28:32.391969",
    updated_at: "2020-05-24T01:28:32.391978",
    uri: "https://www.pakainfo.com/tools/cname/217",
    id: 217
  }, {
    code: "SY",
    name: "Syria",
    created_at: "2020-05-24T01:28:32.389120",
    updated_at: "2020-05-24T01:28:32.389124",
    uri: "https://www.pakainfo.com/tools/cname/216",
    id: 216
  }, {
    code: "CH",
    name: "Switzerland",
    created_at: "2020-05-24T01:28:32.386939",
    updated_at: "2020-05-24T01:28:32.386943",
    uri: "https://www.pakainfo.com/tools/cname/215",
    id: 215
  }, {
    code: "SE",
    name: "Sweden",
    created_at: "2020-05-24T01:28:32.385345",
    updated_at: "2020-05-24T01:28:32.385349",
    uri: "https://www.pakainfo.com/tools/cname/214",
    id: 214
  }, {
    code: "SZ",
    name: "Swaziland",
    created_at: "2020-05-24T01:28:32.383834",
    updated_at: "2020-05-24T01:28:32.383838",
    uri: "https://www.pakainfo.com/tools/cname/213",
    id: 213
  }, {
    code: "SR",
    name: "Suriname",
    created_at: "2020-05-24T01:28:32.382073",
    updated_at: "2020-05-24T01:28:32.382078",
    uri: "https://www.pakainfo.com/tools/cname/212",
    id: 212
  }, {
    code: "SD",
    name: "Sudan",
    created_at: "2020-05-24T01:28:32.380114",
    updated_at: "2020-05-24T01:28:32.380119",
    uri: "https://www.pakainfo.com/tools/cname/211",
    id: 211
  }, {
    code: "LK",
    name: "Sri Lanka",
    created_at: "2020-05-24T01:28:32.378189",
    updated_at: "2020-05-24T01:28:32.378195",
    uri: "https://www.pakainfo.com/tools/cname/210",
    id: 210
  }, {
    code: "ES",
    name: "Spain",
    created_at: "2020-05-24T01:28:32.376105",
    updated_at: "2020-05-24T01:28:32.376109",
    uri: "https://www.pakainfo.com/tools/cname/209",
    id: 209
  }, {
    code: "SS",
    name: "South Sudan",
    created_at: "2020-05-24T01:28:32.373942",
    updated_at: "2020-05-24T01:28:32.373946",
    uri: "https://www.pakainfo.com/tools/cname/208",
    id: 208
  }, {
    code: "KR",
    name: "South Korea",
    created_at: "2020-05-24T01:28:32.371790",
    updated_at: "2020-05-24T01:28:32.371794",
    uri: "https://www.pakainfo.com/tools/cname/207",
    id: 207
  }, {
    code: "GS",
    name: "South Georgia & The South Sandwish Islands",
    created_at: "2020-05-24T01:28:32.369460",
    updated_at: "2020-05-24T01:28:32.369465",
    uri: "https://www.pakainfo.com/tools/cname/206",
    id: 206
  }, {
    code: "ZA",
    name: "South Africa",
    created_at: "2020-05-24T01:28:32.367247",
    updated_at: "2020-05-24T01:28:32.367252",
    uri: "https://www.pakainfo.com/tools/cname/205",
    id: 205
  }, {
    code: "SO",
    name: "Somaliland",
    created_at: "2020-05-24T01:28:32.362905",
    updated_at: "2016-09-18T18:34:35.724427",
    uri: "https://www.pakainfo.com/tools/cname/204",
    id: 204
  }, {
    code: "SB",
    name: "Solomon Islands",
    created_at: "2020-05-24T01:28:32.360631",
    updated_at: "2020-05-24T01:28:32.360635",
    uri: "https://www.pakainfo.com/tools/cname/203",
    id: 203
  }, {
    code: "SI",
    name: "Slovenia",
    created_at: "2020-05-24T01:28:32.358394",
    updated_at: "2020-05-24T01:28:32.358399",
    uri: "https://www.pakainfo.com/tools/cname/202",
    id: 202
  }, {
    code: "SK",
    name: "Slovakia",
    created_at: "2020-05-24T01:28:32.356154",
    updated_at: "2020-05-24T01:28:32.356158",
    uri: "https://www.pakainfo.com/tools/cname/201",
    id: 201
  }, {
    code: "SX",
    name: "Sint Maarten",
    created_at: "2020-05-24T01:28:32.353807",
    updated_at: "2020-05-24T01:28:32.353811",
    uri: "https://www.pakainfo.com/tools/cname/200",
    id: 200
  }, {
    code: "SG",
    name: "Singapore",
    created_at: "2020-05-24T01:28:32.349354",
    updated_at: "2020-05-24T01:28:32.349358",
    uri: "https://www.pakainfo.com/tools/cname/199",
    id: 199
  }, {
    code: "SL",
    name: "Sierra Leone",
    created_at: "2020-05-24T01:28:32.347186",
    updated_at: "2020-05-24T01:28:32.347190",
    uri: "https://www.pakainfo.com/tools/cname/198",
    id: 198
  }, {
    code: "SC",
    name: "Seychelles",
    created_at: "2020-05-24T01:28:32.344980",
    updated_at: "2020-05-24T01:28:32.344984",
    uri: "https://www.pakainfo.com/tools/cname/197",
    id: 197
  }, {
    code: "RS",
    name: "Serbia",
    created_at: "2020-05-24T01:28:32.342496",
    updated_at: "2020-05-24T01:28:32.342501",
    uri: "https://www.pakainfo.com/tools/cname/196",
    id: 196
  }];
}

CSS Code

#app {
  width: 95%;
  margin: 0 auto;
}

.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

[v-cloak] {
  display:none;
}
https://jsfiddle.net/matfish2/jfa5t4sm/

Vue Tables 2 Sortable Demo

HTML Code

Vue Tables 2 Sortable

vuejs source code

const bus = new Vue()


Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ["sort", "order", "name"],
    data: [{
      "id": 1,
      "order": 1,
      "name": "Item 1",
      "description": "Description for Item 1",
    }, {
      "id": 2,
      "order": 2,
      "name": "Item 2",
      "description": "Description for Item 2",
    }, {
      "id": 3,
      "order": 3,
      "name": "Item 3",
      "description": "Description for Item 3",
    }],
    options: {
      sortable: [],
      headings: {
        "sort": ""
      },
      uniqueKey: 'id',
      childRowTogglerFirst: false,
      orderBy: {
      	column: "order"
      },
    }

  },
  mounted() {
    Sortable.create(this.$el.querySelector('tbody'), {
      handle: '.sort-handle',
      onSort: () => {
        // rebuild the order
        const ord = {};
        this.$el.querySelectorAll('.sort-handle').forEach((el, idx) => {
          ord[el.dataset.id] = idx + 1;
        });
        // update the data
        const copyData = [];
        this.$refs.mTable.data.forEach(d => {
          copyData.push(Object.assign({}, d, {
            order: ord[d.id],
          }));
        });
        // sort the data
        /* copyData.sort((a, b) => {
          if (a.order < b.order) {
            return -1;
          } else if (a.order > b.order) {
            return 1;
          }
          return 0;
        }); */
        this.$refs.mTable.data = [];
        this.$refs.mTable.data = copyData;

      },
    });
  }
});

CSS Code

#app {
  width: 95%;
  margin: 0 auto;
}

.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}
Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about vue-tables-2 pagination example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

No related posts.

Leave a Comment