Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

Tabulator Dash Component

Folks I found myself needing functionality from Tabulator (fantastic data table project) http://tabulator.info/

  • Grouping of rows under a header
  • Incase-sensitive searching
  • Custom filters

I found Tabulator had a react port, and went ahead and made a dash version, providing callbacks for updating data / columns, and handling row clicks.

It meets my current needs, and i’m learning as I’m going but it might be of use to others.
And willing to take input / requests if there’s a desire to add more tabulator functionality.

Details : https://github.com/preftech/dash-tabulator
Pypi: pip install dash_tabulator

3 Likes

Very sweet @pjaol and thanks for sharing :tada:

I love your note in the readme:

This readme is probably longer than the code, due to the work of those individuals!

Yes! That’s the power of React and the Dash plugin system! :raised_hands:

Here are some screenshots for those that are just passing through. Definitely some nice features that aren’t covered yet in dash_table.DataTable

thanks @chriddyp, took a bit of yelling at the screen and going what do you mean i can’t concatenate a string that. But got it working.

I think Tabulator would definitely complement the fantastic work in Dash / Plotly.
I’m also taking my company down the path of contributing back to the open source world with this being our first of hopefully many projects.
There’s definitely ways to improve this code, and I would encourage anyone interested to take a look and make suggestions.

This has worked beautifully for me so far.

“Page Click” callbacks would be wonderful so I can implement server-side pagination on large datasets.

@crachel it looks like it’s possible with remote pagination http://tabulator.info/docs/4.4/page#remote
And it seems react-tabulator can do it
https://github.com/ngduc/react-tabulator/blob/master/src/ReactTabulatorExample.tsx#L93-L131

What I might need help in understanding is how to tie dash to that
ajaxURL and just use ajaxResponse in the component to format the data

Any ideas?