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

Crea una tabla simplemente con el componente vs-table y sus sub componentes vs-tr, vs-td, vs-th

Este componente tiene una lógica distinta para mejor manejo de los datos y personalización mas libre y acorde a las necesidades

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

Puede hacer franjas fácilmente en la tabla con la propiedad striped

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

Cambia el estado de un tr agregando la propiedad color al componente 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

Puedes agregar la funcionalidad de paginacion para la tabla usando el slot #footer y el componente de vs-pagination

Para hacer el desarrollo mas simple puedes usar la función de vuesax que genera los items ($vs.getPage) en base a la pagina y también la que genera el total de paginas en el componente pagination ($vs.getLength)

Esta forma de manejar los datos es para mejorar la libertad de personalización sin perder la facilidad de implementación

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

Puedes agregar la funcionalidad de seleccionar con un v-model en la tabla y la propiedad is-selected

TIP

Es importante el uso de la propiedad data en el tr ya que esos son los datos que se van a agregar al 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

Puedes hacer la funcionalidad de multiple selección en la tabla con la propiedad v-model siendo su valor un array

para esta funcionalidad puedes usar por ejemplo los checkbox de vuesax y la funcion global $vs.checkAll en el checkbox de el 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

Para agregar un tr que pueda mostrar datos expandidos usa el slot #expand dentro de el componente 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"
          >
            <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

Puedes editar los datos dentro de la tabla fácilmente usando el componente vs-dialog y la magia de 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

La funcionalidad de buscar ahora es independiente y se puede usar la función global $vs.getSearch

TIP

La función $vs.getSearch necesita dos parámetros los datos de la tabla que va a filtrar y el texto a buscar

sort

la funcionalidad sort es independiente y puedes usar la función global $vs.sortData

TIP

La función $vs.sortData necesita 3 parámetros el evento la data de la tabla y el item que se va a ordenar

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

Esta es una muestra de todo unido y de su funcionalidad en conjunto

Este componente esta creado para una personalización mucho mas libre respecto a el manejo de los datos como por ejemplo si necesitas una pagination de el lado de el servidor simplemente no usas la función global $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

Este componente lo creamos con una lógica distinta y puede que algo no muy común como primer punto queremos que el desarrollo sea mas libre y que el programador tenga muchas opciones y personalizacion en base a lo que necesita y quiere crear, por ejemplo un tema muy importante es las consultas de los datos en el servidor y que ahora no se manipulan por el componente hasta que usted mismo usando una funcion de vuesax se lo impone

Por eso ahora usamos funciones globales que puede usar si las necesita como pueden ser

• $vs.checkAll: hace las funcionalidad de check a todos los items y si ya están todos en check los remueve
• $vs.sortData: hace las funcionalidad de mover todos los elementos de abajo hacia arriba o de arriba hacia abajo y a su posición inicial (para poder guardar esta posición se le agrega una propiedad al objeto iterado)
• $vs.getSearch: retorna los items que coinciden con la búsqueda en todo el array
• $vs.getPage: retorna los elementos de la pagina en base a los items y el máximo a mostrar
• $vs.getLength: retorna el length para la pagination en base a los items y el máximo

API