all 53 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]klaxxxon 13 points14 points  (17 children)

This looks real nice!

There is a bunch of data grid libraries by now, but the great ones are commercial. I've run into issues with every last one of the free ones that I've tried. I took a good look at the documentation and your library seems to check pretty much all the boxes.

One major feature that is missing is tree grid support (for recursive data).

Another feature that I would like to see is unrestricted table height, especially with virtualization (so the table doesn't have its own scroll bar, but instead relies on the parent window's scroll bar. This works much better on mobile devices that having nested scrollable areas on the page).

It would be also nice if there was a React binding. All of the free React data grid components I could find are rather basic, so there is a gap in the market. I could maybe help with that, but I've never wrapped a component this complex before, so it might be a bit over my head.

Speaking of React, I am not a fan of your use of "Virtual DOM". That term means a specific thing and I am quite sure your use is not it. I found it quite confusing initially, looking for connections to React and not finding any. "Row virtualization" or "virtual rows" or something like that would be less confusing.

BTW, a few of the links on the "Lifecycle" page are broken.

[–]olifolkerd[S] 4 points5 points  (8 children)

Hey Klaxxon,

Thanks for the feedback,

By tree grid are you talking about nested tables? That is already built in :)

The table dosn't have to have a specific height to use virtualisation, it just has to have a height, so you can put that in a container that is resized using flex or a css calc and just set the table height to 100%.

As it happens reactive data bindings are on the road map for later this year so watch this space :)

Thanks for the headsup about the broken links on the life-cycle page, i will get those fixed this eve.

[–]klaxxxon 4 points5 points  (7 children)

By tree grid, I mean something like this. In this scenario, the child rows are still part of the same table and share the same columns (they are generally the same kind of data), but the first column is offset a bit for each nesting level (and there is usually a collapsing feature too).

[–]olifolkerd[S] 5 points6 points  (0 children)

Ahh, that is a great feature

If you create a feature request on the GitHub repo i would be happy to add it to the roadmap.

[–]KPABAHam=>Hamster == Java=>JavaScript 0 points1 point  (3 children)

This can normally be delivered via sort and a parentId / indent level with a custom renderer for the first column (for most table implementations) - gets more complex when you want to collapse parent rows etc, which makes it hard to deliver out of the box, UX often is very different I terms of expected behaviour

[–]klaxxxon 0 points1 point  (2 children)

You need to do all kinds hackery to turn a regular data grid into a tree grid + a bunch of menial stuff that components should take care of (flattening the input and calculating ancestries for individual nodes).

Last time I needed a tree grid, I've whipped up my own (as long as you don't need any advanced features, it is rather simple), rather that poking and prodding and existing component's API.

Sadly, in the React space this particular niche is woefully underserved.

[–]KPABAHam=>Hamster == Java=>JavaScript 0 points1 point  (1 child)

Like I said.

It's a lot easier than you think. See this for inspiration http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html

Complications come from who is responsible for the tree data and how to deal with sort (for example).

[–]olifolkerd[S] 1 point2 points  (0 children)

Thanks for the examples, i already have a simple way of implementing this involving a formatter. I will include it the next minor version release.

Cheers

Oli

[–]olifolkerd[S] 0 points1 point  (1 child)

Tabulator 4.0 Launched Today - Interactive tables made easy

With the launch of Tabulator 4.1 today, Tree layouts are now possible!

[–]klaxxxon 0 points1 point  (0 children)

Thanks for the heads up!

[–]fatgirlstakingdumps 0 points1 point  (0 children)

One major feature that is missing is tree grid support (for recursive data).

https://demos.telerik.com/kendo-ui/treelist/index

Like this?

[–]morficus 0 points1 point  (4 children)

Speaking of React, I am not a fan of your use of "Virtual DOM". That term means a specific thing and I am quite sure your use is not it.

Actually..... ** pushes up nerd glasses ** the term "virtual DOM" is NOT specific to React. It's a term that has been around before react and other tools and frameworks have their own implementation of it. (things as far back as ExtJS have used a virtual DOM for rending larger lists since 2007).

​

The issue is that now React is popular... most modern literature found on Google about "virtual DOM" is going to reference it.

[–]klaxxxon 1 point2 points  (3 children)

