Good example of tabulator use?

[john.wells]

What I’m trying to do:
I’m trying to use the Tabulator component.
What I’ve tried and what’s not working:
I’ve created a sample project with a basic Tabulator and the 3rd party dependency. I’ve tried replicating the example provided with the dependency, which seems to be able to simply set the data (code below) and it works. I assume the Tabulator autoheader feature is used in this example.

However, my result is just an empty grid:

Is there a better example out there of how to use Tabulator with Anvil?

Clone link:
https://anvil.works/build#clone:CW62ZYFDUWX4W6XQ=HPTR4M4JVDX5ZUUSQ7F4ML75

[campopianoa]

Hello,

There are several examples on the forum that turn up. Have you had any luck with them?

For example, this one comes from two shining stars 'round these parts:

Tabulator Javascript Datagrid Integration

@david.wylie I had a project where I wanted to reuse a datagrid component that had more features out of the box than the anvil datagrid. I liked what you did with Tabulator so I had a go at taking it on. It was nice that the table has header sorting by default and is super fast to load. Adding rows also is simple and doesn’t require a complete redrawing of the element… Here’s what i’ve come up with. The example Clone Link and dependency: https://anvil.works/build#clone:JVL5ORAAPZ6SVWDU…

[stucork]

You’ll also need to define the columns.

        self.tabulator_1.columns = [
            {"title": ..., "field": ..., ...},
            ...
        ]

see tabulator docs on defining columns

[john.wells]

You know…I cloned that thing like 8 times before your message. What I didn’t realize is that it was cloning two projects…I suppose one is the dependency. I kept opening the first one that appeared in the list, which was the dependency and not the example! Sorry about that

[john.wells]

What’s interesting/confusing about that is that the example that’s included with the dependency doesn’t do this. It merely defines the data:

Seeing this, and seeing that I could change any of the column names to something different and they’d show up properly when I ran it, it threw me off the trail. I saw that Tabulator has an autoheader feature and suppose it was using that. However, I replicated the example (albeit without the _CleanCols and _Helpers), but it wouldn’t work. Still a little confused about that, but now that I know two projects were cloned, I’ll go study the true example

[sonichirag]

Thank you. Finally I was able to get data populated in Tabulator after few trail & errors. The functionality is very helpful. Would you know if there is easy way to format the tabulator table? I would like to edit/set background colors for header and rows, font size for the table, font colors for headers/rows etc. I tried looking at their website and searched thru Anvil Forums, but couldn’t figure it.

Many thanks for any help or guidance.

Best.

[stucork]

@john.wells

the example that’s included with the dependency doesn’t do this

That’s not an example, it’s just a dummy startup form for the dependency because anvil sometimes complains if there’s not a startup form. But yes it uses auto_columns for convenience.

@sonichirag

Would you know if there is easy way to format the tabulator table?

Not really - For individual rows you can use the row_formatter event handler.
In the official example you can see this being applied to change the row background based on the gender.
For other styling you’ll probably have to go into the CSS and look at the tabulator documentation for styling.