
Show HN: Grid.js – Advanced table library that works everywhere - afshinmeh
https://gridjs.io/?hn
======
afshinmeh
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:

~~~
simonw
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://observablehq.com/@simonw/grid-js-with-
datasette?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight%2Fbiopics%252Fbiopics.json)

~~~
afshinmeh
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
> Oh great!

The correct response :-)

------
Bishonen88
Good effort! I'm not sure how 'advanced' it is though. I'd even go as far as
call it 'simple'?

E.g. the following features would be required to make it advanced (list not
complete):

\- Export data (csv)

\- Align columns based on their content

\- Tree data (parent/child rows)

\- Total rows

\- Formatting applied based on data type (currency, numerical etc.)

\- Reordering columns

\- Resizing columns

\- Hiding columns

\- Optional filter field for every column

\- Conditional formatting

\- Tripple Sorting & Multiple sorting (sort by more than 1 column at a time)

\- ... more

In the react world, I found this to be a good foundation for an 'advanced'
table. Since it's rather inconsistently developed, I ended up forking it for
myself and working on my own copy, removing unneeded elements and enhancing
with everything else I do need.

[https://material-table.com/](https://material-table.com/)

~~~
afshinmeh
Thanks for your feedback.

I agree that Grid.js is not a full-featured plugin _yet_ and it's still
missing essential features, like those that you mentioned but please bear in
mind that:

\- I have only released the first version of the library.

\- I have been focusing on fundamental blocks of a lightweight _data
processing_ library (see: [https://github.com/grid-
js/gridjs/tree/master/src/pipeline](https://github.com/grid-
js/gridjs/tree/master/src/pipeline)). That's what took most of my time.

\- Grid.js is framework agnostic which is a bit different compared to other
libs

The pipeline is very easy to extend and I'm confident that most of those
features will be added soon.

~~~
Bishonen88
I don't doubt that you can and possibly will make this a great library. It
seems like a nice and clean foundation for one. I just commented on the word
'advanced' in the title. You admitted yourself that it's missing essential
features, so advanced might be an adjective you'd want to use for release 2.0
;)

------
bubbab
How accessible is Grid.js? The main differentiator between table libraries for
me these days is accessibility. Many libraries and frameworks out there do it
poorly. The better ones are often tied to company-specific frameworks.

From playing around a bit, I've at least noticed that sortable headers have no
focus indicator, the "sort column ascending" text gets included in the
column's accessible name, and un-sortable column headers are read as clickable
by screen readers.

I would LOVE a framework-agnostic table library that's both lightweight and
fully accessible. If there's a chance for Grid.js to take this in its
philosophy, I would be all in!

~~~
nohuhu
> The better ones are often tied to company-specific frameworks.

That is because to implement accessibility in a grid/tree widget to a
meaningful level, you need _a lot_ of underlying code. Even in modern
browsers. Source: implemented accessibility in Ext JS framework.

One of the most often asked questions from users of Ext JS was: hey, can we
have the Grid widget without all the bloat? Sure, and ~95% of the framework
exists so that the Grid can have its features and work reliably across all the
browsers. You can probably do without the rest 5%, no biggie.

------
danseagrave
Has anyone tried Tabulator[1]?

[1] [http://www.tabulator.info/](http://www.tabulator.info/)

~~~
btzll
I have, it's amazing. The only thing it's missing is drag and drop to outside
divs. Other than that, it's feature rich, very customizable and the best from
all other js grids I tried.

~~~
olifolkerd
That feature will be coming soon :)

------
Eduard
I'd say the claim "works everywhere" does not consider small screens. I had a
look at the examples with Android Chrome in portrait viewport, and cell
content gets either cut off with ellipses on overflow, or breaks long words
such as email addresses unintelligibly over several lines.

In my opinion, scrollable-by-touch tables such as Bootstrap 's "responsive
tables" fix these issues. Add "scroll for more" shadows for even better UX.

------
rootcage
Out of curiosity how is this better than current Grid/Table implementations?

