Table

PRO

The Table component helps you to simply create a beautiful table for your data.

Demo

Author	Function	Status	Employed	Action
John Michael [email protected]	Manager Organization	Online	23/04/18	Edit
Alexa Liras [email protected]	Programator Developer	Offiline	11/01/19	Edit
Laurent Perrier [email protected]	Executive Projects	Online	19/09/17	Edit
Michael Levi [email protected]	Programator Developer	Online	24/12/08	Edit
Richard Gran [email protected]	Manager Executive	Offline	04/10/21	Edit
Miriam Eric [email protected]	Programator Developer	Offline	14/09/20	Edit

<script setup>
// Vue Material Kit 2 component
import Table from "@/examples/tables/Table.vue";

// images
import team2 from "@/assets/img/team-2.jpg";
import team3 from "@/assets/img/team-3.jpg";
import team4 from "@/assets/img/team-4.jpg";

// table data
const tableData = {
  headers: ["Author", "Function", "Status", "Employed", "Action"],
  rows: [
    {
      image: team2,
      name: "John Michael",
      email: "john@creative-tim.com",
      position: ["Manager", "Organization"],
      status: true,
      date: "23/04/18",
      action: { label: "Edit", route: "/" },
    },
    {
      image: team3,
      name: "Alexa Liras",
      email: "alexa@creative-tim.com",
      position: ["Programator", "Developer"],
      status: false,
      date: "11/01/19",
      action: { label: "Edit", route: "/" },
    },
    {
      image: team4,
      name: "Laurent Perrier",
      email: "laurent@creative-tim.com",
      position: ["Executive", "Projects"],
      status: true,
      date: "19/09/17",
      action: { label: "Edit", route: "/" },
    },
    {
      image: team3,
      name: "Michael Levi",
      email: "michael@creative-tim.com",
      position: ["Programator", "Developer"],
      status: true,
      date: "24/12/08",
      action: { label: "Edit", route: "/" },
    },
    {
      image: team2,
      name: "Richard Gran",
      email: "richard@creative-tim.com",
      position: ["Manager", "Executive"],
      status: false,
      date: "04/10/21",
      action: { label: "Edit", route: "/" },
    },
    {
      image: team4,
      name: "Miriam Eric",
      email: "miriam@creative-tim.com",
      position: ["Programator", "Developer"],
      status: false,
      date: "14/09/20",
      action: { label: "Edit", route: "/" },
    },
  ],
};
</script>
<template>
  <Table v-bind="tableData" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import Table from "@/examples/tables/Table.vue";
4
5// images
6import team2 from "@/assets/img/team-2.jpg";
7import team3 from "@/assets/img/team-3.jpg";
8import team4 from "@/assets/img/team-4.jpg";
9
10// table data
11const tableData = {
12  headers: ["Author", "Function", "Status", "Employed", "Action"],
13  rows: [
14    {
15      image: team2,
16      name: "John Michael",
17      email: "[email protected]",
18      position: ["Manager", "Organization"],
19      status: true,
20      date: "23/04/18",
21      action: { label: "Edit", route: "/" },
22    },
23    {
24      image: team3,
25      name: "Alexa Liras",
26      email: "[email protected]",
27      position: ["Programator", "Developer"],
28      status: false,
29      date: "11/01/19",
30      action: { label: "Edit", route: "/" },
31    },
32    {
33      image: team4,
34      name: "Laurent Perrier",
35      email: "[email protected]",
36      position: ["Executive", "Projects"],
37      status: true,
38      date: "19/09/17",
39      action: { label: "Edit", route: "/" },
40    },
41    {
42      image: team3,
43      name: "Michael Levi",
44      email: "[email protected]",
45      position: ["Programator", "Developer"],
46      status: true,
47      date: "24/12/08",
48      action: { label: "Edit", route: "/" },
49    },
50    {
51      image: team2,
52      name: "Richard Gran",
53      email: "[email protected]",
54      position: ["Manager", "Executive"],
55      status: false,
56      date: "04/10/21",
57      action: { label: "Edit", route: "/" },
58    },
59    {
60      image: team4,
61      name: "Miriam Eric",
62      email: "[email protected]",
63      position: ["Programator", "Developer"],
64      status: false,
65      date: "14/09/20",
66      action: { label: "Edit", route: "/" },
67    },
68  ],
69};
70</script>
71<template>
72  <Table v-bind="tableData" />
73</template>

Props Information

Name	Type	Default	Description
headers	array		used to set `Table` headers.
rows*	array		Used to set the `Table` rows. It accepts the following keys: `image` of type string. `name` of type string. `email` of type string. `date` of type string. `status` of type boolean. `position` of type array. `action` of type object with with label and route keys.