7 ms·

Hello folks :wave: I’m Afshin, the creator of Grid.js. Grid.js is an open-source table library written in TypeScript and published under MIT license. My goal

Hello folks :wave: I’m Afshin, the creator of Grid.js. Grid.js is an open-source table library written in TypeScript and published under MIT license. My goal is to develop a framework agnostic table library that: - Works everywhere. You don’t need a specific framework to use Grid.js - Lightweight and easy to use - Fully documented and tested - Developer friendly. Grid.js is written in TypeScript! Supports all modern web browsers Please take a look at the examples (https://gridjs.io/docs/examples/hello-world https://gridjs.io/docs/examples/hello-world) section and let us know if you have any suggestions. Although Grid.js is currently designed to work with web-browsers, I’m actively thinking and working on adding other integrations like React Native (see https://gridjs.io/docs/philosophy https://gridjs.io/docs/philosophy) Please let me know if you have any suggestions or comments. Happy hacking! :computer:

w-ll 6y ago
It looks like sorting / pagination is all down client side which forces a download of all the rows, how well does this support tables with 10s or 100s of thousands of rows?
- afshinmeh 6y ago
  Correct. I have a PR ready which integrates the sort, search and pagination with the server-side module. Currently, there is a Server Side module that pulls data from the server (https://gridjs.io/docs/examples/server https://gridjs.io/docs/examples/server).
  - freedomben 6y ago
    when you say "server-side" do you mean this is typescript that runs on the server? thus requiring a node-based server?
    - afshinmeh 6y ago
      Not necessarily, any HTTP interface that can return JSON (e.g. Python Flask, PHP, etc)
  - _bxg1 6y ago
    Quick tip: for the client-side, large dataset case, if you want to get fancy it's possible to create a worker thread and perform the sort there, which makes it somewhat faster but more importantly stops it from freezing up the tab while it operates. We did this to great success at my last company when we needed to sort ~200,000 items client-side. The UI thread remained perfectly responsive during the operation and we were able to present the user with a loading spinner while it worked.
pea 6y ago
Great work - really clean documentation, and it looks beautiful! We currently use `react-table`, which is good in that it can support some reasonably large datasets (for instance, here's 2 million rows on the client-side - https://datapane.com/leo/reports/table-test/ https://datapane.com/leo/reports/table-test/ - a bit laggy with sorting, but passable). This may not be the use-case you're going after at all, but have you run any benchmarks for how big a dataset you can support?
- afshinmeh 6y ago
  Thanks! Appreciate your feedback. Well, it is on our roadmap! With Grid.js you will be able to sort, search or process data in a separate thread (Web Worker) and then pass the results to the main thread to render. I'm also thinking about lazy-loading the table rows. Both the Web Worker bit and lazy-loading will be added in a week or two.
  - pea 6y ago
    Cool! Have you checked out https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-virtualized too? Might be totally useless to you, but I think they've done a lot under the hood to optimise table loading. Congrats again on a beautiful product.
    - craigching 6y ago
      I’ve used react-virtualized to render hundreds of thousands of rows, it’s a great library. React-window from the same developer is also worth checking out if you don’t want all the bells and whistles.
simonw 6y ago
I'm playing around with it in an Observable notebook here: https://observablehq.com/@simonw/grid-js-with-datasette https://observablehq.com/@simonw/grid-js-with-datasette Any idea why the columns aren't displaying correctly for wider tables? Take a look at this example: https://observablehq.com/@simonw/grid-js-with-datasette?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight%2Fbiopics%252Fbiopics.json https://observablehq.com/@simonw/grid-js-with-datasette?url=...
- afshinmeh 6y ago
  Oh great! I guess the columns are not properly rendered because there are a lot of columns. That looks like a bug to me. I just created two issues and will release a bug fix soon. Thanks!
  - robertlagrant 6y ago
    > Oh great! The correct response :-)
  - simonw 6y ago
    Awesome :)
- nightski 6y ago
  I took a look at it appears the observable notebook has a stylesheet defined with a table element style that sets a table's max-width to 640px. That is why it is not expanding to fill the width. (I am not associated with the project)
- afshinmeh 6y ago
  Hey Simonw! I fixed both issues with the column/table width and published v1.1.1. See: https://observablehq.com/@afshinmeh/grid-js-with-datasette?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight%2Fbiopics%252Fbiopics.json https://observablehq.com/@afshinmeh/grid-js-with-datasette?u... Please take a look and let me know what you think!
  - 6y ago
XCSme 6y ago
Your documentation is really cool, what did you use to make it?
- cj 6y ago
  https://github.com/grid-js/website https://github.com/grid-js/website Looks like it's made with Facebook's Docusaurus.
  - afshinmeh 6y ago
    Yes!
hn_1234 6y ago
Is there any load testing benchmark results available. if so can you share ?
- afshinmeh 6y ago
  I haven't created a performance report yet but I will definitely create one and add it to the docs. Good point.
fbnlsr 6y ago
Definitely going to try this. I've been using Datatables with Vue but it's not the most user friendly. Thanks for your work!
- afshinmeh 6y ago
  Cheers!
hazz99 6y ago
This looks fantastic! I'm going to start using it immediately. Thankyou for your hard work.
naveen_ 6y ago
It's not mobile friendly.
dandare 6y ago
I am excited to use the vanilla JS version in my project, thanks for not being React only :)
irrational 6y ago
I'd like to see an example of a very wide table (maybe 30 columns). I want to see how it would look on a phone in portrait mode.
- dirtnugget 6y ago
  That’s something I would never like to look at on my phone tbh
  - irrational 6y ago
    But, someone is going to try to do it. Tables on a large screen are easy. The real test of how good a table library is is how it handles small screen sizes. Some libraries drop out columns. Others switch to a vertical format. Some just let scrollbars handle it. I can think of about 10 different ways this is commonly handled. I'd like to see how this library does it.
    - dirtnugget 6y ago
      Yeah but I don’t think there is an instant where showing more than 4 columns on a mobile is readable. I think this lib still squeezes it into the viewport, gotta set minWidth manually. Pretty standard
  - rejschaap 6y ago
    Some users will be irrational
    - dirtnugget 6y ago
      And you cannot please every irrational user. There just no good way to show wide tables on a narrow screen. It’s like trying to transport a load which exceeds the dimensions of its truck. Sure you can in theory drive it if it doesn’t collapse right away but that doesn’t mean you should.
      - irrational 6y ago