~~~
afshinmeh
\- Grid.js is a data-processing pipeline (see [https://github.com/grid-
js/gridjs/tree/master/src/pipeline](https://github.com/grid-
js/gridjs/tree/master/src/pipeline)) which enables you to easily extend the
library \- It's framework agnostic! \- It is written in TypeScript \- Fully
tested and documented

Also please take a look at
[https://gridjs.io/docs/philosophy](https://gridjs.io/docs/philosophy).

------
boromi
A similar product is [https://datatables.net/](https://datatables.net/)

~~~
joaodlf
datatables uses jquery, though.

~~~
ies7
From user point of view, datatables can do much more than Grid.js

~~~
werdnapk
I've found datatables to be my only real solution when dealing with lots of
server side data. It has it's quirks for sure, but there really isn't anything
I haven't been able to accomplish with it so far (although making it do what
you want sometimes can involve some head scratching).

Edit: I see [http://www.tabulator.info/](http://www.tabulator.info/) mentioned
in the comments. This looks pretty full featured... time to do some research.

------
triceratops
Does anyone know why HTML tables can't natively support a lot of common table
functionality? Lazy rendering, fixed column headers, sorting and so on? Are
there any proposals to add all this natively?

~~~
orange8
I think a bit part of HTMLs success is not being too opinionated about more
advanced/specific UI components. Think of it more of as a low level GUI
toolkit constructor, one to builg actual GUI toolkit on top of, for example
material-ui and bootstrap.

~~~
Zecc
That doesn't really answer the question though.

It's up to the browser implementers how they do tables, and they certainly
could go ahead and cater to common cases in this area. As user agents, it's
the browsers' job to be helpful to the user regardless of what the HTML looks
like.

For example, nothing in HTML talks about having a search prompt appear on
Ctrl+F, yet everyone does it.

~~~
orange8
HTML does not have a table component because it is a markup language, and that
kind of interactivity (sorting, filtering, pagination etc) is really beyond
its scope. The exception to this are basic user input fields (buttons, check-
boxes etc).

This is by design, browser vendors are focused on implementing low level APIs
and functionality, leaving the higher level component development stuff up-to
web developers and designers.

Use a combination of JS, CSS and HTML to create advanced components from
scratch, or use one of the thousands of open-source libraries available. The
library linked to in this post is a good example of that.

> It's up to the browser implementers how they do tables, and they certainly
> could go ahead and cater to common cases in this area.

They already have, via the <table> tag ([https://developer.mozilla.org/en-
US/docs/Learn/HTML/Tables/A...](https://developer.mozilla.org/en-
US/docs/Learn/HTML/Tables/Advanced)).

------
rkagerer
This looks really cool although I find it disheartening that we need to resort
to JavaScript simply to construct a decent table.

~~~
huhtenberg
You are trolling, mate.

Obviously nobody NEEDS to resort to that. However there's a difference between

    
    
        ... simply to construct a decent table.
    

and

    
    
        ... to construct a decent table simply.
    

which is what this lib is for.

~~~
rkagerer
Nice distinction! Although I'm not sure "trolling" is a fair dig. My comment
was genuine.

When I wrote my first HTML page you could make them out of basic <TABLE> tags
and nobody would beat you over the head with a styleguide for doing it wrong.
I found them approachable if you followed some basics like avoiding nesting,
and with care, dynamic sizing went a long way. But I understand some people
are zealously against them (for good reason). CSS addressed several of the
shortcomings but introduced new complexity and gotchas. My frustration is that
instead of evolving to simple, elegant and approachable syntax, we landed in a
place that calls for a library to patch in those attributes on top. (And now
I'm greeted with bank statements that dynamically add content as you scroll,
making it impossible to cut and paste the data from a spreadsheet).

None of that takes away my admiration for the author's work, I'd just prefer a
world where the hole filled by this library didn't exist in the first place
:-).

------
hendry
[https://codemadness.org/datatable-
example.html](https://codemadness.org/datatable-example.html) is the lightest
version of sortable table in JS i've seen.

[https://git.codemadness.org/jscancer/files.html](https://git.codemadness.org/jscancer/files.html)
for more goodness

------
sliptype
This looks nice but much less configurable than ag-grid.

I've worked on projects that had very intense excel-level requirements for
their data grids and ag-grid was a dream.

~~~
afshinmeh
Agreed. This is the first version of the library though. I will definitely add
more core plugins and configurations soon. Stay tuned!

------
guggle
Good, I like framework agnostic components. I've been playing with two other
libraries recently: Dropzone js and Sortable js. Grid js looks useful too.

------
silviogutierrez
Looks great! Any plans to support SSR in say, the React use case? useEffect
won't run on the server and obviously you don't have the DOM.

I'd love to use this for the table to come rendered from the server then
hydrate on the frontend and enable AJAX pagination, etc.

Completely understand if you can't, after all, you'd likely need to more
tightly integrate with ReactDOMServer.

~~~
afshinmeh
That makes sense. SSR should be possibly and relatively easy to achieve. I
will create a ticket.

------
byteshock
Looks awesome. We just tested vue-tables-2 yesterday but the lack of
customization is making it hard to implement. This looks very promising, I’ll
be taking a look again tomorrow!

Do you plan on releasing special themes or options for css frameworks like
bootstrap 4? I had a quick look on my phone so I apologize if this is already
available.

------
mason55
One of the issues we find is that as the number of rows/columns in a table
grows, the performance of native browser tables just craters and you have to
fallback to your own rendering engine using <canvas> elements.

Have you pushed the rendering performance at all to see how far you can get
without scrolling getting painful or seeing tearing artifacts?

~~~
mstade
How many columns/rows can you realistically fit in screen? Isn’t this
practically solved for most use cases by just having as many as needed for
rendering and replacing contents as necessary?

I’ve worked in financial institutions for going on a decade at this points and
there are grids everywhere. I’ve learned a thing or two about them in these
years and that’s:

\- everyone wants to implement their own, for reasons

\- they’ll mostly do a decent but not quite good job at it, because it’s
complicated and oh hey let’s just all forget about accessibility (traders love
keyboard navigation!)

\- performance is always a problem till someone reinvents virtualized row
rendering

\- excel beats your thing anyway and everyone knows it so if you just have
decent excel import or even just good paste handling you’ll do fine

\- 99% of grids people actually use never show more than two dozen rows or so,
and then implements pagination and just like with google no one ever goes to
page 2 of the results

If you have a pressing need to handle thousands/millions of rows, it’s likely
not for display but for editing, in which case:

1\. Just use excel

2\. Virtualized rows still has your back, ain’t no screen showing more than
maybe a hundred rows or so anyway, and even if it did no one reads that far

Grids really feel to me like a rite of passage for front end developers, along
with a basic charting library and mildly interesting application framework.
Incidentally, this is also how I’ve landed most of my jobs, so maybe I’m
biased.

EDIT: This is by no means a dig at the author and I’m sorry if it may come
across as such! This library looks like a fine piece and I wish you every
success!

~~~
at-fates-hands
>> Grids really feel to me like a rite of passage for front end developers,

Agreed!

The last two jobs I interviewed for the code challenge was a) hit this API
endpoint, b) pull the data and put into a table and c) make said table
responsive and accessible.

