Top

Popular Search:

Tables

Bootstrap basic table Preview link

# First Name Last Name Username Role Country
1 Alexander Orton @mdorton Admin USA
2 John Deo Deo @johndeo User USA
3 Randy Orton the Bird @twitter admin UK
4 Randy Mark Ottandy @mdothe user AUS
5 Ram Jacob Thornton @twitter admin IND 
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Country</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alexander</td>
<td>Orton</td>
<td>@mdorton</td>
<td>Admin</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">2</th>
<td>John Deo</td>
<td>Deo</td>
<td>@johndeo</td>
<td>User</td>
<td>USA</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Randy Orton</td>
<td>the Bird</td>
<td>@twitter</td>
<td>admin</td>
<td>UK</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Randy Mark</td>
<td>Ottandy</td>
<td>@mdothe</td>
<td>user</td>
<td>AUS</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Ram Jacob</td>
<td>Thornton</td>
<td>@twitter</td>
<td>admin</td>
<td>IND</td>
</tr>
</tbody>
</table>
</div>

Datatable Preview link

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750

Inside Your template tags add

<div class="table-responsive theme-scrollbar">
  <form>
      <div class="my-3 row justify-content-end">
          <label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Search:</label>
          <div class="col-xs-3 col-sm-auto">
              <input id="table-complete-search" type="text" class="form-control" v-model="filterQuery">
          </div>
      </div>
      <table class="display table dataTable no-footer table-bordered" id="basic-1">
          <thead>
              <tr>
                  <th scope="col" sortable="name">Name</th>
                  <th scope="col" sortable="startDate">Date</th>
                  <th scope="col" sortable="invoice">Invoice No.</th>
                  <th scope="col" sortable="position">Job Designation</th>
                  <th scope="col" sortable="credit">Credit/Debit</th>
                  <th scope="col" sortable="office">Company Name</th>
                  <th scope="col" sortable="salary">Priority</th>
                  <th scope="col" sortable="Budget">Budget</th>
                  <th scope="col">Action</th>
              </tr>
          </thead>
          <tbody v-if="!get_rows().length">
              <tr>
                  <td valign="top" colspan="7" class="dataTables_empty">
                      No matching records found</td>
              </tr>
          </tbody>
          <tbody v-if="get_rows().length">
              <tr v-for="(row, index) in get_rows()" :key="index">
                  <td scope="row">
                      <img class="img-40 me-2" :src="getImages(row.img)" alt="">{{ row.name }}
                  </td>
                  <td>{{ row.startDate }}</td>
                  <td>{{ row.invoice }}</td>
                  <td>{{ row.position }}</td>
                  <td>
                      <span class="f-w-700 " :class="row.iconColor">
                          <i class="icofont" :class="row.iconClass"></i>
                          {{ row.credit }}
                      </span>
                  </td>
                  <td> {{ row.office }}</td>
                  <td><span class="badge" :class="row.ActionClass">{{ row.salary }}</span></td>
                  <td>{{ row.Budget }}</td>
                  <td>
                      <span>
                          <span @click='removeProduct(index)'>
                              <i class="icofont icofont-close-circled font-danger ps-2"></i>
                          </span>
                      </span>
                  </td>
              </tr>
          </tbody>
      </table>
      <ul class="pagination my-2 justify-content-end pagination-primary">
          <li class="page-item"> <a class="page-link" @click="prev()" aria-label="Previous"><span
                      aria-hidden="true">«</span></a></li>
          <li class="page-item" v-for="i in num_pages()" :key="i"
              v-bind:class="[i == currentPage ? 'active' : '']" v-on:click="change_page(i)">
              <a class="page-link">{{ i }}</a>
          </li>
          <li class="page-item"><a class="page-link" @click="change()" aria-label="Next"><span
                      aria-hidden="true">»</span></a></li>
      </ul>
  </form>
</div>

Inside Your script tags add

import { ref, defineAsyncComponent, onMounted, watch } from 'vue'
 import { datatable } from "@/core/data/table"
 let elementsPerPage = ref(6)
   let currentPage = ref(1)
   let filterQuery = ref("")
   let allData = ref([])
   onMounted(() => {
       allData.value = datatable;
   })
   watch(filterQuery, (search: string) => {
       var filteredData = datatable.filter((row) => {
           return (
               row.name.toLowerCase().includes(search.toLowerCase()) ||
               row.position.toLowerCase().includes(search.toLowerCase()) ||
               row.office.toLowerCase().includes(search.toLowerCase()) ||
               row.salary.toLowerCase().includes(search.toLowerCase()) ||
               row.Budget.toLowerCase().includes(search.toLowerCase())
           );
       });
       search == "" ? allData.value = datatable : allData.value = filteredData
   })
   function get_rows() {
       var start = (currentPage.value - 1) * elementsPerPage.value;
       var end = start + elementsPerPage.value;
       return allData.value.slice(start, end);
   }
   function num_pages() {
       return Math.ceil(allData.value.length / elementsPerPage.value);
   }
   function change_page(page: number) {
       currentPage.value = page;
   }
   function change() {
       if (currentPage.value < Math.ceil(allData.value.length / elementsPerPage.value)) {
           currentPage.value++;
       }
   }
   function prev() {
       if (currentPage.value > 1) {
           currentPage.value--;
       }
   }
   function removeProduct(index: any) {
       datatable.splice(index, 1)
   }

