<ProjectDatatable
 :table-data="projects"
 :table-header="headerConfig"
 :enable-items-per-page-dropdown="true"
 >
....

<script lang="ts">
 import { defineComponent, ref, onMounted, computed } from "vue";
 import { Actions } from "@/store/enums/StoreEnums";
 import { useStore } from "vuex";
 import IProject from "@/core/data/projects";
 import ProjectDatatable from "@/components/kt-datatable/ProjectDatatable.vue";
 import KTNewProjectModal from "@/components/modals/forms/NewProjectModal.vue";
 import { setCurrentPageBreadcrumbs } from "@/core/helpers/breadcrumb";

 export default defineComponent({
 name: "kt-project-list",
 components: {
 ProjectDatatable,
 KTNewProjectModal
 },
 async setup() {
 const headerConfig = ref([
 {
 name: "Project Name",
 key: "project-name",
 sortable: true,
 },
 {
 name: "Project UUID",
 key: "project-uuid",
 sortable: true,
 },
 {
 name: "Tags",
 key: "tags",
 sortable: true,
 },
 {
 name: "Status",
 key: "status",
 sortable: true,
 },
 {
 name: "Size",
 key: "size",
 sortable: true,
 },
 {
 name: "Actions",
 key: "actions",
 },
 ]);
 const tableData = ref<Array<typeof IProject>>([]);
 const projects = computed<Array<typeof IProject>>(() => store.getters.currentProjects || []);

 onMounted(() => {
 setCurrentPageBreadcrumbs("Project List", ["Projects"]);
 });

 const store = useStore();
 await store.dispatch(Actions.LIST_PROJECTS, {});

 const search = ref<string>("");
 const searchItems = async () => {
 if (search.value !== "") {
 await store.dispatch(Actions.LIST_PROJECTS, {
 filter: [
 {
 field: "FILTER_FIELDS_NAME",
 operation: "FILTER_OPERATION_CONTAINS",
 value: search.value
 }
 ]
 });
 } else {
 await store.dispatch(Actions.LIST_PROJECTS, {});
 }
 };

 return {
 projects,
 search,
 searchItems,
 headerConfig,
 tableData
 };
 },
 methods: {
 limitTags: function (project) {
 return project.tags.slice(0, 3)
 },
 projectStatusToColor: function (status: string) {
 switch(status) {
 case "STATUS_UNSPECIFIED": {
 return "info"
 }
 case "STATUS_IN_PROGRESS": {
 return "warning"
 }
 case "STATUS_AWAITING_FEEDBACK": {
 return "primary"
 }
 case "STATUS_BLOCKED": {
 return "danger"
 }
 case "STATUS_APPROVED": {
 return "success"
 }
 case "STATUS_ARCHIVED": {
 return "danger"
 }
 default: {
 return "info"
 }
 }
 },
 projectStatusToStatus: function (status: string) {
 switch(status) {
 case "STATUS_UNSPECIFIED": {
 return "Unspecified"
 }
 case "STATUS_IN_PROGRESS": {
 return "In Progress"
 }
 case "STATUS_AWAITING_FEEDBACK": {
 return "Awaiting Feedback"
 }
 case "STATUS_BLOCKED": {
 return "Blocked"
 }
 case "STATUS_APPROVED": {
 return "Approved"
 }
 case "STATUS_ARCHIVED": {
 return "Archived"
 }
 default: {
 return "Unspecified"
 }
 }
 },
 projectSizeToSize: function (size: string) {
 switch(size) {
 case "SIZE_UNSPECIFIED": {
 return "Unspecified"
 }
 case "SIZE_SMALL": {
 return "Small"
 }
 case "SIZE_MEDIUM": {
 return "Medium"
 }
 case "SIZE_LARGE": {
 return "Large"
 }
 case "SIZE_XLARGE": {
 return "X-Large"
 }
 default: {
 return "Unspecified"
 }
 }
 },
 }
 });
</script>