# 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 slot-scope="{data}"

Users

Email
Name
Website
Nro
Sincere@april.biz Leanne Graham hildegard.org 1
Shanna@melissa.tv Ervin Howell anastasia.net 2
Nathan@yesenia.net Clementine Bauch ramiro.info 3
Julianne.OConner@kory.org Patricia Lebsack kale.biz 4
Lucio_Hettinger@annie.ca Chelsey Dietrich demarco.info 5
Karley_Dach@jasper.info Mrs. Dennis Schulist ola.org 6
Telly.Hoeger@billy.biz Kurtis Weissnat elvis.io 7
Sherwood@rosamond.me Nicholas Runolfsdottir V jacynthe.com 8
Chaim_McDermott@dana.io Glenna Reichert conrad.com 9
Rey.Padberg@karina.biz Clementina DuBuque ambrose.net 10

# Striped

You can have a sebra effect by adding the property stripe

Users

Email
Name
Website
Nro
Sincere@april.biz Leanne Graham hildegard.org 1
Shanna@melissa.tv Ervin Howell anastasia.net 2
Nathan@yesenia.net Clementine Bauch ramiro.info 3
Julianne.OConner@kory.org Patricia Lebsack kale.biz 4
Lucio_Hettinger@annie.ca Chelsey Dietrich demarco.info 5
Karley_Dach@jasper.info Mrs. Dennis Schulist ola.org 6
Telly.Hoeger@billy.biz Kurtis Weissnat elvis.io 7
Sherwood@rosamond.me Nicholas Runolfsdottir V jacynthe.com 8
Chaim_McDermott@dana.io Glenna Reichert conrad.com 9
Rey.Padberg@karina.biz Clementina DuBuque ambrose.net 10

# 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
Sincere@april.biz Bret hildegard.org 1
Shanna@melissa.tv Antonette anastasia.net 2
Nathan@yesenia.net Samantha ramiro.info 3
Julianne.OConner@kory.org Karianne kale.biz 4
Lucio_Hettinger@annie.ca Kamren demarco.info 5
Karley_Dach@jasper.info Leopoldo_Corkery ola.org 6
Telly.Hoeger@billy.biz Elwyn.Skiles elvis.io 7
Sherwood@rosamond.me Maxime_Nienow jacynthe.com 8
Chaim_McDermott@dana.io Delphine conrad.com 9
Rey.Padberg@karina.biz Moriah.Stanton ambrose.net 10

# 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
Sincere@april.biz Bret hildegard.org 1
Shanna@melissa.tv Antonette anastasia.net 2
Nathan@yesenia.net Samantha ramiro.info 3
Registries: 1 - 3 of 11 | Pages:
  • 3 ,
  • 5 ,
  • 15

# 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
Sincere@april.biz Bret hildegard.org 1
Shanna@melissa.tv Antonette anastasia.net 2
Nathan@yesenia.net Samantha ramiro.info 3
Julianne.OConner@kory.org Karianne kale.biz 4
Lucio_Hettinger@annie.ca Kamren demarco.info 5
Karley_Dach@jasper.info Leopoldo_Corkery ola.org 6
Telly.Hoeger@billy.biz Elwyn.Skiles elvis.io 7
Sherwood@rosamond.me Maxime_Nienow jacynthe.com 8
Chaim_McDermott@dana.io Delphine conrad.com 9
Rey.Padberg@karina.biz Moriah.Stanton ambrose.net 10
[]

# Multiple Selected

To select multiples tr we have the property multiple and each of the selected items will be added to thev-model

Users

remove
Email
Name
Website
Nro
check
Sincere@april.biz Bret 1 1
check
Shanna@melissa.tv Antonette 2 2
check
Nathan@yesenia.net Samantha 3 3
check
Julianne.OConner@kory.org Karianne 4 4
check
Lucio_Hettinger@annie.ca Kamren 5 5
check
Karley_Dach@jasper.info Leopoldo_Corkery 6 6
check
Telly.Hoeger@billy.biz Elwyn.Skiles 7 7
check
Sherwood@rosamond.me Maxime_Nienow 8 8
check
Chaim_McDermott@dana.io Delphine 9 9
check
Rey.Padberg@karina.biz Moriah.Stanton 10 10
[]