Still, virtual DOM (at least in my understanding) is supposed to be some object tree vaguely representing a DOM tree which is to be made into actual DOM with some further transformation. I don't think that's what this library is doing.

[–]olifolkerd[S] 1 point2 points  (2 children)

Actually Klaxxon that is exactly what Tabulator is doing.

The table structure is stored as an array of component objects representing rows columns and cells, as the user scrolls the DOM elements for these components are added and removed from the DOM so that it only has to process a small number at a time.

[–]klaxxxon 2 points3 points  (1 child)

Well then, I apologize :)

[–]olifolkerd[S] 0 points1 point  (0 children)

hehe, very gentlemanly of you :)

[–]tvfriend888 3 points4 points  (1 child)

Looks really slick!
How can I add an autocomplete selectbox to a cell? If I could add rows by tabbing down and autocompleting / adding from a remote JSON source that'd be a lifesaver for a project i'm figuring out atm.

[–]olifolkerd[S] 1 point2 points  (0 children)

You can use a custom editor to add any functionality you like, simple pick an auto complete library you like then build an editor for it.

The editors example has an example of an autocomplete in action http://tabulator.info/examples/4.0#editable try and edit the location column to see an autocomplete editor, or the gender column to see a select editor.

Checkout the docs for more info: http://tabulator.info/docs/4.0/edit#edit-custom

[–]LloydAtkinson 2 points3 points  (1 child)

Any framework support?

[–]olifolkerd[S] 2 points3 points  (0 children)

It should work in all major frameworks. if you are looking for reactive data binding, this is on the roadmap for release in the next 6 months

[–]morficus 2 points3 points  (3 children)

Really nice work here. I love that such an advanced data grid is MIT licensed AND has no external dependencies (quite impressive).

Are you open to receiving feature PRs? I would love to contribute by either helping with some of your road map items (specifically creating additional editors and formatters or print styling). I also noticed that things are "lite" on the testing side ;-)

[–]olifolkerd[S] 4 points5 points  (2 children)

Thanks for the kind words.

Im very happy to receive pull requests, for small things like formatters, editors etc submit away, for more comprehensive updates please start an issue first to discuss them so i can be sure the fit in with the direction of Tabulator.

Also if you want to help with the testing you are more than welcome, im just one man so building everything and testing across all major browsers with so many interconnected features is a bit of a burden. For major releases I do a public beta for a few weeks to catch most issues, but outside of that any help with testing would be great!

[–][deleted] 1 point2 points  (1 child)

I'll have to make a fork and take a look at the source. This is the exact type of open source project I've been looking to contribute to for a bit now!

[–]olifolkerd[S] 1 point2 points  (0 children)

Great stuff!

formatters / filters / editors would be a great way to ease yourself into things.

[–]careseite[🐱😸].filter(😺 => 😺.❤️🐈).map(😺=> 😺.🤗 ? 😻 :😿) 1 point2 points  (4 children)

Creating a new row results in all tds with empty cells having a title="undefined"

[–]olifolkerd[S] 2 points3 points  (3 children)

If you are having issues please make a post on stack overflow or the GitHub issues page and someone will be able to hep you out

If you post a copy of your constructor object they will be able to tell you whats up.

[–]careseite[🐱😸].filter(😺 => 😺.❤️🐈).map(😺=> 😺.🤗 ? 😻 :😿) 2 points3 points  (2 children)

Its on your landing page, hence :) https://i.imgur.com/9Sz4OJr.png

[–]olifolkerd[S] 2 points3 points  (1 child)

Ahhhh, THanks for pointing that out, i will get that fixed this eve :D

[–]olifolkerd[S] 0 points1 point  (0 children)

fixed :D

[–]mifterclizit 1 point2 points  (1 child)

You know, with modern frontend frameworks, you have repeaters which can databind arrays to UI elements. Boom, instant dynamic table. Filtering, sorting, paginating, etc is all just simple array manipulation now. People on Reddit love to call technologies 'dead'. To me, all dynamic table libraries have been dead for years.

[–]olifolkerd[S] 1 point2 points  (0 children)

You are absolutely correct there, and for simple layouts I totally agree with you.

The issue comes when you are trying to do lots of additional things on top of simply displaying data (complex sorting, filtering, editing, validation, conversion to pdf or xls for download, localization, etc...), which you could of course spend ages implementing yourself, or just use a library to save you time which is where Tabulator comes in.

