# Table
You can manage the data by adding a table with a nice and very functional style
# Default
To implement a data table we have the component vs-table, also sub components and slots for a better management of the structure and operation
- vs-th: Component
- vs-tr: Component
- vs-td: Component
- thead: Slot
- tbody: Slot
- header: Slot
TIP
In order to manipulate the data within the table, it is necessary to add the property: data="myDataTable" and thus be able to use the v-slot="{data}"
Users
Email | Name | Website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table :data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].name}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
# Striped
You can have a sebra effect by adding the property stripe
Users
Email | Name | Website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table stripe :data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].name}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
# State
There are times when we need to add a state to our tr in the table so we have the property state inside the component vs-tr
Users
Email | Name | website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table :data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :state="indextr == 2 || indextr == 5?'success':indextr == 6?'danger':null" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
# Pagination
You can add a paginated table with the pagination property
TIP
by default the maximum number of elements per page is 5 to change it using the max-items property
Users
Email | Name | Website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table max-items="3" pagination :data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
}),
}
</script>
# Description
You can add a paginated table with description with the description property
TIP
You can change the items of the description using the description-items property, this sends an array with maximum values of items
Users
Email | Name | Website | Nro |
|---|
No data Available
Registries: 0 - 0 of 11 | Pages:
- 3 ,
- 5 ,
- 15
<template lang="html">
<div>
<vs-table
:max-items="descriptionItems[0]"
pagination
:data="users"
description
:description-items="descriptionItems"
description-title="Registries"
description-connector="of"
description-body="Pages">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
descriptionItems: [3,5,15],
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
},
{
"id": 11,
"name": "Kalolo Rich",
"username": "Kalolo.Rick",
"email": "Kalolo.Rich@jez.io",
"website": "kalolo.net",
}
]
}),
}
</script>
# Single Selected
You can add the functionality of select a specific tr to do this add the property data with the value to be selected, it is usually the triterated
TIP
if you need to execute a certain function to select the user, we have the property @selected and @dblSelection, as the first parameter the data is returned,one with one click and the other with double click.
Users
Email | Name | Website | Nro |
|---|
No data Available
[]
<template lang="html">
<div>
<vs-table
v-model="selected"
@selected="handleSelected"
@dblSelection="doubleSelection"
:data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].website">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
<pre>{{ selected }}</pre>
</div>
</template>
<script>
export default {
data:()=>({
selected:[],
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
}),
methods:{
handleSelected(tr) {
this.$vs.notify({
title:`Selected ${tr.username}`,
text:`Email: ${tr.email}`
})
},
doubleSelection(tr) {
this.$vs.notify({
title:`Double Selection ${tr.username}`,
text:`Email: ${tr.email}`,
color: 'success'
})
}
}
}
</script>
# Multiple Selected
To select multiples tr we have the property multiple and each of the selected items will be added to the v-model
Users
remove | Email | Name | Website | Nro |
|---|
No data Available
[]
<template lang="html">
<div>
<vs-table
multiple
v-model="selected"
:data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].website">
{{data[indextr].id}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
<pre>{{ selected }}</pre>
</div>
</template>
<script>
export default {
data:()=>({
selected:[],
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
# Expandable Data
You can add the functionality of expanding a tr to visualize more data to make a structure of data or more complex functionalities
Users
Email | Name | Website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table
:data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="tr.email">
{{tr.email}}
</vs-td>
<vs-td :data="tr.username">
{{tr.name}}
</vs-td>
<vs-td :data="tr.website">
{{tr.website}}
</vs-td>
<vs-td :data="tr.id">
{{tr.id}}
</vs-td>
<template class="expand-user" #expand>
<div class="con-expand-users">
<div class="con-btns-user">
<div class="con-userx">
<vs-avatar :badge="tr.id" size="45px" :src="`https://randomuser.me/api/portraits/women/${indextr}.jpg`"/>
<span>
{{ tr.name }}
</span>
</div>
<div>
<vs-button vs-type="border" size="small" icon="phone_in_talk"></vs-button>
<vs-button vs-type="gradient" size="small" color="success" icon="send"></vs-button>
<vs-button vs-type="flat" size="small" color="danger" icon="delete_sweep"></vs-button>
</div>
</div>
<vs-list>
<vs-list-item icon="mail" title="Email" :subtitle="tr.email"></vs-list-item>
<vs-list-item icon="check" title="Website" :subtitle="tr.website"></vs-list-item>
</vs-list>
</div>
</template>
</vs-tr>
</template>
</vs-table>
<pre>{{ selected }}</pre>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
<style lang="stylus">
.con-expand-users
.con-btns-user
display flex
padding 10px
padding-bottom 0px
align-items center
justify-content space-between
.con-userx
display flex
align-items center
justify-content flex-start
.list-icon
i
font-size .9rem !important
</style>
# Edit Data Table
You can edit the data with slot edit, so you have better flexibility and mastery of what you need
Email | Name | Nro1 | Nro2 |
|---|
No data Available
<template lang="html">
<div>
<vs-table :data="users">
<template #thead>
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Nro1
</vs-th>
<vs-th>
Nro2
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="tr.email">
{{tr.email}}
<template slot="edit">
<vs-input v-model="tr.email" class="inputx" placeholder="Email"/>
</template>
</vs-td>
<vs-td :data="tr.username">
{{tr.username}}
<template slot="edit">
<vs-select
label="Users"
v-model="tr.username"
>
<vs-select-item :key="index" :vs-value="item.name" :vs-text="item.name" v-for="(item,index) in users" />
</vs-select>
</template>
</vs-td>
<vs-td :data="tr.id">
{{tr.id}}
<template slot="edit">
<vs-input-number v-model="tr.id"/>
</template>
</vs-td>
<vs-td :data="tr.id">
{{tr.id}}
<template slot="edit">
<vs-slider :max="20" v-model="tr.id"/>
</template>
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
}),
}
</script>
# Filter and Sorter
You can add the Filter functionality by adding the search property
if you need a property to be sorted you just have to add the sort-key property and the value you need to be sorted
TIP
You can use queriedResults property of table component to get queried results by table component.
Users
search
Email | Name | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table search :data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th sort-key="email">
Email
</vs-th>
<vs-th sort-key="username">
Name
</vs-th>
<vs-th sort-key="id">
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</template>
<script>
export default {
data:()=>({
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
})
}
</script>
# Miscellaneous
You can add a filtered, sorted, paginated and multi selected table with combination of the search, multiple and pagination properties for example
Users
search
remove | Email | Name | Website | Nro |
|---|
No data Available
[]
<template lang="html">
<div>
<vs-table
multiple
v-model="selected"
pagination
max-items="3"
search
:data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th sort-key="email">
Email
</vs-th>
<vs-th sort-key="username">
Name
</vs-th>
<vs-th sort-key="website">
Website
</vs-th>
<vs-th sort-key="id">
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
<pre>{{ selected }}</pre>
</div>
</template>
<script>
export default {
data:()=>({
selected:[],
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
}),
}
</script>
# SST (Server-site Table)
The table stops doing its functionalities on the client side and proceeds to issue the functions that the user does to capture them and make the requests to the server's api making the change in the data
Users
search
Email | Name | Website | Nro |
|---|
No data Available
<template lang="html">
<div>
<vs-table
:sst="true"
@search="handleSearch"
@change-page="handleChangePage"
@sort="handleSort"
v-model="selected"
:total="totalItems"
pagination
max-items="3"
search
:data="users">
<template #header>
<h3>
Users
</h3>
</template>
<template #thead>
<vs-th sort-key="email">
Email
</vs-th>
<vs-th sort-key="username">
Name
</vs-th>
<vs-th sort-key="website">
Website
</vs-th>
<vs-th sort-key="id">
Nro
</vs-th>
</template>
<template v-slot="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
<pre ref="pre"></pre>
</div>
</template>
<script>
export default {
data:()=>({
selected:[],
totalItems:10,
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"website": "ambrose.net",
}
]
}),
methods:{
handleSearch(searching) {
let _print = `The user searched for: ${searching}\n`
this.$refs.pre.appendChild(document.createTextNode(_print))
},
handleChangePage(page) {
let _print = `The user changed the page to: ${page}\n`
this.$refs.pre.appendChild(document.createTextNode(_print))
},
handleSort(key, active) {
let _print = `the user ordered: ${key} ${active}\n`
this.$refs.pre.appendChild(document.createTextNode(_print))
}
}
}
</script>