
Show HN: Tabulator – Easy-to-use JavaScript library for interactive tables - olifolkerd
http://tabulator.info/
======
ohitsdom
It seems standard that all of these JS table libraries are rendering using
<div> elements instead of a <table> element. Why? This really irks me. As far
as I can tell, all of the features could be implemented using the correct HTML
element rather than using <div> to mimic a table.

~~~
warpech
Author of another library, Handsontable, here. We actually use <table>, but
there are many things that are easier with <div>:

\- With <div>, you have complete control over the positioning of the cells.
With <table>, you delegate the layout to the browser engine. \- <table> has
lots of semantic meaning, which makes it slower to render than a <div>,
because the browser engine needs to make a sense of it. \- There are
differences in how <table>s are rendered in various browsers. This is
especially a problem with old browsers such as IE6. \- It is trickier to
implement things like floating headers, virtual scrolling with <table>

Still, Handsontable uses <table> because you can overcome these problems if
you're motivated enough. The biggest benefit is that <table> gives you
enhanced semantics, which are good for Accessibility, SEO or any other form of
code processing.

~~~
TeMPOraL
> _< table> has lots of semantic meaning, which makes it slower to render than
> a <div>, because the browser engine needs to make a sense of it._

I have to ask: is this really slower overall? I didn't try to make an exact
1:1 comparison, but in my experience, all JS-powered table libraries I've seen
start choking around a couple hundred elements. With HTML tables + minimal
styling, I can dump 10k+ rows with no performance penalty.

~~~
olifolkerd
This is why you need to use a virtual DOM to prevent the DOM from being filled
with elements that consume memory and slow it down

~~~
mattnewton
Don’t know why you are being downvoted- it’s a real technique to render only a
subset of elements that fit on ~2 screen lengths and swap them out as the user
scrolls for arbitrarily large tables. Just using virtual dom doesn’t magically
solve this but it does make doing things like this parlor trick easier IMO.

~~~
TeMPOraL
And yet I can't shake the feeling that this is part of the problem, not the
solution. I have never seen a site using vDOM that didn't feel slow. That
includes everything using React that I've seen or made. It might be that the
performance loss comes from excessive styling and unrelated superfluous JS,
but I'd love to see some analysis on the performance overhead of just the
vDOM.

~~~
olifolkerd
vDOMs do carry a fairly significant performance overhead and they are not
worth using where there is only a small amount of data to be handled (which is
why it can be turned of in Tabulator if not needed) but on modern browsers it
isnt really something you should be noticing.

But when you start dealing with large volumes of data they quickly become the
only option.

Even a plain html table with say 10 columns will crash out /massively slow
down a browser if you load in 100,000 rows of data.

Browsers simply aren't able to process that may elements being added to the
DOM.

In the case of Tabulator you can handle many thousands of rows because it only
adds the rows you can see to the DOM, removing/adding them as you scroll.

So yes this means there is more processing when you scroll but at the same
time you aren't trying to move 100,000 od DOM elements at once which reduces
the load on the browser when loading/scrolling.

Depending on the complexity of what you are dealing with there becomes a point
where the trade off in processing/memory usage makes it worthwile

------
Waterluvian
I think that the homepage for any software library should first and foremost
show example code and output. I clicked and scrolled and learned one useful
thing for me: "oh good it mentions react!" But a code example is about 90% of
what I want to learn about. I probably won't remember this library in six
months when I need one.

Your audience is developers!

~~~
olifolkerd
Thanks for your feedback, There is a working example of Tabulator on the home
screen, and clicking the examples link takes you through to over 30 different
working examples complete with formatted source code when you click the "view
source" button. if you feel you would benefit form a more specific example, i
would be happy to update the home page to make things cleared :)

~~~
Waterluvian
Thanks for responding. I'm on mobile and still don't see any example or a
single line of code on the landing page. I'm sure there are examples in one of
the big stack of fat button links, but you haven't quite snagged my attention
and buy-in with those! :)

Edit: if I switch to desktop view I see a table.

I would suggest having an absolute minimal code + rendering on the front page
somewhere. It tells me so much about your library than anything else could!

~~~
olifolkerd
Ahh i see,