Inside json add

interface datatsb {
  id: number,
  img: string,
  name: string,
  position: string,
  office: string,
  invoice: string,
  startDate: string,
  Budget: string,
  salary: string,
  credit: string,
  ActionClass: string,
  iconClass: string,
  iconColor: string
}
export const datatable: datatsb[] = [
 {
     id: 1,
     img: "user/1.jpg",
     name: "Tiger Nixon",
     position: "System Architect",
     office: "Hewlett packard",
     invoice: "#PX0101",
     startDate: "2024/04/27",
     Budget: "$3142.00",
     salary: "High",
     credit: "4.3%",
     ActionClass: "badge-light-primary",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 },
 {
     id: 2,
     img: "user/2.png",
     name: "Garrett Winters",
     position: "Maintenace service",
     office: "Apple Inc.",
     invoice: "#RF304f",
     startDate: "2024/04/22",
     Budget: "$1234.00",
     salary: "Urgent",
     credit: "5.6%",
     ActionClass: "badge-light-danger",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 },
 {
     id: 3,
     img: "user/3.jpg",
     name: "Ashton Cox",
     position: "Junior Technical Author",
     office: "Edinburgh",
     invoice: "#DNJ480",
     startDate: "2024/05/21",
     Budget: "$2345.00",
     salary: "Low",
     credit: "2.4%",
     ActionClass: "badge-light-success",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 4,
     img: "user/6.jpg",
     name: "Brielle Williamson",
     position: "Senior Javascript Developer",
     office: "Microsoft",
     invoice: "#G189d0",
     startDate: "2024/03/09",
     Budget: "$7689.00",
     salary: "Medium",
     credit: "2.2%",
     ActionClass: "badge-light-warning",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 5,
     img: "user/7.jpg",
     name: "Tiger Nixon",
     position: "Accountant",
     office: "Tata Co.",
     invoice: "#31D8FFS",
     startDate: "2024/04/10",
     Budget: "$2145.00",
     salary: "High",
     credit: "5.8%",
     ActionClass: "badge-light-primary",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 },
 {
     id: 6,
     img: "user/14.png",
     name: "Michael Morris",
     position: "General service",
     office: "Google Inc.",
     invoice: "#G189D4",
     startDate: "2024/06/12",
     Budget: "$2578.00",
     salary: "Urgent",
     credit: "6.4%",
     ActionClass: "badge-light-danger",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 },
 {
     id: 7,
     img: "user/10.jpg",
     name: "Kevin Dawson",
     position: "System Architect",
     office: "Mindtree Ltd.",
     invoice: "#PX2101",
     startDate: "2024/04/25",
     Budget: "$6538.00",
     salary: "Low",
     credit: "0.3%",
     ActionClass: "badge-light-success",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 8,
     img: "user/12.png",
     name: "Thomas Taylor",
     position: "System Architect",
     office: "Wipro Ltd.",
     invoice: "#px0101",
     startDate: "2024/06/09",
     Budget: "$2121.00",
     salary: "Urgent",
     credit: "7.3%",
     ActionClass: "badge-light-danger",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 },
 {
     id: 9,
     img: "user/3.png",
     name: "Carolyn Jones",
     position: "General service",
     office: "Edinburgh",
     invoice: "#G5384H",
     startDate: "2024/01/11",
     Budget: "$9546.00",
     salary: "High",
     credit: "6.3%",
     ActionClass: "badge-light-primary",
     iconClass: "icofont-arrow-up",
     iconColor: "font-uccess"
 },
 {
     id: 10,
     img: "user/6.jpg",
     name: "Glen Matney",
     position: "System Architect",
     office: "Mphasis Ltd",
     invoice: "#E5384H",
     startDate: "2024/04/02",
     Budget: "$4587.00",
     salary: "Medium",
     credit: "3.3%",
     ActionClass: "badge-light-warning",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 11,
     img: "user/9.jpg",
     name: "Charles Kubik",
     position: "System Architect",
     office: "Infosys Ltd.",
     invoice: "#JK384H",
     startDate: "2024/05/01",
     Budget: "$3140.00",
     salary: "Low",
     credit: "2.3%",
     ActionClass: "badge-light-success",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 12,
     img: "user/10.jpg",
     name: "Herbert Stokes",
     position: "General service",
     office: "Edinburgh",
     invoice: "#HY5384H",
     startDate: "2024/07/04",
     Budget: "$3014.00",
     salary: "Low",
     credit: "1.3%",
     ActionClass: "badge-light-success",
     iconClass: "icofont-arrow-down",
     iconColor: "font-danger"
 },
 {
     id: 13,
     img: "user/11.png",
     name: "Mary Cousar",
     position: "System Architect",
     office: "Infosys.",
     invoice: "#KH384H",
     startDate: "2024/04/06",
     Budget: "$2014.00",
     salary: "Urgent",
     credit: "5.3%",
     ActionClass: "badge-light-danger",
     iconClass: "icofont-arrow-up",
     iconColor: "font-success"
 }
]