Replace Data

[lewysigns]

When using replace_data per the tabulator docs here. It should silently update your table, meaning it will not change scroll position, filtering, or sorting, given the height is set on the table. However, I'm finding the implementation to act just as set_data does.

Has anyone successfully used replace data? I can find the page/sort/filter before updating the data and then set it post update, but this still causes jitter and change in scroll position.

I'm working on a clone now, to illustrate the issue.

[s-cork]

yes please - tried it on the demo app, and worked as expected for me

[lewysigns]

Here I am trying to show that if you scroll down on your table and then an update is set, the scroll position will not stay. Sort however, does seem to stay.

Here is the clone:

https://anvil.works/build#clone:TX5IJADW5BLXJTRB=IGU6N4GJMVJGZXZHMS4NRCBH

[lewysigns]

I am able to silently update the table using update_or_add_data(). However, this does not fire the mutators and adds an additional step to delete data, if it is missing in the update.

[lewysigns]

I was able to acheive the desired functionality by doing the following:

1. manually adding any mutated data to my data set
2. adding that data using the update_or_add_data method
3. tracking any data that existed in my data table previous to the update and deleting that data with the delete_row method.

  def update_func(self,data):
    if self.init_flag and self.tab.tabulator.initialized: #ignore this conditional, it is project specific, not related to this post
      if self.tab.tabulator.data:
        tab_data = self.tab.tabulator.get_data()
        tab_data = tab_data.copy()
        for d in data: 
          for td in tab_data:
            if d['id'] == td['id']:
              tab_data.remove(td) # removing similar ids in the tab_data , so at the end of the iteration, I'm left with a list of data that is not part of this update.
          d['dod'] = self.get_dod(None,d)   #manual mutation       
         self.tab.tabulator.updateOrAddRow(d['id'],d)
        self.tab.tabulator.deleteRow([td['id'] for td in tab_data])
      else:
        self.tab.tabulator.data = data

[s-cork]

Looking at the docs for tabulator

Note The replaceData function will only maintain scroll position when the Vitrual DOM has been enabled by setting a height on the table.

but if you're using pagination, it turns out the virtual dom is not enabled, and so scroll position is not maintained
if you use infinite scroll i.e.

    self.tabulator.options = {
      "height":600,
      "pagination": False,
      "progressive_load": "scroll", # load data into the table as the user scrolls
      "progressive_load_scroll_margin": 300, # trigger next data request when 
    }

then it works as expected

You seem to have hacked together a solution
here's another one

from anvil.js import get_dom_node


def replace_data_btn_click(self, **event_args):
    el = get_dom_node(self.tabulator)
    holder = el.querySelector(".tabulator-tableholder")
    scrollTop = holder.scrollTop
    self.tabulator.replace_data(...)
    holder.scrollTop = scrollTop

[lewysigns]

but if you're using pagination, it turns out the virtual dom is not enabled, and so scroll position is not maintained.
if you use infinite scroll i.e.

This was it! Thank you for educating me.