The majority of front-end work these days is either forms or tables. Get good
at both and you'll have steady work forever.

~~~
mstade
You’re right, I forgot about forms – good shout!

------
fedd
Hey, nice grid. Please consider multiple column sort / grouping. It will
suddenly make it like analytics tool... And if add some statistical
functions... Maybe too much for client side, but who knows

------
ggmartins
I like [https://www.npmjs.com/package/react-data-table-
component](https://www.npmjs.com/package/react-data-table-component) but this
one looks cool too. Maybe a dense mode?

------
OJFord
FYI on my small mobile screen (iPhone SE) the demo:

\- ellipsis (good there is one) breaks between second and third dot. I think
the easiest fix for that is to use an actual ellipsis character.

\- break between page '3' and 'next'

------
yingw787
I am so glad I put off making the frontend for my project. It's literally all
tables, and I didn't like how DataTables functioned. So glad you made this and
looking forward to trying it out!!

------
rafaelturk
Congrats! Curious why you haven't considered [https://react-
table.js.org/](https://react-table.js.org/)

------
guruparan18
I am trying to use linking in one of the columns. Looks like using links
breaks the table. Any idea if linking column data is supported out of box?

------
ng12
Do the cell values have to be primitives? Embedding pure JS inside a React app
is easy but using React inside pure JS is usually where the trouble is.

~~~
afshinmeh
They don't have to be. I will definitely test this particular case.

------
codegladiator
What's the "Advanced" part in this ? Vue/quasar tables already provide
extensive functionality and I am sure there are react and angular
alternatives.

I don't think there is a need for a library to work across vue/react/angular
at the same time because no single person is going to use those in a single
project.

I appreciate the project since I am frequently looking for js grid
implementations but what the differentiator here ? Is it performance or
styling or flexibility or just variety of frameworks ?

~~~
spiderfarmer
There absolutely are advantages to libraries that work independent from, or
across multiple frameworks. Most webdevs have experience with multiple
frameworks. It’s nice knowing you can use a library in whatever project you’re
working on.

~~~
afshinmeh
^^

------
babaganoosh89
I'd suggest doing the up/down arrows in css instead of images, the images look
a bit blurry on retina screens

~~~
afshinmeh
Good point. I will definitely change that part.

------
wnevets
On a related note, I glad to see unpkg.com offically supported. Being able to
avoid npm install is just nice sometimes.

~~~
afshinmeh
Awesome!

------
JSavageOne
How does this compare to competitors like Ag-Grid?

One simple feature I see lacking in the ability is the ability to resize
columns

------
LukaszWiktor
Good job! Looks great.

What about performance? Have you tested how many rows can Gird.js handle
without a noticable lag?

~~~
afshinmeh
Thank you!

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.

------
kangaroozach
Anyone have thoughts on how to support the following in ReactJS

-Sortable columns

-Multi-select filters in columns

-expandable rows

~~~
joaodlf
Tabulator should support pretty much all those things, it really is a
fantastic library.

------
huhtenberg
This doesn't render well (it's a malformed input, but still) -

    
    
        const grid = new Grid({
          columns: ['A', 'B', 'C'],
          data: [ ['1', '2', null, '(353) 01 222 3333'] ]
        });

