header
and data
as well as add cell
configuration slots for each column.
<template>
<Datatable :header="tableHeader" :data="tableData">
<template v-slot:name="{ row: data }">
{{ data.name }}
</template>
<template v-slot:position="{ row: data }">
{{ data.position }}
</template>
<template v-slot:office="{ row: data }">
{{ data.office }}
</template>
<template v-slot:age="{ row: data }">
{{ data.age }}
</template>
<template v-slot:startDate="{ row: data }">
{{ data.startDate }}
</template>
<template v-slot:salary="{ row: data }">
{{ data.salary }}
</template>
</Datatable>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
export default defineComponent({
name: "kt-datatables",
components: {
Datatable,
},
setup() {
const tableHeader = ref([
{
columnName: "Name",
columnLabel: "name",
},
{
columnName: "Position",
columnLabel: "position",
},
{
columnName: "Office",
columnLabel: "office",
},
{
columnName: "Age",
columnLabel: "age",
},
{
columnName: "Start date",
columnLabel: "startDate",
},
{
columnName: "Salary",
columnLabel: "salary",
},
]);
const tableData = ref([
{
name: "Tiger Nixon",
position: "System Architect",
office: "Edinburgh",
age: "61",
startDate: "2011/04/25",
salary: "$320,800",
},
{
name: "Garrett Winters",
position: "Accountant",
office: "Tokyo",
age: "63",
startDate: "2011/07/25",
salary: "$170,750",
},
{
name: "Ashton Cox",
position: "Junior Technical Author",
office: "San Francisco",
age: "66",
startDate: "2009/01/12",
salary: "$86,000",
},
{
name: "Cedric Kelly",
position: "Senior Javascript Developer",
office: "Edinburgh",
age: "22",
startDate: "2012/03/29",
salary: "$433,060",
},
{
name: "Airi Satou",
position: "Accountant",
office: "Tokyo",
age: "33",
startDate: "2008/11/28",
salary: "$162,700",
},
{
name: "Brielle Williamson",
position: "Integration Specialist",
office: "New York",
age: "61",
startDate: "2012/12/02",
salary: "$372,000",
},
{
name: "Herrod Chandler",
position: "Sales Assistant",
office: "San Francisco",
age: "59",
startDate: "2012/08/06",
salary: "$137,500",
},
{
name: "Rhona Davidson",
position: "Integration Specialist",
office: "Tokyo",
age: "55",
startDate: "2010/10/14",
salary: "$327,900",
},
{
name: "Colleen Hurst",
position: "Javascript Developer",
office: "San Francisco",
age: "39",
startDate: "2009/09/15",
salary: "$205,500",
},
{
name: "Sonya Frost",
position: "Software Engineer",
office: "Edinburgh",
age: "23",
startDate: "2008/12/13",
salary: "$103,600",
},
{
name: "Jena Gaines",
position: "office Manager",
office: "London",
age: "30",
startDate: "2008/12/19",
salary: "$90,560",
},
{
name: "Quinn Flynn",
position: "Support Lead",
office: "Edinburgh",
age: "22",
startDate: "2013/03/03",
salary: "$342,000",
},
{
name: "Charde Marshall",
position: "Regional Director",
office: "San Francisco",
age: "36",
startDate: "2008/10/16",
salary: "$470,600",
},
{
name: "Haley Kennedy",
position: "Senior Marketing Designer",
office: "London",
age: "43",
startDate: "2012/12/18",
salary: "$313,500",
},
{
name: "Tatyana Fitzpatrick",
position: "Regional Director",
office: "London",
age: "19",
startDate: "2010/03/17",
salary: "$385,750",
},
{
name: "Michael Silva",
position: "Marketing Designer",
office: "London",
age: "66",
startDate: "2012/11/27",
salary: "$198,500",
},
{
name: "Paul Byrd",
position: "Chief Financial officer (CFO)",
office: "New York",
age: "64",
startDate: "2010/06/09",
salary: "$725,000",
},
{
name: "Gloria Little",
position: "Systems Administrator",
office: "New York",
age: "59",
startDate: "2009/04/10",
salary: "$237,500",
},
{
name: "Bradley Greer",
position: "Software Engineer",
office: "London",
age: "41",
startDate: "2012/10/13",
salary: "$132,000",
},
{
name: "Dai Rios",
position: "Personnel Lead",
office: "Edinburgh",
age: "35",
startDate: "2012/09/26",
salary: "$217,500",
},
{
name: "Jenette Caldwell",
position: "Development Lead",
office: "New York",
age: "30",
startDate: "2011/09/03",
salary: "$345,000",
},
{
name: "Yuri Berry",
position: "Chief Marketing officer (CMO)",
office: "New York",
age: "40",
startDate: "2009/06/25",
salary: "$675,000",
},
{
name: "Caesar Vance",
position: "Pre-Sales Support",
office: "New York",
age: "21",
startDate: "2011/12/12",
salary: "$106,450",
},
{
name: "Doris Wilder",
position: "Sales Assistant",
office: "Sydney",
age: "23",
startDate: "2010/09/20",
salary: "$85,600",
},
{
name: "Angelica Ramos",
position: "Chief Executive officer (CEO)",
office: "London",
age: "47",
startDate: "2009/10/09",
salary: "$1,200,000",
},
{
name: "Gavin Joyce",
position: "Developer",
office: "Edinburgh",
age: "42",
startDate: "2010/12/22",
salary: "$92,575",
},
{
name: "Jennifer Chang",
position: "Regional Director",
office: "Singapore",
age: "28",
startDate: "2010/11/14",
salary: "$357,650",
},
{
name: "Brenden Wagner",
position: "Software Engineer",
office: "San Francisco",
age: "28",
startDate: "2011/06/07",
salary: "$206,850",
},
{
name: "Fiona Green",
position: "Chief Operating officer (COO)",
office: "San Francisco",
age: "48",
startDate: "2010/03/11",
salary: "$850,000",
},
{
name: "Shou Itou",
position: "Regional Marketing",
office: "Tokyo",
age: "20",
startDate: "2011/08/14",
salary: "$163,000",
},
{
name: "Michelle House",
position: "Integration Specialist",
office: "Sydney",
age: "37",
startDate: "2011/06/02",
salary: "$95,400",
},
{
name: "Suki Burks",
position: "Developer",
office: "London",
age: "53",
startDate: "2009/10/22",
salary: "$114,500",
},
{
name: "Prescott Bartlett",
position: "Technical Author",
office: "London",
age: "27",
startDate: "2011/05/07",
salary: "$145,000",
},
{
name: "Gavin Cortez",
position: "Team Leader",
office: "San Francisco",
age: "22",
startDate: "2008/10/26",
salary: "$235,500",
},
{
name: "Martena Mccray",
position: "Post-Sales support",
office: "Edinburgh",
age: "46",
startDate: "2011/03/09",
salary: "$324,050",
},
{
name: "Unity Butler",
position: "Marketing Designer",
office: "San Francisco",
age: "47",
startDate: "2009/12/09",
salary: "$85,675",
},
{
name: "Howard Hatfield",
position: "office Manager",
office: "San Francisco",
age: "51",
startDate: "2008/12/16",
salary: "$164,500",
},
{
name: "Hope Fuentes",
position: "Secretary",
office: "San Francisco",
age: "41",
startDate: "2010/02/12",
salary: "$109,850",
},
{
name: "Vivian Harrell",
position: "Financial Controller",
office: "San Francisco",
age: "62",
startDate: "2009/02/14",
salary: "$452,500",
},
{
name: "Timothy Mooney",
position: "office Manager",
office: "London",
age: "37",
startDate: "2008/12/11",
salary: "$136,200",
},
{
name: "Jackson Bradshaw",
position: "Director",
office: "New York",
age: "65",
startDate: "2008/09/26",
salary: "$645,750",
},
{
name: "Olivia Liang",
position: "Support Engineer",
office: "Singapore",
age: "64",
startDate: "2011/02/03",
salary: "$234,500",
},
{
name: "Bruno Nash",
position: "Software Engineer",
office: "London",
age: "38",
startDate: "2011/05/03",
salary: "$163,500",
},
{
name: "Sakura Yamamoto",
position: "Support Engineer",
office: "Tokyo",
age: "37",
startDate: "2009/08/19",
salary: "$139,575",
},
{
name: "Thor Walton",
position: "Developer",
office: "New York",
age: "61",
startDate: "2013/08/11",
salary: "$98,540",
},
{
name: "Finn Camacho",
position: "Support Engineer",
office: "San Francisco",
age: "47",
startDate: "2009/07/07",
salary: "$87,500",
},
{
name: "Serge Baldwin",
position: "Data Coordinator",
office: "Singapore",
age: "64",
startDate: "2012/04/09",
salary: "$138,575",
},
{
name: "Zenaida Frank",
position: "Software Engineer",
office: "New York",
age: "63",
startDate: "2010/01/04",
salary: "$125,250",
},
{
name: "Zorita Serrano",
position: "Software Engineer",
office: "San Francisco",
age: "56",
startDate: "2012/06/01",
salary: "$115,000",
},
{
name: "Jennifer Acosta",
position: "Junior Javascript Developer",
office: "Edinburgh",
age: "43",
startDate: "2013/02/01",
salary: "$75,650",
},
{
name: "Cara Stevens",
position: "Sales Assistant",
office: "New York",
age: "46",
startDate: "2011/12/06",
salary: "$145,600",
},
{
name: "Hermione Butler",
position: "Regional Director",
office: "London",
age: "47",
startDate: "2011/03/21",
salary: "$356,250",
},
{
name: "Lael Greer",
position: "Systems Administrator",
office: "London",
age: "21",
startDate: "2009/02/27",
salary: "$103,500",
},
{
name: "Jonas Alexander",
position: "Developer",
office: "San Francisco",
age: "30",
startDate: "2010/07/14",
salary: "$86,500",
},
{
name: "Shad Decker",
position: "Regional Director",
office: "Edinburgh",
age: "51",
startDate: "2008/11/13",
salary: "$183,000",
},
{
name: "Michael Bruce",
position: "Javascript Developer",
office: "Singapore",
age: "29",
startDate: "2011/06/27",
salary: "$183,000",
},
{
name: "Donna Snider",
position: "Customer Support",
office: "New York",
age: "27",
startDate: "2011/01/25",
salary: "$112,000",
},
]);
return {
tableHeader,
tableData,
};
},
});
</script>
loading
prop to enable and disable table loading. You
can set loading to true while fetching data from your api.
<template>
<div class="mt-2 mb-1">
<input
class="me-3"
type="radio"
id="enabled"
name="enabled"
:value="true"
v-model="loading"
/>
<label for="enabled">Enable</label>
</div>
<div class="mb-1">
<input
class="me-3"
type="radio"
id="disabled"
name="disabled"
:value="false"
v-model="loading"
/>
<label for="disabled">Disable</label>
</div>
<Datatable
:loading="loading"
:header="tableHeader"
:data="tableData"
:items-per-page-dropdown-enabled="false"
>
<template v-slot:name="{ row: data }">
{{ data.name }}
</template>
<template v-slot:position="{ row: data }">
{{ data.position }}
</template>
<template v-slot:office="{ row: data }">
{{ data.office }}
</template>
<template v-slot:age="{ row: data }">
{{ data.age }}
</template>
<template v-slot:startDate="{ row: data }">
{{ data.startDate }}
</template>
<template v-slot:salary="{ row: data }">
{{ data.salary }}
</template>
</Datatable>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
export default defineComponent({
name: "kt-datatables",
components: {
Datatable,
},
setup() {
const tableHeader = ref([
{
columnName: "Name",
columnLabel: "name",
},
{
columnName: "Position",
columnLabel: "position",
},
{
columnName: "Office",
columnLabel: "office",
},
{
columnName: "Age",
columnLabel: "age",
},
{
columnName: "Start date",
columnLabel: "startDate",
},
{
columnName: "Salary",
columnLabel: "salary",
},
]);
const tableData = ref([
{
name: "Tiger Nixon",
position: "System Architect",
office: "Edinburgh",
age: "61",
startDate: "2011/04/25",
salary: "$320,800",
},
{
name: "Garrett Winters",
position: "Accountant",
office: "Tokyo",
age: "63",
startDate: "2011/07/25",
salary: "$170,750",
},
{
name: "Ashton Cox",
position: "Junior Technical Author",
office: "San Francisco",
age: "66",
startDate: "2009/01/12",
salary: "$86,000",
},
{
name: "Cedric Kelly",
position: "Senior Javascript Developer",
office: "Edinburgh",
age: "22",
startDate: "2012/03/29",
salary: "$433,060",
},
{
name: "Airi Satou",
position: "Accountant",
office: "Tokyo",
age: "33",
startDate: "2008/11/28",
salary: "$162,700",
},
{
name: "Brielle Williamson",
position: "Integration Specialist",
office: "New York",
age: "61",
startDate: "2012/12/02",
salary: "$372,000",
},
{
name: "Herrod Chandler",
position: "Sales Assistant",
office: "San Francisco",
age: "59",
startDate: "2012/08/06",
salary: "$137,500",
},
{
name: "Rhona Davidson",
position: "Integration Specialist",
office: "Tokyo",
age: "55",
startDate: "2010/10/14",
salary: "$327,900",
},
{
name: "Colleen Hurst",
position: "Javascript Developer",
office: "San Francisco",
age: "39",
startDate: "2009/09/15",
salary: "$205,500",
},
{
name: "Sonya Frost",
position: "Software Engineer",
office: "Edinburgh",
age: "23",
startDate: "2008/12/13",
salary: "$103,600",
},
]);
const loading = ref(false);
return {
tableHeader,
tableData,
loading,
};
},
});
</script>
<!-- Instead of key put the actual key which you have setup in header config —>
<!-- data represents current cell object -->
<template v-slot:{key}="{ row: data }">
<span :class="`text-${data.color}`">
{{ data.amount }}
</span>
</template>
<template>
<Datatable
:header="tableHeader"
:data="tableData"
:items-per-page-dropdown-enabled="false"
>
<template v-slot:order="{ row: invoice }">
{{ invoice.order }}
</template>
<template v-slot:amount="{ row: invoice }">
<span :class="`text-${invoice.color}`">
{{ invoice.amount }}
</span>
</template>
<template v-slot:status="{ row: invoice }">
<span :class="`badge badge-light-${invoice.status.state}`">{{
invoice.status.label
}}</span>
</template>
<template v-slot:date="{ row: invoice }">
{{ invoice.date }}
</template>
<template v-slot:invoice>
<button class="btn btn-sm btn-light btn-active-light-primary">
Download
</button>
</template>
</Datatable>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
export default defineComponent({
name: "kt-datatables",
components: {
Datatable,
},
setup() {
const tableHeader = ref([
{
columnName: "Order id",
columnLabel: "order",
},
{
columnName: "Amount",
columnLabel: "amount",
},
{
columnName: "Status",
columnLabel: "status",
},
{
columnName: "Date",
columnLabel: "date",
},
{
columnName: "Invoice",
columnLabel: "invoice",
},
]);
const tableData = ref([
{
date: "Nov 01, 2020",
order: "102445788",
details: "Darknight transparency 36 Icons Pack",
color: "success",
amount: "$38.00",
status: {
label: "Pending",
state: "warning",
},
},
{
date: "Oct 24, 2020",
order: "423445721",
details: "Seller Fee",
color: "danger",
amount: "$-2.60",
status: {
label: "Failed",
state: "danger",
},
},
{
date: "Oct 08, 2020",
order: "312445984",
details: "Cartoon Mobile Emoji Phone Pack",
color: "success",
amount: "$76.00",
status: {
label: "Pending",
state: "warning",
},
},
{
date: "Sep 15, 2020",
order: "312445984",
details: "Iphone 12 Pro Mockup Mega Bundle",
color: "success",
amount: "$5.00",
status: {
label: "Success",
state: "success",
},
},
{
date: "May 30, 2020",
order: "523445943",
details: "Seller Fee",
color: "danger",
amount: "$-1.30",
status: {
label: "Failed",
state: "danger",
},
},
{
date: "Apr 22, 2020",
order: "231445943",
details: "Parcel Shipping / Delivery Service App",
color: "success",
amount: "$204.00",
status: {
label: "Pending",
state: "warning",
},
},
{
date: "Feb 09, 2020",
order: "426445943",
details: "Visual Design Illustration",
color: "success",
amount: "$31.00",
status: {
label: "Pending",
state: "warning",
},
},
{
date: "Nov 01, 2020",
order: "984445943",
details: "Abstract Vusial Pack",
color: "success",
amount: "$52.00",
status: {
label: "Success",
state: "success",
},
},
{
date: "Jan 04, 2020",
order: "324442313",
details: "Seller Fee",
color: "danger",
amount: "$-0.80",
status: {
label: "Failed",
state: "danger",
},
},
]);
return {
tableHeader,
tableData,
};
},
});
</script>
table-header
prop.
Name | Description | Type | Required |
---|---|---|---|
columnName | Name of the filed, it will be displayed as a name of column in table. | String | - |
columnLabel | Column label, used in named slots. | String | + |
sortEnabled | Enable sorting for specific column. | Boolean | - |
columnWidth | Specify column width. | Number | - |
Name | Description | Parameters |
---|---|---|
page-change | triggers when page is changed | page number |
on-sort | triggers when column is clicked |
object with order and
label properties
|
on-items-select | triggers when users checks a checkbox in the table header | array with checked elements ids |
on-items-per-page-change | triggers when items per page is changed | rows per page |
Name | Description | Type | Required | Default |
---|---|---|---|---|
header | table header configuration | Array | + | - |
data | data to display in table | Array | + | - |
empty-table-text |
text which will be displayed when data prop empty
|
String | - | No data found |
loading | enables loading | Boolean | - | false |
items-per-page-dropdown-enabled | enable items per page dropdown | Boolean | - | true |
total | total items in table | Number | - | 0 |
items-per-page | set how many rows display per page, accepts 10/25/50 | Number | - | 10 |
sort-order | set sorting order, accepts asc/desc | String | - | asc |
sort-label | sets currently sorted column | String | - | null |
current-page | sets currently selected page | Number | - | 1 |