You are reading the article How To Createtable With Examples? updated in October 2023 on the website Dacquyenphaidep.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 How To Createtable With Examples?
Introduction to chúng tôi TableIn the present era of the world, we will be getting huge amounts of data everywhere we go, whether it is a Blog, search results, or an E-Commerce website. These data are generally presented as Tables. A Table is a collection of facts and figures displayed in rows and columns. For containing different kinds of information, chúng tôi also helps in defining tables. The table has the feature of sorting, searching, etc. as well. Sorting can be done in ascending and descending order, which helps get the desired information from the tables. In this article, we will understand the table concept in chúng tôi through different examples.
Start Your Free Software Development Course
Web development, programming languages, Software testing & others
Syntax:
How to Create chúng tôi Table?Now, the next step may be sorting the data. When we sort the data, it updates the array of the users, and tables also update themselves automatically. This process makes sorting very much simpler.
Examples of chúng tôi TableLets us discuss the examples of chúng tôi Table.
1. chúng tôi Table with FiltersThe files used to implement the code below are:
[i] EDUCBA.png
[ii] App.vue
function getData() { return [{ code: “8,999 INR”, name: “Investment Banking Course”, }, { code: “6,999 INR”, name: “Financial Modeling Course”, }, { code: “6,999 INR”, name: “Equity Research Training”, }, { code: “10,999 INR”, name: “Data Scientist Training”, }, { code: “8,999 INR”, name: “Machine Learning Training”, }, { code: “8,999 INR”, name: “R Programming Training”, }, { code: “8,999 INR”, name: “SAS Training”, }, { code: “8,999 INR”, name: “Cloud Computing Training”, }, { code: “6,999 INR”, name: “AWS Training”, }, { code: “6,999 INR”, name: “SPSS Training Program”, }, { code: “6,999 INR”, name: “Tableau Training”, }, { code: “6,999 INR”, name: “IoT Training”, }, { code: “9,999 INR”, name: “Deep Learning Training”, }, { code: “6,999 INR”, name: “Apache Pig Training”, }, { code: “6,999 INR”, name: “Azure Training”, }, { code: “6,999 INR”, name: “SEO Training”, }, { code: “6,999 INR”, name: “Salesforce Training”, }, { code: “6,999 INR”, name: “Redis Certification”, }, { code: “10,999 INR”, name: “VB.NET Training”, }, { code: “2,499 INR”, name: “Excel Training”, }, { code: “2,499 INR”, name: “VBA Training”, }, { code: “10,999 INR”, name: “Unity Training”, }]; } export default { name: ‘app’, data() { return { columns: [‘name’, ‘code’, ‘uri’], data: getData(), options: { headings: { name: ‘Course Name’, code: ‘Course Price’, uri: ‘Details’ }, sortable: [‘name’, ‘code’], filterable: [‘name’, ‘code’] }, show: true } } } #app { font-family: ‘Times New Roman’ , Times , serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0d0b0c; margin: 25px auto 0; width: 400px; background-color: #54d1b0 }
[iii] index.html
[iv] index.js
import Vue from 'vue' import { ClientTable } from 'vue-tables-2'; import App from './App' Vue.config.productionTip = false Vue.use(ClientTable); new Vue({ el: '#app', components: { App } })Output:
2. chúng tôi Table with Sorting Option in Every Column[i] EDUCBA.png
[ii] App.vue
export default { name: “App”, data: function() { return { values: [ { name: “November Rain”, id: 2, hits: 1400 }, { name: “That’s My Name”, id: 1, hits: 97 }, { name: “Hall of Fame”, id: 3, hits: 446 }, { name: “Counting Stars”, id: 4, hits: 3000 }, { name: “Hymn For The Weekend”, id: 5, hits: 1300 }, { name: “Rockabye”, id: 6, hits: 2300 }, { name: “Let Me Down Slowly”, id: 7, hits: 177 } ] }; } }; #app { font-family: ‘Times New Roman’ , Times , serif; color: #0d0b0c; margin: 25px auto 0; width: 500px; background-color: #a9d918 }
[iii] main.js
import Vue from "vue"; import SortedTablePlugin from "vue-sorted-table"; import App from "./App"; Vue.use(SortedTablePlugin, { }); Vue.config.productionTip = false; new Vue({ el: "#app", components: { App }, });Output:
Output, when Serial No. is sorted, according to descending order-
Output when Songs are sorted according to ascending order-
Output when Songs are sorted according to descending order.
Output when Views are sorted in ascending order-
Result of sorting views in decreasing order:
ConclusionOn the basis of the above article, we understood the concept of Tables in chúng tôi We went through the basic idea of its working, and the examples explained above will help us understand its application in different situations or needs of our app.
Recommended ArticlesThis is a guide to chúng tôi Table. Here we discuss the introduction and how to create chúng tôi Table, along with examples and code implementation. You may also have a look at the following articles to learn more –
You're reading How To Createtable With Examples?
Update the detailed information about How To Createtable With Examples? on the Dacquyenphaidep.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!