Table

Table

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Create a table simply with the vs-table component and itsvs-tr, vs-td,vs-th components.

This component has a different logic for better data management and freer customization according to needs.

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

Striped

You can easily strip the table with the striped property

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

State

Change the state of a tr by adding the color property to the component vs-tr

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

Pagination

You can add the pagination functionality for the table using the #footer slot and the vs-pagination component

To make the development easier you can use the vuesax function that generates the items ($vs.getPage) based on the page and also the one that generates the total number of pages in the pagination component ($vs.getLength)

This way of handling data is to improve the freedom of customization without losing the ease of implementation

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
No matching records found
1
Code copied

Single Selected

You can add the select functionality with a v-model in the table and the is-selected property

TIP

Using the data property in the tr is important as that is the data to be added to the v-model

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Select an item in the table
      
Code copied

Multiple Selected

You can do multiple select functionality in the table with the v-model property with its value being an array

for this functionality you can use for example the vuesax checkboxes and the global function $vs.checkAll in the checkbox of th

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Select an item in the table
      
Code copied

Expandable data

To add a tr that can display expanded data use the#expand slot inside the vs-tr component.

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

Edit data

You can edit the data inside the table easily using the vs-dialog component and the magic of vuejs

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

Search and sort

The search functionality is now independent and you can use the global function $vs.getSearch

TIP

The $vs.getSearch function needs two parameters: the data of the table to filter and the text to search

sort

sort functionality is independent and you can use the global function $vs.sortData

TIP

The $vs.sortData function needs 3 parameters: the event, the data of the table and the item to be ordered.

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
Mrs. Dennis Schulist Karley_Dach@jasper.info 6
Kurtis Weissnat Telly.Hoeger@billy.biz 7
Nicholas Runolfsdottir V Sherwood@rosamond.me 8
Glenna Reichert Chaim_McDermott@dana.io 9
Clementina DuBuque Rey.Padberg@karina.biz 10
No matching records found
Code copied

Miscellaneous

This is a sample of everything united and its functionality together

This component is created for much freer customization regarding data handling, for example if you need server-side pagination you just don't use the global function $vs.getSearch.

Name
Email
Id
Leanne Graham Sincere@april.biz 1
Ervin Howell Shanna@melissa.tv 2
Clementine Bauch Nathan@yesenia.net 3
Patricia Lebsack Julianne.OConner@kory.org 4
Chelsey Dietrich Lucio_Hettinger@annie.ca 5
No matching records found
1
Code copied

Functions New

We create this component with a different logic and maybe something not very common as a first point we want development to be more free and for the programmer to have many options and customization based on what he needs and wants to create, for example a very important theme it is the queries of the data in the server and that now they are not manipulated by the component until you yourself using a vuesax function impose it

So now we use global functions that you can use if you need them such as

  • $vs.checkAll: it makes the check functionality to all the items and if they are all in check it removes them
  • $vs.sortData: it makes it possible to move all the elements from bottom to top or from top to bottom and to their initial position (in order to save this position, a property is added to the iterated object)
  • $vs.getSearch: returns the items that match the search in the entire array
  • $vs.getPage: returns the elements of the page based on the items and the maximum to show
  • $vs.getLength: returns the length for pagination based on the items and the maximum

API

props

Property Type Values Description default Example More
v-model object, array object array Determines the table values ​​that are selected. Usage Open Close
<vs-table v-model="selected">
striped Boolean truefalse Add stripes to the gray tr. Usage Open Close
<vs-table striped>
vs-tr:data object object when the functionality of selected is needed this property is needed since it is the object that is passed to the v-model. Usage Open Close
<vs-tr
  :key="i"
  v-for="(tr, i) in users"
  :data="tr"
  :is-selected="selected == tr"
>
  ...
</vs-tr>
vs-tr:is-selected Boolean truefalse Determines if the component is in the selected state. false Usage Open Close
<vs-tr
  :key="i"
  v-for="(tr, i) in users"
  :data="tr"
  :is-selected="selected == tr"
>
  ...
</vs-tr>
vs-td:edit Boolean truefalse Determine if the element is editable by adding underline and the pointer cursor. false Usage Open Close
<vs-td edit @click="edit = tr, editProp = 'name', editActive = true">
  {{ tr.name }}
</vs-td>
vs-th:sort Boolean truefalse Add the sort arrows to the corresponding th. false Usage Open Close
<vs-th sort @click="users = $vs.sortData($event ,users, 'name')">
  Name
</vs-th>
vs-tr:color String, vuesax colors color vuesax colors Change the color of the tr. Usage Open Close
<vs-tr
  :key="i"
  v-for="(tr, i) in users"
  :data="tr"
  :danger="tr.id == 3"
  :success="tr.id == 5"
  :primary="tr.id == 8"
  :warn="tr.id == 9"
>

slots

Property Type Values Description default Example More
header slot Space to put an element at the top of the table such as the input search. Usage Open Close
<template #header>
  ...
</template>
thead slot Space representing thead element of the table where the `vs-th` components will be placed. Usage Open Close
<template #thead>
  <vs-tr>
    <vs-th>
      Name
    </vs-th>
    <vs-th>
      Email
    </vs-th>
    <vs-th>
      Id
    </vs-th>
  </vs-tr>
</template>
tbody slot Represents the tbody element in the table and here we will put the `vs-tr` components. Usage Open Close
<template #tbody>
  <vs-tr
    :key="i"
    v-for="(tr, i) in users"
    :data="tr"
  >
    <vs-td>
      {{ tr.name }}
    </vs-td>
    <vs-td>
    {{ tr.email }}
    </vs-td>
    <vs-td>
    {{ tr.id }}
    </vs-td>
  </vs-tr>
</template>
vs-tr:#expand slot Represents the interior of the tr when it is expanded. Usage Open Close
<template #expand>
  <div class="con-content">
    <div>
      <vs-avatar>
        <img :src="`/avatars/avatar-${i + 1}.png`" alt="">
      </vs-avatar>
      <p>
        {{ tr.name }}
      </p>
    </div>
    <div>
      <vs-button flat icon>
        <i class='bx bx-lock-open-alt' ></i>
      </vs-button>
      <vs-button flat icon>
        Send Email
      </vs-button>
      <vs-button border danger>
        Remove User
      </vs-button>
    </div>
  </div>
</template>
notFound slot Change the item to display when there are no items in the table. Usage Open Close
<template #notFound>
  Not Found
</template>
Last Updated: 6/18/2020, 12:56:36 PM