------
moralestapia
Does anyone know of something like this but with editable cells?

~~~
chensformers
jqGrid, DataTables, ag-Grid, jQuerygrid, ... a lot. How many grid libraries do
we need?

~~~
olifolkerd
Tabulator, has most of the features of AG grid and is totally free
[http://tabulator.info/](http://tabulator.info/)

------
Phrodo_00
Tried to run in my atari 800XL - didn't work :P

------
seastonATccs
What benefits does it have over mat-table?

------
colesantiago
I disabled JavaScript and it doesn't load the table.

~~~
boromi
I unplugged my toaster, but it doesn't work?

~~~
colesantiago
Sure, except the major point is this, Progressive Enhancement [0].

This table is useless if it doesn't load without JS, especially if it is a
table that claims to work _everywhere_.

[0] [https://www.gov.uk/service-manual/technology/using-
progressi...](https://www.gov.uk/service-manual/technology/using-progressive-
enhancement#do-not-assume-users-turn-off-css-or-javascript)

~~~
jerrysievert
it looks like it can:

[https://gridjs.io/docs/examples/from](https://gridjs.io/docs/examples/from)

specifically, data rendered as an html table that is then "transformed" in
javascript.

if I'm reading the example correctly, then this is how to have progressive
enhancement with this module.

------
docuru
Are we just buy a domain for a library now?

------
beprogrammed
I like to turn JavaScript off for these sites

------
Sembiance
I thought this was about CSS Grid, but nope, nothing at all to do with that.

~~~
shmelvin512
Maybe read the welcome message again:
[https://news.ycombinator.com/newswelcome.html](https://news.ycombinator.com/newswelcome.html)

It could help you construct a more thoughtful comment next time. It's the most
important principle and really simple to pursue.

