Python source of various UI components?

I find myself wondering how a class works about 20x a day. For example, at the moment, I’m trying to extend DataRowPanel to control how a particular column gets rendered in the row of a datagrid. So, for example, if I have a boolean column, I might want to show a check box instead of a true or false value.

I can’t seem to find this source. The best I’ve found is in the open-sourced Anvil runtime, but in _components.py, all the components are merely defined as “pass”. I can see that there’s a DataGrid.js, but after looking at it (https://github.com/anvil-works/anvil-runtime/blob/58b7ca1abc2d229c5a2aa4392e9244bed37f326f/client/js/components/DataGrid.js), it appears that this has to be generated javascript code.

How can we, as Anvil developers, read the python source easily to understand how to stay within the bounds of the runtime and how to comply properly when we’re extending things? This seems like a major impediment, but I’m hoping I’m wrong :wink:

Thanks in advance!

Hi John,

I’m afraid what you’re looking at there is the real (Javascript) source code of the DataGrid component! We implement these classes are implemented in Javascript, because they drive the actual browser UI (which is all JS native).

In general, you should not be depending on non-public details of how those classes are implemented, because those can easily change with updates to the Anvil platform.

What are you looking to do? Perhaps if you post directly about that, we can suggest ways of doing it without pulling back the curtain and depending on internal component.,

2 Likes

Hi @meredydd , thanks for your response.

As I mentioned in my first post, at the moment I’m simply trying to customize how certain columns are displayed in a datagrid. I have a table with over 20 columns, so generating each column in a grid in the UI is tedious, as you can imagine. I’ve written the python code to successfully introspect my datatable and generate a column for each database column, but now I want to customize how each value is displayed. For example, if it’s a bool, I might want to display a checkbox instead of a simple True or False. If it’s a number between 1 and 100, I might wish to display a colored bar instead of a number. Does that make sense?

As a general comment, I feel Anvil could really benefit from a more robust data grid control. We write business-focused apps, which means we’re displaying data grids on perhaps 50-60% of our screens. The built-in datagrid is useful, but very basic compared to what’s available in the javascript ecosystem.

Thanks in advance for your help.

You might want to have a look at tabulator

4 Likes

Thanks Owen. I will.