VxTable

<vx-table
  ref="table"
  noDataText="Sem dados disponíveis"
  pagination
  :max-items="itemsPerPage"
  search
  :data="userDepartments"
>
  <!-- Toolbar no slot header -->
  <div slot="header" class="flex flex-wrap-reverse items-center flex-grow justify-between">
    <div class="p-3 mb-4 rounded-lg cursor-pointer flex items-center
      text-base text-primary border border-solid border-primary"
      @click="addNewData"
    >
      <feather-icon icon="PlusIcon" svgClasses="h-4 w-4" />
      <span class="ml-2">Adicionar Novo</span>
    </div>
    <vs-dropdown vs-trigger-click class="cursor-pointer mb-4">
      <div class="p-4 border border-solid rounded-full flex items-center font-medium">
        <span class="mr-2">{{ currentPage * itemsPerPage - (itemsPerPage - 1) }} - {{ ... }} de {{ queriedItems }}</span>
        <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
      </div>
      <vs-dropdown-menu>
        <vs-dropdown-item @click="itemsPerPage = 10">10</vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage = 20">20</vs-dropdown-item>
      </vs-dropdown-menu>
    </vs-dropdown>
  </div>

  <!-- Cabeçalho com vs-th (Vuesax) -->
  <template slot="thead">
    <vs-th sort-key="name">Nome</vs-th>
    <vs-th sort-key="activated">Status</vs-th>
    <vs-th>Ações</vs-th>
  </template>

  <!-- Linhas com vs-tr/vs-td (Vuesax) -->
  <template slot-scope="{data}">
    <tbody>
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">
        <vs-td><p class="font-medium truncate">{{ tr.name }}</p></vs-td>
        <vs-td>
          <vs-chip :color="getStatusColor(tr.activated)">
            {{ tr.activated ? 'Ativo' : 'Inativo' }}
          </vs-chip>
        </vs-td>
        <vs-td class="whitespace-no-wrap">
          <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary" @click.stop="editData(tr)" />
          <feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger" @click.stop="deleteData(tr)" />
        </vs-td>
      </vs-tr>
    </tbody>
  </template>
</vx-table>

<vx-table :data="orders" noDataText="Sem pedidos">
  <template slot-scope="{data}">
    <tbody>
      <vs-tr
        :data="tr" :key="i" v-for="(tr, i) in data"
        :state="tr.status === 'atrasado' ? 'danger'
              : tr.status === 'entregue' ? 'success'
              : tr.status === 'em_rota'  ? 'warning'
              : null"
      >
        <vs-td>{{ tr.id }}</vs-td>
        <vs-td>{{ tr.status }}</vs-td>
      </vs-tr>
    </tbody>
  </template>
</vx-table>

<!-- NOTA: requer vx-tr (custom), não vs-tr (Vuesax) -->
<vx-table :data="contacts" noDataText="Sem contatos">
  <template slot="thead">
    <vx-th sort-key="name">Nome</vx-th>
    <vx-th sort-key="phone">Telefone</vx-th>
  </template>

  <template slot-scope="{data}">
    <tbody>
      <vx-tr :data="tr" :key="i" v-for="(tr, i) in data">
        <vx-td>{{ tr.name }}</vx-td>
        <vx-td>{{ tr.phone }}</vx-td>

        <template slot="expand">
          <div class="p-4">
            <p>Email: {{ tr.email }}</p>
            <p>Endereço: {{ tr.address }}</p>
          </div>
        </template>
      </vx-tr>
    </tbody>
  </template>
</vx-table>

<vx-table
  :sst="true"
  :data="users"
  :total="totalUsers"
  pagination
  search
  max-items="20"
  v-model="selected"
  @search="handleSearch"
  @change-page="handleChangePage"
  @sort="handleSort"
>
  <template slot="thead">
    <vs-th sort-key="name">Nome</vs-th>
    <vs-th sort-key="email">Email</vs-th>
    <vs-th sort-key="created_at">Criado em</vs-th>
  </template>

  <template slot-scope="{data}">
    <tbody>
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">
        <vs-td>{{ tr.name }}</vs-td>
        <vs-td>{{ tr.email }}</vs-td>
        <vs-td>{{ tr.created_at | formatDate }}</vs-td>
      </vs-tr>
    </tbody>
  </template>
</vx-table>