Tabulator - with anvil components

Show and Tell
1

UPDATE Jul 2021: This app is available as a third party dependency using the token TGQCF3WT6FVL2EM2

Since a previous post on tabulator i’ve been working on some features to use anvil components within tabulator cells, which I thought might deserve it’s own post.

Tabulator Javascript Datagrid Integration - #9 by stucork

Tabulator is a javascript library - similar to the anvil datagrid - it’s been around longer than the anvil datagrid so has a few bonus features and advantages

tabulator advantages

  • it seems faster to render
  • it has great out of the box features (filtering, sorting, grouping, pagination size selector, current page)
  • dynamically add and delete rows

disadvantages:

  • cell components are limited to the available formatters/editors provided by tabulator (unless you fancy writing your own in javascript :face_with_raised_eyebrow:
  • whereas anvil datagrid rows allow for custom components and python workflow :trophy:

so I figured It would be nice to be able to combine the advantages that come with tabulator with custom components from Anvil. :exploding_head:

Below you can see 3 custom cell components which are anvil components and forms!

dUI1tczbk4

How does it work:

  • when you set up a tabulator you provide column details as a list of dicts

column keys can be found in the tabulator docs but some include:

  • field
  • title
  • formatter (the component to display)
  • editor (the component to display when the cell is clicked)
    from ..DOB import DOB
    from ..FavColor import FavColor
    
    self.tabulator.columns = [
...
      {'title':"Favourite Color", 'field':"col", 'editor':FavColor},
      {'title':"Date Of Birth", 'field':"dob",  'editor': DOB,   'align':"center", 'sorter':"date"},
...
      {'field':'delete', 'formatter': Link, 'formatterParams':{'icon':'fa:trash', 
                                                               'foreground':'indianred', 
                                                               'spacing_above': 'none', 
                                                               'spacing_below':'none'} , 'width': 40, 'headerSort':False}
    ]

Above are the columns that have custom Anvil Components…

the delete Link component doesn’t really do anything apart from look like a trash icon
the tabulator has an event cell_clicked and the code is as follows:

  def tabulator_cell_click(self, **event_args):
    """This method is called when a cell is clicked - event_args include field and row"""
    if event_args['field'] == 'delete':
        c = confirm('are you sure you want to delete this row?')
        if c:
          self.tabulator.delete_row(event_args['row']['id'])

The DOB form is more interesting

  • DOB form is a blank panel with a datepicker component
  • its item property is set to the row data.
  • it sets the datepicker.date attribute based on self.item['dob'] using a databinding.
  • on change it:
    • calls self.parent.update_row (the parent is the tabulator component)
    • raises the event 'x-close-editor'

Here’s the Dependency and the Example if you want to explore the code more…

https://example-tabulator.anvil.app # live example

@david.wylie and I have been using it in our own projects.

If you have end up using it - Feel free to request any features or ask any questions…

19 Likes