Yes the version for mobile is much less revealing im afraid, it was tricky to
fit everything on the screen so i scaled back the homepage to something
simpler.

Actually the documentation and example links are on the first paragraph of the
site, just above the table, but i must have removed that whole section from
the mobile view to make things fit in better. I will have a look into that
now.

~~~
Waterluvian
Thanks. Remember, I'm just one data point. My opinions and feedback don't
demand change.

~~~
olifolkerd
You made some good points, if you refresh your page now it should better
reflect the desktop experience. Thanks for the useful feedback

------
seanwilson
Looks really interesting! I was evaluating grid/table projects a while ago for
use on project where I wanted high performance with big data sets with custom
row rendering and it's obviously a nontrivial problem. There's tons of
libraries out there, each with their own quirks and endless issues being
posted on their bug trackers.

I ended up using [https://www.ag-grid.com/](https://www.ag-grid.com/) which
started charging for features and appears to making good money. Have you
considered going this route?

~~~
olifolkerd
Tabulator is licensed under MIT so is free for all to use, even on commercial
projects.

~~~
rjse
ag-grid community edition is also MIT licensed.

~~~
olifolkerd
All features of Tabulator are free including a lot of features AG Grid charges
for for commercial licenses

------
aasasd
I've had a brief stint pairing this lib with Angular and server-side
pagination while also trying to dance around Django's CSRF requirements on a
local machine (aka two separate ‘servers’ for Angular and Django). That was a
rather mixed experience, Tabulator mostly prefers convention so bending it to
fit an opinionated framework like Angular is awkward. IIRC I still had to deal
with data requests via Angular _and_ from Tabulator itself. Never managed to
put CSS styles for Tabulator in component styles instead of global ones.

Long story short, for Angular there are similar widgets that also happen to be
more popular. I didn't end up using them, so can't say for sure, but I imagine
they fit more nicely with the framework they were made for.

Also, dunno if anything changed, but six months ago Tabulator could use some
fine tuning in regard to UX with pagination: if the table is scrolled to the
right, on every filtering or pagination operation the position is reset to
zero (but not on the table headers, notably). There's also no support for more
interesting filtering like number ranges, so I'd need to whip up widgets for
that myself.

And, for some reason, the lib sent _two_ data requests every time filters were
changed.

~~~
olifolkerd
Hey Aasasf,

Thanks for your feedback.

A lot has changed in the last 6 months, Tabulator now has its own react
component, and the filter issues have been resolved.

There are also examples of how to build range filters in the example section.

If you have any particular areas of concern feel free to raise an issue on
GitHub and they will be resolved.

As for tighter integration with frameworks, in the next release Tabulator will
have a reactive data mode, that will allow it to change as data is changed in
the column and data arrays, making it simpler that ever to work with the same
design paradigm as modern frameworks

------
djaychela
Handily, this is exactly the sort of thing I was looking for this morning for
use in a project I'm doing (I'm making a library system as a project, and want
to have the ability to access and edit the database info directly in the admin
part of the app) - but I didn't really know what to search for - I guess this
is part of the problem of learning programming is not only working out what
you need, but how to ask for it (a similar issue arose previously where I was
making a pig's ear of something and it turns out I actually needed to use
getattr() and setattr() in Python, but just stumbled across getattr() when
looking at something else). Anyway, I'll be able to make a start on that next
week now - which is immensely gratifying.

Also, thanks for explaining the implications of the MIT licence simply in the
licence area - it's not something that those who are wet behind the ears
always find easy.

~~~
olifolkerd
Thanks for the feedback, yes the licensing terms is something that i often get
asked about so thought it would be easier if i could bullet point it out :)

------
zestyping
This looks really impressive!

What size of dataset (rows, columns) is Tabulator able to handle well?

For huge datasets, what options are available to partially display, paginate,
or progressively load data?

~~~
olifolkerd
Thanks,

Tabulator has a wide variety of options for handling large data sets. because
it uses a virtual DOM you can effectively load as many rows as you like into
the table, with the limit being defined by the amount of memory on the
browsing machine and loading time to pull in the data.

With the virtual DOM enabled Tabulator will then only render the rows that are
visible to the user, creating and destroying them in real time as the user
scrolls through the table

