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

• Template
• Script
• All

  <vs-table>
    <template #thead>
      <vs-tr>
        <vs-th>
          Name
        </vs-th>
        <vs-th>
          Email
        </vs-th>
        <vs-th>
          Id
        </vs-th>
      </vs-tr>
    </template>
    <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-table>

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

• Template
• Script
• All

  <template>
    <div class="center examplex">
      <vs-table striped>
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <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-table>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table>
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <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"
          >
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
      </vs-table>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table>
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in $vs.getPage(users, page, max)"
            :data="tr"
          >
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
        <template #footer>
          <vs-pagination v-model="page" :length="$vs.getLength(users, max)" />
        </template>
      </vs-table>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table v-model="selected">
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in users"
            :data="tr"
            :is-selected="selected == tr"
          >
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
      </vs-table>

      <span class="data">
        <pre>
  {{ selected ? selected : 'Select an item in the table' }}
        </pre>
      </span>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table
        v-model="selected"
        >
        <template #thead>
          <vs-tr>
            <vs-th>
              <vs-checkbox
                :indeterminate="selected.length == users.length" v-model="allCheck"
                @change="selected = $vs.checkAll(selected, users)"
              />
            </vs-th>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in users"
            :data="tr"
            :is-selected="!!selected.includes(tr)"
          >
            <vs-td checkbox>
              <vs-checkbox :val="tr" v-model="selected" />
            </vs-td>
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
      </vs-table>
      <span class="data">
        <pre>
  {{ selected.length > 0 ? selected : 'Select an item in the table' }}
        </pre>
      </span>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table>
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in users"
          >
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>

            <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>
          </vs-tr>
        </template>
      </vs-table>
    </div>
  </template>

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table>
        <template #thead>
          <vs-tr>
            <vs-th>
              Name
            </vs-th>
            <vs-th>
              Email
            </vs-th>
            <vs-th>
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in users"
            :data="tr"
          >
            <vs-td edit @click="edit = tr, editProp = 'name', editActive = true">
              {{ tr.name }}
            </vs-td>
            <vs-td edit @click="edit = tr, editProp = 'email', editActive = true">
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
      </vs-table>

      <vs-dialog v-model="editActive">
        <template #header>
            Change Prop {{ editProp }}
        </template>
        <vs-input @keypress.enter="editActive = false" v-if="editProp == 'email'" v-model="edit[editProp]" />
        <vs-select @change="editActive = false" block v-if="editProp == 'name'" placeholder="Select" v-model="edit[editProp]">
          <vs-option label="Vuesax" value="Vuesax">
            Vuesax
          </vs-option>
          <vs-option label="Vue" value="Vuejs">
            Vue
          </vs-option>
          <vs-option label="Javascript" value="Javascript">
            Javascript
          </vs-option>
          <vs-option disabled label="Sass" value="Sass">
            Sass
          </vs-option>
          <vs-option label="Typescript" value="Typescript">
            Typescript
          </vs-option>
          <vs-option label="Webpack" value="Webpack">
            Webpack
          </vs-option>
          <vs-option label="Nodejs" value="Nodejs">
            Nodejs
          </vs-option>
        </vs-select>
      </vs-dialog>
    </div>
  </template>

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.

Search

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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table>
        <template #header>
          <vs-input v-model="search" border placeholder="Search" />
        </template>
        <template #thead>
          <vs-tr>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'name')">
              Name
            </vs-th>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'email')">
              Email
            </vs-th>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'id')">
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in $vs.getSearch(users, search)"
            :data="tr"
          >
            <vs-td>
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>
          </vs-tr>
        </template>
      </vs-table>
    </div>
  </template>

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.

Search

	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

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-table
        v-model="selected"
        >
        <template #header>
          <vs-input v-model="search" border placeholder="Search" />
        </template>
        <template #thead>
          <vs-tr>
            <vs-th>
              <vs-checkbox
                :indeterminate="selected.length == users.length" v-model="allCheck"
                @change="selected = $vs.checkAll(selected, users)"
              />
            </vs-th>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'name')">
              Name
            </vs-th>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'email')">
              Email
            </vs-th>
            <vs-th sort @click="users = $vs.sortData($event ,users, 'id')">
              Id
            </vs-th>
          </vs-tr>
        </template>
        <template #tbody>
          <vs-tr
            :key="i"
            v-for="(tr, i) in $vs.getPage($vs.getSearch(users, search), page, max)"
            :data="tr"
            :is-selected="!!selected.includes(tr)"
            not-click-selected
            open-expand-only-td
          >
            <vs-td checkbox>
              <vs-checkbox :val="tr" v-model="selected" />
            </vs-td>
            <vs-td edit @click="edit = tr, editProp = 'name', editActive = true">
              {{ tr.name }}
            </vs-td>
            <vs-td>
            {{ tr.email }}
            </vs-td>
            <vs-td>
            {{ tr.id }}
            </vs-td>

            <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>
          </vs-tr>
        </template>
        <template #footer>
          <vs-pagination v-model="page" :length="$vs.getLength($vs.getSearch(users, search), max)" />
        </template>
      </vs-table>

      <vs-dialog v-model="editActive">
        <template #header>
            Change Prop {{ editProp }}
        </template>
        <vs-input @keypress.enter="editActive = false" v-if="editProp == 'email'" v-model="edit[editProp]" />
        <vs-select @change="editActive = false" block v-if="editProp == 'name'" placeholder="Select" v-model="edit[editProp]">
          <vs-option label="Vuesax" value="Vuesax">
            Vuesax
          </vs-option>
          <vs-option label="Vue" value="Vuejs">
            Vue
          </vs-option>
          <vs-option label="Javascript" value="Javascript">
            Javascript
          </vs-option>
          <vs-option disabled label="Sass" value="Sass">
            Sass
          </vs-option>
          <vs-option label="Typescript" value="Typescript">
            Typescript
          </vs-option>
          <vs-option label="Webpack" value="Webpack">
            Webpack
          </vs-option>
          <vs-option label="Nodejs" value="Nodejs">
            Nodejs
          </vs-option>
        </vs-select>
      </vs-dialog>
    </div>
  </template>

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