Using getIndex with Tabulator

Anvil Q&A
1

Is there a way to get the cell object instead of a dictionary of the cell object using this library on cell_click?

I was looking at the github repo : link

    def cell_click(self, e, cell):
        return self.raise_event(
            "cell_click", field=cell.getField(), row=dict(cell.getData())
        )

It looks like all of the properties get the data of the cell and converts it to a dictionary.

2

Expanding on this a little.

I made my own copy of the tabulator anvil app to use as a dependency.

In this copy, I made the following changes:

    def cell_click(self, e, cell):
        return self.raise_event(
            "cell_click", field=cell.getField(), row=cell)
        )

However, when I attempt to get the index of the cell I get the following error:

AttributeError: 'a (native JS)' object has no attribute 'getIndex'

I was trying to follow the tabulator documentation: link

Get Index
The getIndex function returns the index value for the row. (this is the value from the defined index column, NOT the row's position in the table)

var rowIndex = row.getIndex();

Is cell now a tabulator row object? Or does there need to be a change in the anvil JS code to access this attribute?

3

Reading into this a bit more.

I can get the row object from my cell object by calling cell.getRow()

HOWEVER,

row.getIndex() returns None. The index is default to the id parameter passed into the table when the data is read, but can be overwritten by when instantiating the Tabulator Object with the argument index : <put in your id string here>

This argument is used in the Tabulator app (This is my tweaked version from here the anvil-tabulator post)

https://anvil.works/build#clone:LGFVYBV6AAFTQIFQ=VTBVLOVD7KMKFZL6FL4CJ2ZG

it is defined as self._index which I believe is an attribute divided in the anvil.js.window.Tabulator Class but I am not sure how use it.

4

I have a “Solution”, not sure if this is the best way to do this.

Here I changed cell_click to return the cell instead of the row data in dictionary form.

This allows me to call cell.getRow() to get the row object. Then I can run row.update(<new data dictionary>) on the row object to update my table. I was attempting to update using tabulator.update_row(), but this requires you to know the index and I could not figure out how the indexing works with this Tabulator Wrapper.

Here is the code working:


  def tabulator_company_cell_click(self, field, cell, **event_args):
    """This method is called when a cell is clicked - event_args include field and row"""

    if field =='edit':
      form = get_open_form()
      row_data = dict(cell.getData())
      alert(content=EditCustomer(prev_form=form,cust_id=row_data['_id'],),
          large=True,buttons=[])
      if self.row_updated_flag:
        data = anvil.server.call('get_tabular_company_by_id',row_data['_id'])
        row = cell.getRow()
        row.update(data[0])
      self.row_updated_flag = False

Here I have table with an “edit” column which opens my EditCustomer form as an alert. There the user can edit the customer. When they click “Save Changes” in this form it closes the alert and publishes a message to my tabulator form which then sets the self.row_update_flag to True. I then grab the updated data from my server and update the row in my table.

I could potentially avoid changing the Tabulator Wrapper source code if I could figure out how to get the index of the row and understand how the self._index attribute works in the Tabulator class. I would like to keep my dependencies to the github repo, but this a work around for those trying the same.

Thanks!

5

Hi @lsaenz9104, great to see you using the dependency. I’d suggest the best way to approach this is make an issue at the GitHub repo. Then either submit a pr or make a feature request that can be implemented there. You’ll see in the issues and pull requests that others have also contributed to the project.

Keeping you’re own copy can be useful but as you start to make tweaks - If the source code changes with bug fixes and such you’ll have a version that you’ll always need to compare and update if it starts to diverge. Whereas submitting things to the GitHub repo will mean it becomes part of the main dependency and you and others will be able to benefit.

the row object in event handlers is a dictionary rather than the JavaScript object. But adding extra parameters is fairly straight forward because of event_args.

Looking forward to the GitHub issue submission.

2 Likes