Updating data in Datatable

Topic: Updating data in Datatable

xornor pro asked 6 years ago

I have added Datatable to template of my Suppliers component:

<mdb-datatable
      :data="suppliers"
      striped
      bordered
    />

Initialized test data is shown as expected.

data () {
return {
  suppliers: {
    columns: [
      {
        label: '#',
        field: 'supplierNumber',
        sort: 'asc'
      },
      {
        label: 'Nimi',
        field: 'supplierName',
        sort: 'asc'
      }
    ], 
    rows: [
      {"supplierNumber":1,"supplierName":"Test"},{"supplierNumber":1,"supplierName":"Test2"}
    ]
  }
};

But when I update data in suppliers.rows, nothing happens in the table view.

How I can get automatic updates to work with the Datatable -component?

Jakub Strebeyko staff commented 6 years ago

Hi there @xornor, Thanks for reaching out! This is intriguing - it could have to do with one of the trickiest parts of Vue to grasp, namely - the asychronicity of data reactiveness. But don't take my word for it - please, check whether the data changes in Vue devtools. Also, could you shed some light on how exactly are you changing it? For example, the following works (the base is taken from our demo):

<button @click="increaseTigerNixonAge()">Increase tiger nixon age</button>
...
increaseTigerNixonAge() {
  console.log(this.data.rows[0].age);
  this.data.rows[0].age = Number(this.data.rows[0].age) + 1;
}

With Best Regards, Kuba

xornor pro commented 6 years ago

I have tried to update whole rows-array. For example, clearing it completely:

this.suppliers.rows = [];

or updating it after the REST -request:

this.data.suppliers = { rows: response.data.map(function(v) { return { supplierNumber: v.supplierNumber, supplierName: v.supplierName }; }) }

Perhaps, Datatable has not been designed to handle complete data reset?

Jakub Strebeyko staff commented 6 years ago

hi there xornor,

Thanks for pointing that out! It seems that a pretty heavily computed filteredRows property does not get properly updated - I am labeling it as a bug to be resolved in the upcoming sprints.

With Best Regards, Kuba

xornor pro commented 6 years ago

Hi,I was able to fix the problem by creating a new props-variable to the Datatable and modifying the code little bit. However, I am not sure why original implementation did not work because it was pretty similar with my solution.

Jakub Strebeyko staff commented 6 years ago

Hi there! I honestly am not sure why wouldn't it work either - so happy you figured it out! If it works as expected and you have access to our GitLab, could you maybe submit a merge request? I would love to see the solutions side by side and figure out what was the problem.

Best

Orly commented 6 years ago

Hi, I think I might have the same problem...Did you update your git library? best, Orly.

Magdalena Dembna staff premium commented 6 years ago

Datatables have been updated several times over the last few months - can you specify which version you're using, @Orly?

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

User: Pro
Premium support: No
Technology: MDB Vue
MDB Version: 5.1.0
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

xornor

Pro User

5Support score
1Questions 0Answers

0Snippets likes 0Snippets