Show HN: Grid.js – Advanced table library that works everywhere

afshinmeh | 390 points

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) 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)

Please let me know if you have any suggestions or comments. Happy hacking! :computer:

afshinmeh | 4 years ago

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/

Bishonen88 | 4 years ago

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!

bubbab | 4 years ago

Has anyone tried Tabulator[1]?

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

danseagrave | 4 years ago

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.

Eduard | 4 years ago

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

rootcage | 4 years ago

A similar product is https://datatables.net/

boromi | 4 years ago

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?

triceratops | 4 years ago

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

rkagerer | 4 years ago
[deleted]
| 4 years ago

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 for more goodness

hendry | 4 years ago

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.

sliptype | 4 years ago

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.

guggle | 4 years ago

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.

silviogutierrez | 4 years ago

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.

byteshock | 4 years ago

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?

mason55 | 4 years ago

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

fedd | 4 years ago

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

ggmartins | 4 years ago

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'

OJFord | 4 years ago

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!!

yingw787 | 4 years ago

Congrats! Curious why you haven't considered https://react-table.js.org/

rafaelturk | 4 years ago

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?

guruparan18 | 4 years ago

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.

ng12 | 4 years ago

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 ?

codegladiator | 4 years ago

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

babaganoosh89 | 4 years ago

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

wnevets | 4 years ago

How does this compare to competitors like Ag-Grid?

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

JSavageOne | 4 years ago

Good job! Looks great.

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

LukaszWiktor | 4 years ago

Anyone have thoughts on how to support the following in ReactJS

-Sortable columns

-Multi-select filters in columns

-expandable rows

kangaroozach | 4 years ago

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'] ]
    });
huhtenberg | 4 years ago

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

moralestapia | 4 years ago

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

Phrodo_00 | 4 years ago

What benefits does it have over mat-table?

seastonATccs | 4 years ago

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

colesantiago | 4 years ago

Just wanted to add, tabulator is really good too and maintainer is very helpful, active; good docs. http://tabulator.info/

mrtweetyhack | 4 years ago

Are we just buy a domain for a library now?

docuru | 4 years ago

I like to turn JavaScript off for these sites

beprogrammed | 4 years ago

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

Sembiance | 4 years ago