rezonant 6y ago
Thanks for submitting and great work so far. The tables it makes definitely look nice. I must admit though, I have a hard time imagining where I could use this right now. Good responsive handling of tables is the most difficult part of using (nonmassive) tables effectively in 2020 and is far and away the main reason I would consider taking on a table library dependency on a project but there doesn't seem to be any effort put in on this front. A table is most useful when you have horizontal space to make use of and information to fill that space, and when you don't you almost always want to replace it with a list that takes advantage of vertical scrolling. Every application should work well on mobile (yes, every application) and it doesn't look like there's anything here for that yet. I don't often deal with massive datasets but I wonder why, if I was, I wouldn't just use one of the many existing, mature, performant datagrid components that are already available if I did... This one looks good but if all it does is very small and simple data sets I'm afraid it doesn't seem terribly useful, because for a table with only 2-3 columns which this component seems to be designed around, I could just do it myself and get a fine result in an hour or so in Angular, including a mobile view version that dumps the table or hides unnecessary columns. Speaking of Angular, "works in" Angular is surely true but would I use it in Angular when I had to handle wrapping it in a component myself when plenty of other more powerful options exist which already integrate very well into Angular? There's so many other nifty features to be had around sticky table headers and rearrangeable columns and HTML templated cell types and optional columns hidden automatically on mobile that are absent or at least not exampled, and I would love to take a look once more of the obvious features are added and mature but right now it feels like a library for newer developers who are not yet comfortable with the fundamentals of tables. It's like bootstrap but only for tables... I think you have a lot of promise in this lib but there's a lot of work to do before I'd use it.
bmn__ 6y ago
> Fully documented The documentation is lacking a section header "see also" that explains the differences to prior art/similar software. A programmer cannot tell whether Grid.js provides an advantage over e.g. https://backgridjs.com https://backgridjs.com without wasting a lot of time on experimentation.

