Show HN: Reactable – fast, flexible, and simple data tables in React

https://github.com/glittershark/reactable

by glittershark • 12 years ago

44 25 12 years ago

bshimmin• 12 years ago

This looks lovely. As someone who has battled too often with jQuery DataTables - which can do everything under the sun but often feels like you're performing unanaesthetised emergency dentistry on yourself in the process - it would be terrific to have something more modern and flexible, even if it's not quite at feature parity. Here's hoping this might be it!

glittershark• 12 years ago

That's the goal :) glad you like it! If there are any features you need please feel free to make a Github issue requesting them - I've got lots of free time to work on this right now.

dingdingdang2• 12 years ago

One thing I noticed is that the search presented on http://glittershark.github.io/reactable/ does not seem to work quite right - if I search for "Shawnee" then "Shawness" then "Shawnee" again without reloading then the found entries seem to be duplicating freely so I end up with 6 (and counting) found versions of "Shawness". Good luck with maturing this library.

dingdingdang2• 12 years ago

I like your DataTables review, as someone who has worked extensively with DataTables it is indeed very apt. However, the complexity exposed by DataTables is, at least partly IMHO, justified by the reality of how complex it is to do tables, especially in web app mode where "tables" are often dynamic entries that look nothing like tables whatsoever. In this latter scenario DataTables actually really do shine, at least once one has spent enough time to settle on a dev-routine that works.

capkutay• 12 years ago

That's interesting you feel that way about DataTables. I was thinking about moving from slickgrid to datatables since slickgrid's author is no longer supporting the project. I was under the impression datatables might be easier to develop with compared to slickgrid.

If someone has used both slickgrid and datatables, could you recommend one or the other?

JangoSteve2• 12 years ago

I had felt the same way about Datatables, which is why I ended up writing Dynatable over the course of a couple years. Tried to take a somewhat different approach that felt more natural to use.

http://www.dynatable.com

jsmeaton• 12 years ago

That looks really really nice. It's like it was built with javascript in mind rather than strVisualBasic i6.0 ;). I'm going to rip datatables out of my current project and put this in.

Have you considered (or implemented) col or row spans? A particular dataset I have to work with has multilevel column and row titles - so I've avoided using datatables for that.

kasperset• 12 years ago

Nice to see this but there are few other related projects based on React(Not 100% React) that I know of: https://github.com/bgerm/react-table-sorter-demo https://github.com/josebalius/ngReactGrid

shaohua• 12 years ago

Added to http://www.reactjsx.com/, where you can search reusable React components

nogridbag2• 12 years ago

Great idea. I just started using React and was wondering if there was a repository of components so I didn't have to reinvent the wheel for just about everything. It might be handy to add tagging functionality so the components can be easily browsed through in the future.

dengar0073• 12 years ago

Nice -- I didn't know about this site. Added the component I've been working on to it :) Thanks for sharing!

leesalminen2• 12 years ago

You beat me by 3 days! I must've missed the article on Monday, because I just created my own last night :P.

lotsofmangos• 12 years ago

You have a bit of a namespace collision - http://www.reactable.com/

nogridbag2• 12 years ago

Neat. I'm also building a general purpose grid for an app I'm building. From the demo it appears the entire table data set must be loaded for the pagination to work. I'm not sure how practical it is for real use.

leesalminen2• 12 years ago

I've been using Reactable in production for ~3 months now. I had the same thought when I saw that there was no server side pagination.

So, I put it to a test. My app has an audit log, 4 columns wide. I loaded in 30,000 rows into Reactable and it renders just fine...even on my Android device! Pretty slick.

awhitty• 12 years ago

This is pretty cool. Sorting by the datetime field in the demo sorts the strings alphabetically though. I'm not sure if that's an issue with the plugin or the demo, but it probably isn't the right behavior.

hawleyal3• 12 years ago

Why are some developers so enamored with tables and making ever more table-generation libraries. They are one of the worst ways to display information in a readable way. Outside of spreadsheet computing and source data, they have limited use. Tables should almost certainly never make it to an end-user UI.

jrmiii• 12 years ago

I disagree. Even if you come up with novel ways, or use common visualizations (e.g. charts) to display tabular data - I'd still give the end user a 'table button' that lets them simply view the data in a table.

Because of the ubiquity of the spreadsheet, most users simply grok tables and in a pinch, want to see the data that way. If they can't, the first feature request you're going to hear is for an Excel export so they can work around your application - not in it.

I'm not saying it's right, I understand you can deliver more information per second in a way that aids cognition - but until users are accustomed to this - we need tables.

That being said, if you work in React.js - why not have a nice table library for React.js?

edit: grammar

hawleyal3• 12 years ago

Most users do not grok tables. Most developers do because they are easy to automatically generate based on lists of things with common attributes.

Tabular data is a very exclusive set of information in which columns can be aggregated to sums, counts, et al.

Most tables on the web do not contain tabular data.

carterehsmith2• 12 years ago

I guess you never worked on a ‘business’ application (as opposed to ‘social’ app, or a ‘game’)?

For example, let’s look at the screenshots below from a typical line-of-business app (AWS console). How do you think the UI should look like, without using tables?

http://www.gregarnette.com/wp-content/uploads/2011/12/ec2-re...

hawleyal3• 12 years ago

I work on many business applications. I find developers make tables as a first recourse because they are easy and don't require thoughtful design of the most usable way to view and interact with data.

Edit: Also the example you showed me is definitely not tabular data, as each column cannot be tabulated to a sum or other aggregate. It would most likely be much more semantic to make it a list.

dengar0073• 12 years ago

Hey cool! I've been working on something similar. http://dynamictyped.github.io/Griddle/

I'm glad to see more components coming to React :)

carterehsmith2• 12 years ago

Nice! You may want to add it to some of the React component list, like this one someone else mentioned: http://www.reactjsx.com/

dengar0073• 12 years ago

Added it :) Didn't even realize that existed until seeing this thread.

Show HN: Reactable – fast, flexible, and simple data tables in React

Related Stories