Indenting Nested Rows Using Tabulator Wrapper

Anvil Q&A
1

What I’m trying to do:
I am trying to create a tabulator with a nested data tree structure where the first column is indented for _children rows. The formatter on the first column returns an anvil link component. The indentation is working as expected on tabulator wrapper version V2.2.22, but it is broken on versions V3.0 and above.

What I’ve tried and what’s not working:
I have created a sample application to show the problem. I have included multiple formatters to test different anvil components and included a basic tabulator formatter for links (uncomment which formatter you would like to see). Change Tabulator dependency versions from V3+ to V2.22 and see the differences in indentation.

Steps for testing:

  1. Add Tabulator dependency V2.2.22
  2. Uncomment which formatter you want to see
  3. Load app and see indentation working as expected
  4. Switch to V3.0+, reload app and see indentation only works on the generic tabulator “formatter”:“link”

Code Sample:

# this is a formatted code snippet.
# paste your code between ``` 
self.tabulator_1.columns = [
            {
                "title": "Identification",
                "field": "id",
                # "formatter": partial(format_as_button, self),
                # "formatter": partial(format_as_link, self),
                # "formatter": partial(format_as_form, self),
                # "formatter":"link",
            },

Clone link: Anvil | Login
share a copy of your app