# 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
keyboard_arrow_down Sincere@april.biz Leanne Graham hildegard.org 1
keyboard_arrow_down Shanna@melissa.tv Ervin Howell anastasia.net 2
keyboard_arrow_down Nathan@yesenia.net Clementine Bauch ramiro.info 3
keyboard_arrow_down Julianne.OConner@kory.org Patricia Lebsack kale.biz 4
keyboard_arrow_down Lucio_Hettinger@annie.ca Chelsey Dietrich demarco.info 5
keyboard_arrow_down Karley_Dach@jasper.info Mrs. Dennis Schulist ola.org 6
keyboard_arrow_down Telly.Hoeger@billy.biz Kurtis Weissnat elvis.io 7
keyboard_arrow_down Sherwood@rosamond.me Nicholas Runolfsdottir V jacynthe.com 8
keyboard_arrow_down Chaim_McDermott@dana.io Glenna Reichert conrad.com 9
keyboard_arrow_down Rey.Padberg@karina.biz Clementina DuBuque ambrose.net 10

# 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
edit Sincere@april.biz edit Bret edit 1 edit 1
edit Shanna@melissa.tv edit Antonette edit 2 edit 2
edit Nathan@yesenia.net edit Samantha edit 3 edit 3
edit Julianne.OConner@kory.org edit Karianne edit 4 edit 4
edit Lucio_Hettinger@annie.ca edit Kamren edit 5 edit 5
edit Karley_Dach@jasper.info edit Leopoldo_Corkery edit 6 edit 6
edit Telly.Hoeger@billy.biz edit Elwyn.Skiles edit 7 edit 7
edit Sherwood@rosamond.me edit Maxime_Nienow edit 8 edit 8
edit Chaim_McDermott@dana.io edit Delphine edit 9 edit 9
edit Rey.Padberg@karina.biz edit Moriah.Stanton edit 10 edit 10

# 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

Email
Name
Nro
Sincere@april.biz Bret 1
Shanna@melissa.tv Renée 2
Nathan@yesenia.net Samantha 3

# Miscellaneous

You can add a filtered, sorted, paginated and multi selected table with combination of the search, multiple and pagination properties for example

Users

remove
Email
Name
Website
Nro
check
Sincere@april.biz Bret hildegard.org 1
check
Shanna@melissa.tv Antonette anastasia.net 2
check
Nathan@yesenia.net Samantha ramiro.info 3
[]

# 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

Email
Name
Website
Nro
Sincere@april.biz Bret hildegard.org 1
Shanna@melissa.tv Antonette anastasia.net 2
Nathan@yesenia.net Samantha ramiro.info 3

API #

Name Type Parameters Description default
data Array, Object Data that will be represented in the table.
header slot Header of the table.
thead slot thead of the table and where the vs-th should be added.
tbody slot tbody of the table and where the vs-tr should be added.
stripe Boolean Add a stripes effect. false
hoverFlat Boolean Change effect hover and flat. false
maxHeight px Change the high maximum of the table, generating the scroll. false
multiple Boolean Determines if multiple items can be selected. false
notSpacer Boolean Eliminates the space between each tr. false
search Boolean Determine if the filtering functionality through an input is active. false
pagination Boolean Determine if the page is active so that only a certain number of items can be displayed. false
maxItems Number Change the maximum number of items that can be displayed when the page is active. 5
description Boolean Determine if the description is active so that only a certain number of items can be displayed. false
description-items Array Maximum elements that will be represented in the description.
description-title String Title of the description.
description-connector String Connector of the description.
description-body String Body of the description.
state (vs-tr) Boolean Determine the state of the element with a color.
data (vs-tr) Object, Number, Array, String Determines the value of the element for when it is selected.
sortKey (vs-th) String Determine the value to be raffled and if this activates that functionality.
data (vs-td) String This property is required if you are going to use the edit slot.
noDataText String Change the text of the notification when there is no data in the table.
total (total items if sst) Number Total number of items if the data is being loaded through sst (server-site table) 0
sst (server-site table) Boolean It does not execute the functions of the client side like search, pagination change or sort, now the methods are executed (search, change-page and sort) to be used when making the call to the api of the server. false