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}"

Striped

You can have a sebra effect by adding the property stripe

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

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

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 , as the first parameter the data is returned

Multiple Selected

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

Edit Data Table

You can edit the data with slot edit, so you have better flexibility and mastery of what you need

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

Miscellaneous

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

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

API