Vuesax New Component data Table , vuejs , javascript, design Awesome

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

You can have a sebra effect by adding the property stripe

To have a thead in the fixed table you can do it simply by adding the max-height property and the required height, the functionality will be automatically added

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

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

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 the v-model

[]

You can add the functionality of expanding a tr to visualize more data to make a structure of data or more complex functionalities

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