w-ll 6y ago

It looks like sorting / pagination is all down client side which forces a download of all the rows, how well does this support tables with 10s or 100s of thousands of rows?

afshinmeh 6y ago
Correct. I have a PR ready which integrates the sort, search and pagination with the server-side module. Currently, there is a Server Side module that pulls data from the server (https://gridjs.io/docs/examples/server https://gridjs.io/docs/examples/server).
- freedomben 6y ago
  when you say "server-side" do you mean this is typescript that runs on the server? thus requiring a node-based server?
  - afshinmeh 6y ago
    Not necessarily, any HTTP interface that can return JSON (e.g. Python Flask, PHP, etc)
- _bxg1 6y ago
  Quick tip: for the client-side, large dataset case, if you want to get fancy it's possible to create a worker thread and perform the sort there, which makes it somewhat faster but more importantly stops it from freezing up the tab while it operates. We did this to great success at my last company when we needed to sort ~200,000 items client-side. The UI thread remained perfectly responsive during the operation and we were able to present the user with a loading spinner while it worked.

pea 6y ago

Great work - really clean documentation, and it looks beautiful! We currently use `react-table`, which is good in that it can support some reasonably large datasets (for instance, here's 2 million rows on the client-side - https://datapane.com/leo/reports/table-test/ https://datapane.com/leo/reports/table-test/ - a bit laggy with sorting, but passable). This may not be the use-case you're going after at all, but have you run any benchmarks for how big a dataset you can support?

afshinmeh 6y ago
Thanks! Appreciate your feedback. Well, it is on our roadmap! With Grid.js you will be able to sort, search or process data in a separate thread (Web Worker) and then pass the results to the main thread to render. I'm also thinking about lazy-loading the table rows. Both the Web Worker bit and lazy-loading will be added in a week or two.
- pea 6y ago
  Cool! Have you checked out https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-virtualized too? Might be totally useless to you, but I think they've done a lot under the hood to optimise table loading. Congrats again on a beautiful product.
  - craigching 6y ago
    I’ve used react-virtualized to render hundreds of thousands of rows, it’s a great library. React-window from the same developer is also worth checking out if you don’t want all the bells and whistles.

simonw 6y ago

I'm playing around with it in an Observable notebook here: https://observablehq.com/@simonw/grid-js-with-datasette https://observablehq.com/@simonw/grid-js-with-datasette Any idea why the columns aren't displaying correctly for wider tables? Take a look at this example: https://observablehq.com/@simonw/grid-js-with-datasette?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight%2Fbiopics%252Fbiopics.json https://observablehq.com/@simonw/grid-js-with-datasette?url=...

afshinmeh 6y ago
Oh great! I guess the columns are not properly rendered because there are a lot of columns. That looks like a bug to me. I just created two issues and will release a bug fix soon. Thanks!
- robertlagrant 6y ago
  > Oh great! The correct response :-)
- simonw 6y ago
  Awesome :)
nightski 6y ago
I took a look at it appears the observable notebook has a stylesheet defined with a table element style that sets a table's max-width to 640px. That is why it is not expanding to fill the width. (I am not associated with the project)
afshinmeh 6y ago
Hey Simonw! I fixed both issues with the column/table width and published v1.1.1. See: https://observablehq.com/@afshinmeh/grid-js-with-datasette?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight%2Fbiopics%252Fbiopics.json https://observablehq.com/@afshinmeh/grid-js-with-datasette?u... Please take a look and let me know what you think!
- 6y ago