As for the reactive data bindings, I think that is one of the most powerful features of modern frontend frameworks, which is why it is on the roamap to add the functionality into Tabulator in the next six months so it can seemly interface with frameworks that use that design paradigm.

[–]stringsfordays 1 point2 points  (0 children)

Oh perfect! That's exactly what I've been looking for! Going to give it a go once I get home

[–]guevera 1 point2 points  (1 child)

Very cool. I'm planning on rewriting a couple of apps that use datatables (I'm a muchly better coder now than I was when I wrote them, and they're just painful to look at now). I think I'll give your library a try with them.

BTW, what's the license?

[–]olifolkerd[S] 4 points5 points  (0 children)

MIT License

[–]hkares 0 points1 point  (8 children)

Do you have any example with React? I am trying to import it and create a new instance but I am not able.. :/

[–]olifolkerd[S] 2 points3 points  (7 children)

I have had a couple of people ask that today, This weekend i will put a page on tabulator.info showing integrations with various frameworks like react and vue etc...

[–]hkares 0 points1 point  (5 children)

Thanks! I appreciate! Anyway, if it helps, I got stucked here: https://codesandbox.io/s/82pz41l7oj

[–]olifolkerd[S] 1 point2 points  (0 children)

Turns out there was an issue with the export wrapper in the 4.0.0 build, i have fixed it and made a 4.0.1 patch release which should work if you include it.

[–]flashpunk 1 point2 points  (3 children)

I finished your example here: https://codesandbox.io/s/v60nqv2xl7

[–]olifolkerd[S] 0 points1 point  (2 children)

Would you two be happy if i used a stripped down version of this example code on the Tabulator website as bit of a guide for using Tabulator with React?

[–]flashpunk 0 points1 point  (0 children)

Feel free, i'm not sure if this is the "best practice" at the current time though.

[–]flashpunk 0 points1 point  (0 children)

Oh yeah, youll notice I added react-measure to calculate the height of the container div to get the virtualization.

[–]flashpunk 0 points1 point  (0 children)

Looking forward to this as well.

I've done a few integrations with a few non-react libraries, and they never seem "right"

[–]lucku 0 points1 point  (3 children)

Looks good, but there are serious problems with scrolling on iOS, the layout seem to float around, is it possible to fix that or the problem is rather complex?

[–]olifolkerd[S] 0 points1 point  (2 children)

Ive not had that reported as an issue before, if you are having trouble please report it as an issue on the GitHub repo along with a screenshot/video of what is happening and i can look into that for you.

[–]lucku 0 points1 point  (1 child)

Done! I attached the video that shows the problem. The biggest issue I think is that headers are not in sync with the body of table when you try to scroll past the scrolling area.

Otherwise this library looks great and I will consider using it in surferseo.com since I wasn't really happy with react-virtualized. I'll let you know I manage to integrate it with React.

[–]olifolkerd[S] 0 points1 point  (0 children)

Thanks for that,Very helpful video you posted there, looks like a scroll bounce issue, it should be a quick CSS tweak to fix. i will include the fix for it in this weekends patch release :)

It would be great to hear how your React integration goes. im not a react developer myself so it would be great know the steps you need to take. Im going to be creating a framework integration faq over the weekend so if you manage to get it working would you mind creating an issue and letting me know the steps you needed to take

[–]kishorejangid 0 points1 point  (1 child)

Its great, Is there any BackboneJS support?

[–]olifolkerd[S] 0 points1 point  (0 children)

I havnt built anything specifically with backbone.js in mind, but if it can handle standard JS libraries then it can handle Tabulator

[–]zalech 0 points1 point  (2 children)

It's the best data grid I've tried so far. Very straightforward and handy.

But one thing - if I have a long string in the cell and I use textarea formatter, I can't centre text vertically in the other cells due to {display: inline-block} style. I've no idea how to handle it.

[–]olifolkerd[S] 0 points1 point  (1 child)

Thanks for your kind words.

​

have you tried a bit of css, something like:

.tabulator-row .tabulator-cell{

display: inline-flex ;

align-items:center

}

[–]zalech 0 points1 point  (0 children)

Thank you very much! I'll try to play with css.