5 ms·

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

44 points by glittershark 12y ago

bshimmin 12y 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 12y 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.
  - dingdingdang 12y ago
    One thing I noticed is that the search presented on http://glittershark.github.io/reactable/ 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.
- dingdingdang 12y 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 12y 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?
- JangoSteve 12y 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 http://www.dynatable.com
  - jsmeaton 12y 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.
    - JangoSteve 12y ago
      Thanks! It has been considered, and is planned, just hasn't been implemented yet. There's a lot more discussion about it here: https://github.com/alfajango/jquery-dynatable/issues/30 https://github.com/alfajango/jquery-dynatable/issues/30
kasperset 12y 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/bgerm/react-table-sorter-demo https://github.com/josebalius/ngReactGrid https://github.com/josebalius/ngReactGrid
shaohua 12y ago
Added to http://www.reactjsx.com/ http://www.reactjsx.com/, where you can search reusable React components
- nogridbag 12y 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.
- dengar007 12y ago
  Nice -- I didn't know about this site. Added the component I've been working on to it :) Thanks for sharing!
- leesalminen 12y 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 12y ago
You have a bit of a namespace collision - http://www.reactable.com/ http://www.reactable.com/
nogridbag 12y 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.
- leesalminen 12y 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 12y 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.
hawleyal 12y 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 12y 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
  - hawleyal 12y 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.
- carterehsmith 12y 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-refresh-aws-console.png http://www.gregarnette.com/wp-content/uploads/2011/12/ec2-re...
  - hawleyal 12y ago
dengar007 12y ago
Hey cool! I've been working on something similar. http://dynamictyped.github.io/Griddle/ http://dynamictyped.github.io/Griddle/ I'm glad to see more components coming to React :)
- carterehsmith 12y 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/ http://www.reactjsx.com/
  - dengar007 12y ago
    Added it :) Didn't even realize that existed until seeing this thread.

44 points by glittershark 12y 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 12y 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.
- dingdingdang 12y ago
  One thing I noticed is that the search presented on http://glittershark.github.io/reactable/ 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.
dingdingdang 12y 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 12y 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?
JangoSteve 12y 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 http://www.dynatable.com
- jsmeaton 12y 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.
  - JangoSteve 12y ago
    Thanks! It has been considered, and is planned, just hasn't been implemented yet. There's a lot more discussion about it here: https://github.com/alfajango/jquery-dynatable/issues/30 https://github.com/alfajango/jquery-dynatable/issues/30

kasperset 12y 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/bgerm/react-table-sorter-demo https://github.com/josebalius/ngReactGrid https://github.com/josebalius/ngReactGrid

shaohua 12y ago

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

nogridbag 12y 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.
dengar007 12y ago
Nice -- I didn't know about this site. Added the component I've been working on to it :) Thanks for sharing!
leesalminen 12y 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 12y ago

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

nogridbag 12y 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.

leesalminen 12y 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 12y 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.

hawleyal 12y 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 12y 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
- hawleyal 12y 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.
carterehsmith 12y 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-refresh-aws-console.png http://www.gregarnette.com/wp-content/uploads/2011/12/ec2-re...
- hawleyal 12y ago

dengar007 12y ago

Hey cool! I've been working on something similar. http://dynamictyped.github.io/Griddle/ http://dynamictyped.github.io/Griddle/ I'm glad to see more components coming to React :)

carterehsmith 12y 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/ http://www.reactjsx.com/
- dengar007 12y ago
  Added it :) Didn't even realize that existed until seeing this thread.