Pixelstrap - Admin Document

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

Inside Your template tags add

<tr :class="data.borderColor" v-for="(data, index) in bootstraplist" :key="index">
 <th scope="row">{{ data.id }}</th>
 <td><img :src="getImages(data.img)" alt="" class="img-30 me-2 rounded-circle">{{ data.firstName
 }}</td>
 <td>{{ data.lastName }}</td>
 <td>{{ data.userName }}</td>
 <td>{{ data.role }}</td>
 <td>{{ data.company }}</td>
 <td>
     <div class="badge " :class="data.badgeClass">
         {{ data.language }}
     </div>
 </td>
 <td>{{ data.country }}</td>
 </tr>

Inside Your script tags add

import { useBootstrapStore } from "@/store/bootstrap"
                  import { getImages } from "@/composables/commen/getImages"
                  const store = useBootstrapStore()
const bootstraplist = store.data
})

In your composables imgMixin.ts file all the following code:

export function getImages(path: string) {
return require('@/assets/images/' + path);
}

Inside Your json tags add

{
                  "datatable1": [
  {
    "id": 1,
    "img": "user/1.jpg",
    "firstName": "Ram Jacob",
    "lastName": "Wolfe",
    "userName": "RamJacob@twitter",
    "role": "Developer",
    "company": "Apple Inc.",
    "language": "Php",
    "badgeClass": "badge-light-danger",
    "credit": "$3500.00",
    "borderColor": "border-bottom-secondary",
    "country": "IND"
  },
  {
    "id": 2,
    "img": "user/2.png",
    "firstName": "John Deo",
    "lastName": "Gummer",
    "userName": "JohnDeo@twitter",
    "role": "Designer",
    "company": "Hewlett packard",
    "language": "Html",
    "badgeClass": "badge-light-primary",
    "credit": "$2400.00",
    "borderColor": "border-bottom-success",
    "country": "US"
  },
  {
    "id": 3,
    "img": "user/3.jpg",
    "firstName": "Elana John",
    "lastName": "Cazale",
    "userName": "ElanaJohn@twitter",
    "role": "Designer",
    "company": "Microsoft",
    "language": "Pug",
    "badgeClass": "badge-light-danger",
    "credit": "$2560.00",
    "borderColor": "border-bottom-info",
    "country": "UK"
  },
  {
    "id": 4,
    "img": "user/3.png",
    "firstName": "Meryl Streep",
    "lastName": "Roberts",
    "userName": "MerylStreep@twitter",
    "role": "Developer",
    "company": "Tata Ltd.",
    "language": "React",
    "badgeClass": "badge-light-success",
    "credit": "$1870.00",
    "borderColor": "border-bottom-warning",
    "country": "IDN"
  },
  {
    "id": 5,
    "img": "user/6.jpg",
    "firstName": "Emma Stone",
    "lastName": "Stone",
    "userName": "EmmaStone@twitter",
    "role": "Developer",
    "company": "Wipro Ltd.",
    "badgeClass": "badge-light-primary",
    "language": "Vue",
    "credit": "$4580.00",
    "borderColor": "border-bottom-danger",
    "country": "IRN"
  },
  {
    "id": 6,
    "img": "user/7.jpg",
    "firstName": "Eliana Jons",
    "lastName": "Jons",
    "userName": "ElianaJons@twitter",
    "role": "Developer",
    "company": "Info Ltd.",
    "badgeClass": "badge-light-success",
    "language": "Vue",
    "credit": "$4580.00",
    "borderColor": "border-bottom-light",
    "country": "IRN"
  }
],
}

Sizing table Preview link

You have to change only table sizing class.you can use table-*(sm,lg,xl,xs) class

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Inside Your template tags add

 <tr v-for="(item, index) in bootstraplist" :key="index">
                  <th scope="row">{{ item.id }}</th>
                  <td>{{ item.Name }}</td>
                  <td>{{ item.Date }}</td>
                  <td :class="item.statusClass">{{ item.Status }}</td>
                  <td>{{ item.hours }}</td>
                  <td>{{ item.performance }}</td>
              </tr>

Inside Your script tags add

import { useBootstrapStore } from "@/store/bootstrap"
                
                  const store = useBootstrapStore()
                  const bootstraplist = store.sizing
})

Inside Your json tags add

{
                  "sizingTablesXl": [
 {
   "id": 1,
   "Name": "Mark Jecno",
   "Date": "22/08/2022",
   "Status": "On leave",
   "statusClass": "font-danger",
   "hours": "0",
   "performance": "29/30"
 },
 {
   "id": 2,
   "Name": "Elana Robbert",
   "Date": "21/08/2022",
   "Status": "Present",
   "statusClass": "font-success",
   "hours": "10",
   "performance": "30/30"
 },
 {
   "id": 3,
   "Name": "John Deo",
   "Date": "18/08/2022",
   "Status": "On leave",
   "statusClass": "font-danger",
   "hours": "8",
   "performance": "28/30"
 }
                ]
}

Datatable Offical link 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

<table class="display" id="basic-2">
<thead>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
  </tr>
</thead>
<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>

Inside Your script tags add

import { useDatatableStore } from "@/store/datatable"
 const store = useDatatableStore()
const orderItems = store.data
const elementsPerPage = ref(6)
const currentPage = ref(1)
const filterQuery = ref("")
const allData = ref([])
onMounted(() => {
    allData.value = orderItems;
})
watch(filterQuery, (search: string) => {
    var filteredData = orderItems.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 = orderItems : 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) {
    orderItems.splice(index, 1)
}

Inside Your json tags add

{
 "items": [
    {
      "id": 1,
      "img": "user/1.jpg",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "office": "Hewlett packard",
      "invoice": "#PX0101",
      "startDate": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/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": "2023/04/06",
      "Budget": "$2014.00",
      "salary": "Urgent",
      "credit": "5.3%",
      "ActionClass": "badge-light-danger",
      "iconClass": "icofont-arrow-up",
      "iconColor": "font-success"
    }
  ]
}