XCSme 6y ago

Your documentation is really cool, what did you use to make it?

cj 6y ago
https://github.com/grid-js/website https://github.com/grid-js/website Looks like it's made with Facebook's Docusaurus.
- afshinmeh 6y ago
  Yes!

hn_1234 6y ago

Is there any load testing benchmark results available. if so can you share ?

afshinmeh 6y ago
I haven't created a performance report yet but I will definitely create one and add it to the docs. Good point.

fbnlsr 6y ago

Definitely going to try this. I've been using Datatables with Vue but it's not the most user friendly. Thanks for your work!

afshinmeh 6y ago
Cheers!

hazz99 6y ago

This looks fantastic! I'm going to start using it immediately. Thankyou for your hard work.

naveen_ 6y ago

It's not mobile friendly.

dandare 6y ago

I am excited to use the vanilla JS version in my project, thanks for not being React only :)

irrational 6y ago

I'd like to see an example of a very wide table (maybe 30 columns). I want to see how it would look on a phone in portrait mode.

dirtnugget 6y ago
That’s something I would never like to look at on my phone tbh
- irrational 6y ago
  But, someone is going to try to do it. Tables on a large screen are easy. The real test of how good a table library is is how it handles small screen sizes. Some libraries drop out columns. Others switch to a vertical format. Some just let scrollbars handle it. I can think of about 10 different ways this is commonly handled. I'd like to see how this library does it.
  - dirtnugget 6y ago
    Yeah but I don’t think there is an instant where showing more than 4 columns on a mobile is readable. I think this lib still squeezes it into the viewport, gotta set minWidth manually. Pretty standard
- rejschaap 6y ago
  Some users will be irrational
  - dirtnugget 6y ago
    And you cannot please every irrational user. There just no good way to show wide tables on a narrow screen. It’s like trying to transport a load which exceeds the dimensions of its truck. Sure you can in theory drive it if it doesn’t collapse right away but that doesn’t mean you should.
    - irrational 6y ago

rezonant 6y ago

Thanks for submitting and great work so far. The tables it makes definitely look nice. I must admit though, I have a hard time imagining where I could use this right now. Good responsive handling of tables is the most difficult part of using (nonmassive) tables effectively in 2020 and is far and away the main reason I would consider taking on a table library dependency on a project but there doesn't seem to be any effort put in on this front. A table is most useful when you have horizontal space to make use of and information to fill that space, and when you don't you almost always want to replace it with a list that takes advantage of vertical scrolling. Every application should work well on mobile (yes, every application) and it doesn't look like there's anything here for that yet. I don't often deal with massive datasets but I wonder why, if I was, I wouldn't just use one of the many existing, mature, performant datagrid components that are already available if I did... This one looks good but if all it does is very small and simple data sets I'm afraid it doesn't seem terribly useful, because for a table with only 2-3 columns which this component seems to be designed around, I could just do it myself and get a fine result in an hour or so in Angular, including a mobile view version that dumps the table or hides unnecessary columns. Speaking of Angular, "works in" Angular is surely true but would I use it in Angular when I had to handle wrapping it in a component myself when plenty of other more powerful options exist which already integrate very well into Angular? There's so many other nifty features to be had around sticky table headers and rearrangeable columns and HTML templated cell types and optional columns hidden automatically on mobile that are absent or at least not exampled, and I would love to take a look once more of the obvious features are added and mature but right now it feels like a library for newer developers who are not yet comfortable with the fundamentals of tables. It's like bootstrap but only for tables... I think you have a lot of promise in this lib but there's a lot of work to do before I'd use it.

bmn__ 6y ago

> Fully documented The documentation is lacking a section header "see also" that explains the differences to prior art/similar software. A programmer cannot tell whether Grid.js provides an advantage over e.g. https://backgridjs.com https://backgridjs.com without wasting a lot of time on experimentation.