To reduce loading time you can also:

Paginate data (both of local data and from an ajax source:
[http://tabulator.info/docs/4.1/page](http://tabulator.info/docs/4.1/page)

Progressively load via ajax, both on scroll and timed:
[http://tabulator.info/docs/4.1/data#ajax-
progressive](http://tabulator.info/docs/4.1/data#ajax-progressive)

and also manually handle data retrieval yourself and use the replaceData
function to swap out data sets as needed

------
burtonator
This looks really nice.

I did a huge deep dive on HTML/Javascript table libraries when I started
working on Polar - which is a document management platform for PDF and cached
HTML content ([https://getpolarized.io/](https://getpolarized.io/))

Right now we're using React-Table ([https://react-
table.js.org/](https://react-table.js.org/))

I didn't actually see Tabulator when I did the full comparison and this seems
to be right up there with Tabulator.

Table support is hugely important for us. We have to render the list of PDFs
and documents you're managing, sort them, and also not necessarily have to
render them all on the same page, so having pagination is insanely important.

There's a few things react-table doesn't do a very good job on including key
bindings so I'm going to have to take a look at this library too.

~~~
subbu
One of the biggest problems with react-table is you end up with 2 headers.
There doesn't seem to be a way to get rid of it. Its annoying if you have to
fit the table in small space, or if you have just a few rows.

~~~
_coveredInBees
Not sure what you mean. You don't have to have 2 headers with react-table, but
you can if you want to. Just look at the example screenshots of tables in the
Polar app (the comment to which you replied). The tables have a single header.
It's simply a matter of how you structure your `columns` input to the React-
table component.

------
azmenak
We've had to implement an internal table library with all of these features
using React (and react-virtualized for scrolling). It's interesting and
impressive to see such a large piece of UI code written without any library.

~~~
olifolkerd
Thanks.

By removing the need for 3rd party dependencies it helps reduce the overall
size of the package, made it easier to manage the source of the system, made
it easier for developers to import and dramatically increased the performance
of the table, Tabulator used to be built on jQuery but that was a beast of a
library and eventually became a bottle neck harming performance more than it
aided development.

Removing the need for dependencies was also a great learning experience to
implement a variety of systems that you would usually go straight to another
library for.

When there is something bespoke in one of the extensible modules there are the
occasional use of library's, such as the xlsx downloader or the sparkline
formatter. but i only use these in optional components and keep the core
dependency free :)

------
hnruss
The project I work on used to rely on a relatively old JS table library. It
was fairly well maintained and had a ton of great features. However, we
eventually had to replace it with a simpler custom solution based on html
tables. Compared to html tables, the JS library had worse performance and
didn’t work as well on mobile devices.

Our custom solution is basically just a set of conventions for implementing
html tables using a JS rendering library. We also wrote a set of single-
purpose modules that can be applied to table-rendering views to provide
specific features.

------
dvh
I think the default style (even of the demo on the page) should be no style.

~~~
plainOldText
Couldn’t agree more. Many times I find myself put off by some charting or
visual library only because of stylistic/aesthetic choices the author(s) made.
I think no or minimal style is the best approach. Having the feature to add
your own is of course nice to have.

~~~
olifolkerd
Tabulator comes with 8 built in themes, two of witch use only the most minimal
markup for the table to make the columns and rows distinguishable.

It also comes with a number of themes to help match other UI frameworks. See
the themeing examples here:
[http://tabulator.info/examples/4.1#theming](http://tabulator.info/examples/4.1#theming)

As well as built in themes it comes with extensive documentation on the CSS
classes as well as overrideable SASS variables for all themes to make
customising as easy as possible, more information can be found in the styling
documentation:
[http://tabulator.info/docs/4.1/style](http://tabulator.info/docs/4.1/style)

~~~
zestyping
It doesn't look like any theme is specified in the JavaScript code on the
front page. What theme is being used in the example, and how did it get
configured?

~~~
olifolkerd
That is the site theme, it is a specific theme for the site.

each theme is contained in its own CSS file, you simply include the CSS file
for the theme of your choice.

Configuring themes for your table is covered extensively in the documentation
along with examples of each theme in use:
[http://tabulator.info/docs/4.1/theme](http://tabulator.info/docs/4.1/theme)

------
FroshKiller
I'm pleased that you removed the jQuery dependency in version 4 and am looking
forward to upgrading. Your library allowed me to move a lot of awful server-
side code to the browser.

~~~
olifolkerd
Happy to hear i could help :D

------
DonHopkins
Olifolkerd, I would love to know more about Tabulator's approach to supporting
multiple frameworks, please.

What was your overall high level approach, and which technologies did choose
to use and avoid? Were some frameworks easier than others to integrate with,
or have their unique challenges?

I would like to re-implement my old jQuery pie menus so they support various
frameworks like Tabulator does, so I would really benefit from your thoughts
and experiences, and any suggestions you have for following in your footsteps.

~~~
olifolkerd
Hey Don,

on the whole the key is to stick to vanilla JS and avoid trying to use to
forcible a design paradigm that could conflict with other frameworks.

Removing dependencies on other libraries was key to making it interoperable.

Everything in Tabulator is built to be extensible so where an incompatibility
exists it is easy to build a solution for a particular framework.

Tabulator still has one hangup in the way it works, in that it dosnt use
reactive data (changing the array you passed into the table, does not
automatically update the table, unlike react and view, you have to bind
watchers at the moment) but this will be coming in the next release. at which
point they should all work harmoniously

The biggest challenge is to ensure that things are drawn correctly at the
correct time. Because Tabulator uses a virtual DOM it makes it a since to
redraw parts of the table when needed

~~~
DonHopkins
Thank you! Did you roll your own virtual DOM, or is there a library you're
using?

Any suggestions for interesting parts of the code I should snoop around? ;)

~~~
olifolkerd
I wrote my own,

Tabulator has zero dependencies for its core functionality

If you have the time, writing a virtual DOM can be an excellent lesson in the
intricacies of DOM manipulation, learning exactly what order to make calls in
to optimize the number of times the DOM is updated and reduce the load on the
system.

Though if you are not trying to write a lot of data to the screen they are not
worth doing to be fair.

Tabulator needs one because if you try and load 10,000 rows of a table into
the DOM at the same time it will freeze up as most browsers cant handle that
load, but for simpler UI elements it may not be worth the added complexity.

In the documentation for tabulator there is an "Architecture Concepts" section
that has a number of pages that provide a bit of detail about how Tabulator
works.

The virtual DOM details can be found here:
[http://tabulator.info/docs/4.1/virtual-
dom](http://tabulator.info/docs/4.1/virtual-dom)

and some basic lifecycle info can be found here:
[http://tabulator.info/docs/4.1/lifecycle](http://tabulator.info/docs/4.1/lifecycle)

------
stale
We have been using Tabulator for some time now and are really happy with it.
Looking forward to trying out v4. Thanks for all the hard work you've put in
Oli :)

------
iddan
If anybody is looking for a React similar solution checkout
[https://www.npmjs.com/package/react-
spreadsheet](https://www.npmjs.com/package/react-spreadsheet)

~~~
olifolkerd
If you are looking for a react component then ngduc has kindly built one for
Tabulator. it can be found here: [https://github.com/ngduc/react-
tabulator](https://github.com/ngduc/react-tabulator)

------
androidgirl
Hey, a quick thanks for making this! I think I can use it as a replacement for
some code at work.

Also, thank you for the React compatibility and component, as well as the
permissive license!

~~~
olifolkerd
Great to hear! if there are any features you feel it is missing, create an
issue on GitHub and we can help you out :)

------
nothis
I've been looking for something like that. It's not too reassuring to see the
documentation not display code correctly (black on black text on Firefox?).

~~~
olifolkerd
sorry to hear you are having issues, could you post a link to where you are
seeing the issue, it all renders fine on my pc

~~~
nothis
It's all the code areas in the documentation, like the npm commands here:
[http://tabulator.info/docs/4.1/quickstart](http://tabulator.info/docs/4.1/quickstart)

If that helps, console says it failed to load the following (but gave no
reason):

>[https://cdn.rawgit.com/google/code-
prettify/master/loader/ru...](https://cdn.rawgit.com/google/code-
prettify/master/loader/run_prettify.js?style=desert)

>[https://cdn.rawgit.com/google/code-
prettify/master/loader/la...](https://cdn.rawgit.com/google/code-
prettify/master/loader/lang-css.js)

Maybe it's some cross-site loading being blocked, I dunno.

~~~
olifolkerd
weird, that all lodes fine for me. I will look at adding some fallback styling
incase those fail to load for some reason

------
nubb
I am a JS newbie and I learned a decent amount about js using tabulator for a
project. Really enjoyed it.

My only issue now is struggling with CSS to make it look nice :p

~~~
olifolkerd
If you need any pointers on which classes to use for what just let me know :)

------
mkirklions
This doesnt appear to be responsive.

I would update my website(it already has a table sorting feature), but losing
columns in favor of beauty isnt acceptable.

~~~
olifolkerd
There is a whole module that exclusively deals with responsive layout.

You can either choose to hide columns that do not fit, or collapse them into a
list.

There are extensive options for configuring which columns react in what order
and how things are displayed

Checkout the responsive layout documentation for more info:
[http://tabulator.info/docs/4.1/layout#responsive](http://tabulator.info/docs/4.1/layout#responsive)

~~~
mkirklions
Great link, thanks!

------
75dvtwin
thank you for sharing, looks the size of js (gzip) is 43.5kb and for 2.5kb for
CSS

This is really nice, very small for such a comprehensive library.

Jealous a bit, that library like this cannot work within React Native env.

I end up using React-native-web for everything that I can, and then, double-
implement functions for web vs native, where parity cannot be achieved.

~~~
olifolkerd
Thanks. I deliberately avoided 3rd party dependencies to try and make the code
base as small as possible.

I use react native wrappers at work and embed webviews that allow components
like these to be used.

That being said, having a react-native variant for this is on the long term
road map

~~~
75dvtwin
Yes, webview is something I am considering too.

Especially because I cannot find a way to display Latex/MathML in React
Native, without a webview.

------
uberneo
Try to use Wijmo --
[https://www.grapecity.com/en/wijmo](https://www.grapecity.com/en/wijmo) Its
off the shelf plugin and compatible with raw JS , AngularJS, Angular 2 , React
& Vue. I agree that documentation is not that great but the with few examples
you will be ready to go very easily.

~~~
olifolkerd
That does come with a price tag of over $800 dollars for commercial use.
Tabulator is completely free :)

------
seymour333
Anyone have comments on how this might stack up against AG-Grid?

~~~
olifolkerd
AG-Grid has some features that tabulator lacks, like multi-cell editing and
cell group selection. (but these features will be coming soon to Tabulator)

AG-Grid focus's on being a fully functional spreadsheet where as tabulator
goes more down the route of interactive table.

Tabulator has a publicly visible development roadmap so you can see roughly
when new features are going to come online.

There is a new release every month or so, so if there is a feature you feel
you need you can create an issue on GitHub to get it added to the roadmap.

Most importantly, Tabulator is FREE even for commercial use!

~~~
leetrout
Ag-Grid lost my business for having a very complex, immovable licensing
structure. I'm not sure who pays them but someone must be OK with it since
they're still in business. It's a shame because I really like the quality of
the code and would gladly pay their asking price if they would have a
realistic outlook on educational organizations or startups.

I am VERY excited to start trying to use this instead.

~~~
seymour333
The company I work for pays for Ag-Grid, which makes me sad. Overall I find it
has been fairly difficult to work with, and there are a lot of breaking
changes when upgrading from older versions. I think we could get away with
something like Tabulator for most of our use cases. I'm definitely going to
try to sell it to the team

------
michaelmior
React Table[0] is a nice possible alternative.

[https://react-table.js.org/](https://react-table.js.org/)

~~~
olifolkerd
If you are looking for a react component then ngduc has kindly built one for
Tabulator. it can be found here: [https://github.com/ngduc/react-
tabulator](https://github.com/ngduc/react-tabulator)

------
citilife
In the example, it was very difficult to change the star ratings. It kept
bugging out and made it very annoying.

~~~
olifolkerd
Sorry to hear you were having trouble, what browser/device were you using?

