VueJS Demos don’t contain working Datatable Demo

None of the VueJS demos have a working data table that is able to filter via the search

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (12)

Hi,

You can find Datatable usage example on the page:
https://preview.keenthemes.com/metronic8/vue/demo1/#/apps/customers/customers-listing

This is a page made for demo purposes, in your application you should handle search on your server.

Here is my logic and it just doesn't seem to be working. My API call does return new datasets but the DataTable is never updated.


<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>

After debugging this, it looks like the Datatable doesn't ever trigger the watch event when the data gets updated. Can you please look into this? The same exact implementation works with other data tables

I've had to change this line in your DataTable implementation


const data = ref(props.tableData);

to

const data = computed(() => props.tableData);

Hi,

Thank you for your feedback.

We will take a look at this issue.

Could you please attach a code with your fetch function?

The code is above. with LIST_PROJECTS

const projects = computed<Array<IProject>>(() => {
return store.getters.currentProjects || [] as Array<IProject>
})

Which looks like

@Action
[Actions.LIST_PROJECTS](req: AxiosRequestConfig) {
return ApiService.post("/v1/projects/list", req)
.then(({ data }) => {
this.context.commit(Mutations.SET_PROJECTS, data.projects);
})
.catch(({ response }) => {
this.context.commit(Mutations.SET_ERROR, response.data);
});
}

The datatable also doesn't update page count or selection if say I am on page 5 and then I do server side filtering and return only 1 page of data. The DataTable still shows 5 pages and 5 being selected

Hello Zachary Schultz,

Have you had success with the implementation of DataTable from View Demo fully functional?

because I have also implemented, and whenever I go to page any other than 1 and then if I change rows per page from 10 to 25 or any other then datatable becomes empty because server side The call understands that the page number is on 2 and the record is 25, but there are only 20 records in the database so it will happen that there will be 25 on the first page and 25 on the second.

I have implemented an element plus data table for the same scenario and it works fine but I am facing a problem with the demo datatable provided.

I don't implement server-side pagination and that is handled client side at the moment. But I do run into the issue where page numbers and selection isn't updated when the data changes.

Care to share your element plus example?

<el-table :data="tableData" v-loading="loading">
<template #empty="scope">
<el-empty :image-size="200" />
</template>
<el-table-column type="index" sortable label="Sr#" />
<el-table-column prop="name" sortable label="Name"></el-table-column>
<el-table-column prop="email" sortable label="Email"></el-table-column>
<el-table-column prop="website" sortable label="Website"></el-table-column>
<el-table-column prop="action" label="Actions">
<template #default="scope">
<el-button type="text" size="small" @click.prevent="$router.push({ name: 'edit', params: { id: scope.row.id } })" ><i class="bi bi-pencil-square"></i></el-button>
<el-button type="text" size="small" @click.prevent="remove(scope.row.id, scope.$index)"><i class="bi bi-trash"></i></el-button>
</templat<pre lang="html">
e>








Hi Priyank,

Yes, it looks like there is an issue in KTDatatables, we will check this and fix it in upcoming releases.

Hi,

Yes look like there is an issue in KTDatatables, we will check this and fix it in upcoming releases.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(