Anvil Tabulator - How to handle dates and datetimes?

Anvil Q&A
1

This might be a question for @stucork … I wasn’t sure if Anvil Forum or GH Issue would be better, so I am starting with Anvil forum, since I am trying to do this in an Anvil app.

What I’m trying to do:
I am trying to use Anvil Tabulator with data that has dates as strings. I am also trying to avoid iterating through the list of JSON records, effectively pre-processing the data prior to setting data on tabulator component.

The data is coming from an API call which returns date data as strings.

I’d like start_date to be handled with date-picker as per the examples.

Sample Data

[{'name': 'Parkview Lofts', 'max_budget': 630, 'active': True, 'start_date': '2022-08-01', 'end_date': None, 'id': '1db75f03-bdd0-4c9f-8037-4aae1464618e',  ...

and I am trying to set this on the tabulator.data property.

I know Anvil wrapper has overrides for dates & Datetimes as per the info here:

all combinations of formatter and formatter_params don’t seem to parse the string into dates for me.

Any advice on how to do this ?

Looping through the list prior to loading into tabulator … I worry about performance as list length grows …

Is there an easy way to circumvent the over-rides built into Anvil Tabulator Wrapper? to lean into Luxon.js as per the Tabulator docs

Is there a way to pass in a Callable which will parse the date string and create a Python Date or Datetime object?

This is the current configuration of my Tabulator component … with remnants of previous trial & error cycles …


      {"title": "Start Date", 
       "field": "start_date",
       # "editor": "date",
       # "sorter": "date",
       "formatter": "date",
       "formatter_params": {"format": "%Y-%m-%d"},
      
       # "formatterParams": {"inputFormat":"yyyy-MM-ddTHH:mm:ss.SSSSSS",
       #                     # "outputFormat": "dd/MM/yyyy",
       #                     # "timezone":"America/Los_Angeles",
       #                     "invalidPlaceholder": "foo",
       #                    },
       # "editorParams": {"min": "01/08/2022", "format": "dd/MM/yyyy"},

As I said at the top, hoping the answer is not to iterate the list parsing every date record prior to using Tabulator component…

Any advice appreciated and thanks in advance.

Cheers,
Tyler

2

I’m by no means a Tabulator expert, but I think what you want is a mutator for the column. That’ll allow you to convert it to a date as Tabulator builds its data structure.

3

If you want to display your objects using an Anvil date picker, then you have to convert them anyways. I would be extremely surprised if this led to any kind of performance hit (it’s a cheap operation and you’re almost certainly going to find your API call is going to be your bottleneck).

Regardless, you should be able to do something like:

def get_datepicker(cell):
    date_str = cell.get_value()
    date = datetime.datetime.strptime("%Y-%m-%d").date() # or whatever format you have
    picker = DatePicker(date=date, enabled=False)
    return picker

...
"formatter": get_datepicker,
...
4

@mcmasty I’ve released v2.2.3 that will allow you to use JS Tabulator’s original datetime formatter/sorter
(Note there is no JS Tabulator datetime editor out of the box)

You’ll need to use "luxon_datetime" inplace of "datetime".
This will behave as per the tabulator docs you reference.
To include Luxon you’ll need to add it to native libraries via a cdn.

For other questions probably best to ask on github.