Topic: Table Editor Plug in not working with Async data
Expected behavior The table editor is expected to be able to add/update new rows when the new data from an api changes - the columns and rows are likely to change as well
Actual behavior the table editor works only when the columns are already pre-defined before calling the api. If the api returns a different table structure/metatdata (different columns and type of columns), functionalities like add /update do not work. I hope you are able to reproduce this issue. Any workaround would also be appreciated.
Resources (screenshots, code snippets etc.)
Hi! Table editor require proper field names that will exist in your data that you are fetching (or providing in script tag). If your columns are going to change after API call, then you can update the columns in asyncData aswell as rows. For example (I will base this on the example from our documentation:
https://mdbootstrap.com/docs/vue/plugins/table-editor/#section-async-data):
If we were to set the columns at the beginning like that:
const asyncData = ref({
columns: [
{ label: "test1", field: "test1" },
{ label: "test2", field: "test2" },
{ label: "test3", field: "test3" },
{ label: "test4", field: "test4" },
],
rows: [],
});
We can change them later when fetching data from API:
const loadAsyncData = () => {
asyncData.value.rows = [];
loadingAsync.value = true;
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => {
asyncData.value.columns = [
{ label: "Company", field: "company" },
{ label: "Email", field: "email" },
{ label: "Name", field: "name" },
{ label: "Phone", field: "phone" },
];
[...]
});
};
Hope it works for you! If not, please show us some code sample so we could look where the problem might lie. Best Regards!
alejandro.primera pro premium priority commented 2 years ago
Many thanks for your response. I am able to create the new table with the new headers, however, the problem I am facing is with the events add and update. After digging into the data I notice that these events are not triggered if at least one column contains no data, the only way to trigger the event is by adding the data to all the columns. I copied and paste the example "Notifications" posted in the documentation and the problems seems to be reproduced: Add/updateEvent not triggered unless all data column is input. Please let me know if you are able to reproduce this issue or I am missing something in the process. Thank you
Bartosz Cylwik staff commented 2 years ago
Hi, yes I can see that when atleast one of the inputs is empty, the array that contains all the rows is not updating and that makes the row to not emit any events. I have added this issue to our list so we can check what is going on there.
Maybe as a workaround you could create a method that would on button click pass some valid data for example:
const addNewRow = () => {
asyncEditorRef.value?.addRow({
company: " ",
email: " ",
name: " ",
phone: " ",
});
};
and assign it to the add button like that:
<MDBBtn
color="primary"
size="sm"
class="ms-3"
@click="addNewRow"
:disabled="asyncEdit"
>
instead of
<MDBBtn
color="primary"
size="sm"
class="ms-3"
@click="asyncEditorRef?.addRow()"
:disabled="asyncEdit"
>
Best Regards!
alejandro.primera pro premium priority commented 2 years ago
Hi, Thank you for your prompt response and workaround. This workaround will allow me to take control of the add row event - Thanks for this! :). What would be now the way to handle the udpdateEntry event? the issue is also happening here, Thanks
Bartosz Cylwik staff commented 2 years ago
Hi, you mean the update event from our documentation? It is working for me. The only thing I can see is when you change the columns content, i.e. by the API call - then it's not emitting. You have to make sure to change the field names in the addNewRow method (from my previous response) after an API call.
If the event is still not triggering, you can try to set a watcher with something like that:
watch(
() => asyncData.value.rows,
(cur, prev) => {
// simple ref value, that will be set to true after getting data from API
if (!dataReceived.value) {
return;
}
console.log("data updated - watcher");
if (prev.length < cur.length) {
console.log("item added - watcher");
}
}
);
Let me know if any of that helps. Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 3.2.0
- Device: Apple M1
- Browser: Chrome
- OS: Ventura
- Provided sample code: No
- Provided link: No