You can manage the data by adding a table with a nice and very functional style
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
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}"
Email
|
Name
|
Website
|
Nro
|
---|
You can have a sebra effect by adding the property stripe
Email
|
Name
|
Website
|
Nro
|
---|
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
Email
|
Name
|
website
|
Nro
|
---|
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
Email
|
Name
|
Website
|
Nro
|
---|
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
Email
|
Name
|
Website
|
Nro
|
---|
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.
Email
|
Name
|
Website
|
Nro
|
---|
[]
To select multiples tr we have the property multiple
and each of the selected items will be added to thev-model
remove |
Email
|
Name
|
Website
|
Nro
|
---|
[]
You can add the functionality of expanding a tr to visualize more data to make a structure of data or more complex functionalities
Email
|
Name
|
Website
|
Nro
|
---|
You can edit the data with slot edit
, so you have better flexibility and mastery of what you need
Email
|
Name
|
Nro1
|
Nro2
|
---|
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.
Email
|
Name
|
Nro
|
---|
You can add a filtered, sorted, paginated and multi selected table with combination of the search
, multiple
and pagination
properties for example
remove |
Email
|
Name
|
Website
|
Nro
|
---|
[]
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
Email
|
Name
|
Website
|
Nro
|
---|
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 |