Error when adding a row to Tabulator after upgrading to Tabulator 6.x

Anvil Q&A
1

What I’m trying to do:
I am trying to add a new row to a Tabulator table in Anvil. The table displays correctly, and I want to add rows programmatically using Python within an Anvil app. This method of adding rows used to work in Tabulator version 4.9, but I recently upgraded to a newer version.

What I’ve tried and what’s not working:
I’ve been able to initialize the Tabulator table, but when I try to add a row, I get an error in the console: The row component does not have a sk$object function, have you checked that you have the correct Tabulator module installed? and The row component does not have a $isPyWrapped function, have you checked that you have the correct Tabulator module installed?. This happens even though the row is successfully added to the table’s UI. I’m not sure if this is an issue with how I’m adding rows or a deeper issue with compatibility between the Python code and Tabulator.

Code Sample:

from ._anvil_designer import TabulatorTemplate
from anvil.js.window import Tabulator as _Tabulator
from anvil.js import get_dom_node as _get_dom_node

class Tabulator(TabulatorTemplate):
    def __init__(self, **properties):
        self._table_init = False
        el = self._el = _get_dom_node(self)
        
        # Basic initialization with columns set from properties
        self.init_components(**properties)
        self.columns = properties.get("columns", [])         
        
        t = _Tabulator(el, {})
        t.anvil_form = self
        self._table = t
        
        self._table.on("tableBuilt", self.on_table_built)

    def on_table_built(self):
        """Callback when the table is fully built."""
        self._table_init = True
        row = {'id': 1}
        self._table.addRow(row)  # error originates from here

Clone link:
share a copy of your app

Would appreciate your help!

2

It’s an error message, but it doesn’t lead to any errors

You can turn that off by setting the debugInvalidComponentFuncs to false

_Tabulator(el, {"debugInvalidComponentFuncs": False})

What’s happening here, when we do the python ↔ javascript conversion, we ask some questions about the object.
And when tabulator is being asked those questions, it’s producing console.error output because it doesn’t have the properties we’re asking for, and it’s being “helpful” to the developer.

This doesn’t result in actual errors in your program
But it does result in annoying console errors

I would recommend the Tabulator wrapper library that will do a lot of this work for you

GitHub - anvilistas/tabulator: Anvil Wrapper for Tabulator

1 Like
3

Thanks for the explanation!