6 ms·

Am I the only one who read the article and hoping to see an implementation =)? Any suggestions on any good open source data tables components you guys use? The

by shrumm 7y ago

Am I the only one who read the article and hoping to see an implementation =)? Any suggestions on any good open source data tables components you guys use? The Adamn Lynch article that was on HN a few months ago was great, with code examples - https://adamlynch.com/flexible-data-tables-with-css-grid https://adamlynch.com/flexible-data-tables-with-css-grid

teddyuk 7y ago
I was waiting for the "and here is where you can get it (half expecting to have to sign up)" but nothing
derekbreden 7y ago
The appropriately named DataTables[1] has worked well for me recently. - It’s focused entirely on tables (as opposed to being a more general widget framework). - I believe it covers most of the functionality discussed in the article. - It has a mobile vertical layout. [1] https://datatables.net/ https://datatables.net/
cjauvin 7y ago
As all the features were being listed, I scrolled with the exact same hope :-) I have been using Sencha/ExtJS' grid for that purpose, which is very powerful and versatile, and recently I've been contemplating ag-grid, which seems very nice also.
- Davertron 7y ago
  We use Ag-grid at my company. It's probably the most fully-featured data grid I've ever worked with on the Web, but it definitely has some pain points. I think it basically supports almost everything mentioned in this article out of the box (except for modals etc., which shouldn't be part of the grid itself anyway...). They even recently added support for charting selected ranges of data from the table. Be forewarned though: if you're trying to use this from React with dynamic data that can be modified on the client, you're probably not going to have fun. Ag-grid is a vanilla JS library with a very thin React wrapper written around it, so even though on the surface it looks like it fits into the React model, most complex things you'll want to do end up meaning you have to use the imperative table API. I can't speak to how it fits in with other frameworks out there, but I would imagine it's going to be a similar situation. That being said, if you're just going to drop some data into the table that's read-only, i.e. just for analysis etc., I think it's pretty solid and hard to find something with anywhere near a comparable level of features.
  - yread 7y ago
    Ag-grid looks very cool but it's almost a megabyte of minified javascript. Is there a way to cut out unneeded features?
  - cjauvin 7y ago
    Oh thank you for this explanation and warning, I am indeed contemplating using the React version of Ag-Grid (for the experimental rewrite of a relatively complex internal management app, written entirely in ExtJS 4, and I was wondering how well it would integrate into it (especially given that it has flavours for all the major frameworks, React being only one of them).
Sharlin 7y ago
Shameless plug (I no longer work at Vaadin, but was part of the original dev team of vaadin-grid): https://vaadin.com/components/vaadin-grid https://vaadin.com/components/vaadin-grid
JangoSteve 7y ago
I created one a while ago called Dynatable. It's currently a jQuery plugin, but we already have a vanilla JS rewrite mostly done, so that'll be coming soon. https://www.dynatable.com/ https://www.dynatable.com/
Demiurge 7y ago
Same here, I haven't seen anything like this for React.js
- milesokeefe 7y ago
  I've found AntD's table to be able to do all these things. There are some gotchas with column widths when using horizontal scrolling with fixed header and fixed column(s), but it works.
mstijak 7y ago
Using CxJS grid and other widgets it's relatively easy to support all of the scenarios mentioned in this amazing article. Please note that CxJS is not open-source. https://docs.cxjs.io/widgets/grids https://docs.cxjs.io/widgets/grids https://gallery.cxjs.io/material/grid/basic https://gallery.cxjs.io/material/grid/basic

by shrumm 7y ago

teddyuk 7y ago

I was waiting for the "and here is where you can get it (half expecting to have to sign up)" but nothing

derekbreden 7y ago

The appropriately named DataTables[1] has worked well for me recently. - It’s focused entirely on tables (as opposed to being a more general widget framework). - I believe it covers most of the functionality discussed in the article. - It has a mobile vertical layout. [1] https://datatables.net/ https://datatables.net/

cjauvin 7y ago

As all the features were being listed, I scrolled with the exact same hope :-) I have been using Sencha/ExtJS' grid for that purpose, which is very powerful and versatile, and recently I've been contemplating ag-grid, which seems very nice also.

Davertron 7y ago
We use Ag-grid at my company. It's probably the most fully-featured data grid I've ever worked with on the Web, but it definitely has some pain points. I think it basically supports almost everything mentioned in this article out of the box (except for modals etc., which shouldn't be part of the grid itself anyway...). They even recently added support for charting selected ranges of data from the table. Be forewarned though: if you're trying to use this from React with dynamic data that can be modified on the client, you're probably not going to have fun. Ag-grid is a vanilla JS library with a very thin React wrapper written around it, so even though on the surface it looks like it fits into the React model, most complex things you'll want to do end up meaning you have to use the imperative table API. I can't speak to how it fits in with other frameworks out there, but I would imagine it's going to be a similar situation. That being said, if you're just going to drop some data into the table that's read-only, i.e. just for analysis etc., I think it's pretty solid and hard to find something with anywhere near a comparable level of features.
- yread 7y ago
  Ag-grid looks very cool but it's almost a megabyte of minified javascript. Is there a way to cut out unneeded features?
- cjauvin 7y ago
  Oh thank you for this explanation and warning, I am indeed contemplating using the React version of Ag-Grid (for the experimental rewrite of a relatively complex internal management app, written entirely in ExtJS 4, and I was wondering how well it would integrate into it (especially given that it has flavours for all the major frameworks, React being only one of them).

Sharlin 7y ago

Shameless plug (I no longer work at Vaadin, but was part of the original dev team of vaadin-grid): https://vaadin.com/components/vaadin-grid https://vaadin.com/components/vaadin-grid

JangoSteve 7y ago

I created one a while ago called Dynatable. It's currently a jQuery plugin, but we already have a vanilla JS rewrite mostly done, so that'll be coming soon. https://www.dynatable.com/ https://www.dynatable.com/

Demiurge 7y ago

Same here, I haven't seen anything like this for React.js

milesokeefe 7y ago
I've found AntD's table to be able to do all these things. There are some gotchas with column widths when using horizontal scrolling with fixed header and fixed column(s), but it works.

mstijak 7y ago

Using CxJS grid and other widgets it's relatively easy to support all of the scenarios mentioned in this amazing article. Please note that CxJS is not open-source. https://docs.cxjs.io/widgets/grids https://docs.cxjs.io/widgets/grids https://gallery.cxjs.io/material/grid/basic https://gallery.cxjs.io/material/grid/basic