Table Editor Plug in not working with Async data

Topic: Table Editor Plug in not working with Async data

alejandro.primera priority asked 1 year ago

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

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

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 <code>asyncData</code> aswell as rows. For example (I will base this on the example from our documentation:

<a href="https://mdbootstrap.com/docs/vue/plugins/table-editor/#section-async-data" target="_blank">https://mdbootstrap.com/docs/vue/plugins/table-editor/#section-async-data</a>):

If we were to set the columns at the beginning like that:

<pre class="prettyprint"><code>const asyncData = ref({
 columns: [
 { label: "test1", field: "test1" },
 { label: "test2", field: "test2" },
 { label: "test3", field: "test3" },
 { label: "test4", field: "test4" },
 ],
 rows: [],
});
</code></pre>

We can change them later when fetching data from API:

<pre class="prettyprint"><code>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" },
 ];
 [...]
 });
};
</code></pre>

Hope it works for you! If not, please show us some code sample so we could look where the problem might lie. Best Regards!

Please insert min. 20 characters.

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 priority commented 1 year 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

Please insert min. 15 characters.

Bartosz Cylwik staff commented 1 year 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!

Please insert min. 15 characters.

alejandro.primera priority commented 1 year 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 1 year 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!

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

alejandro.primera

0Support score
2Questions 1Answers 1Snippets