Show HN: Grid.js – Advanced table library that works everywhere (2020) | Hacker News Reader

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

gridjs.io

97 pointsddtaylor28 comments

Sorry for grumbling, but back in the '90s we called tables “advanced” if they could work with multiple lazy db data sources, provide sub-tables for value selection, formulas and so on [1]. Multi-sorting, interactive filtering, grouping was just “regular”. These tables were basically the entire UI part of your database, apart from detail forms.

Nowadays “advanced” seems to be a static array or rows that can be sorted by a column.

[1] http://www.ehlib.com/en/screenshots

yeah progress in infrastructure can often cause regress at the upper layer (new infra, new culture, less knowledge, less effort)

that said I believe non linear display like ehlib is probably handled through subtrees/nested-components in the react world

Although today's platform tech is amazing (run the same code/app across multiple device types, multiple OSes, wide range of sizes, scale to millions of users, etc.), at the app building level it is indeed disappointing.

In the era you describe, table libraries could connect to a backend data store via queries, then the layers of machinery could figure out how to write changes back to the data store (either automatically, or with developer hinting on complex cases). Sometimes with a setting to choose between optimistic or pessimistic concurrency, etc.

I suspect the next big wave of web app development technology will span client+server tiers, keep most of today's advantages, and re-add the higher-level abstractions from that era. Best case, this will meaningfully reduce application development cost and time.

Whilst this is more than a simple HTML table, I wouldn't consider it advance compared to full data-grid examples like https://www.ag-grid.com/.

My favorite feature in AG-grid is https://www.ag-grid.com/javascript-data-grid/range-selection...

Wish I could find this on an open source grid.

Glide Data Grid has that and is open source. https://grid.glideapps.com

why is styled components required? seems like concerns arent well separated in this one

It’s used for the overlay editors. It’s on our list for things to remove in the next major release.

Thanks!

The first thing I look for in these kinds of projects is "have the authors thought about accessibility?" In this case I found this in the pagination:

There are ARIA attributes, which is good. But the values for tabindex, role, title, and aria-label all are redundant and could just be removed. On the other hand, there is no aria-controls or similar that would explain what this button actually does.

So no, the authors have not really thought about accessibility.

This. There’s no shortage of data-table projects but finding one that has some kind of accessibility cover and works with Angular has basically reduced our choice to ag-grid…

I am very curious how this works. Is it for an internal app or public website? Do you have the users who actually work with ag-grid via screen reader? How do you test your app (i.e. for screen reader users)?

Even ag-grid isn’t accessible by default. You have to turn on their accessibility mode for it to play nice with screen readers which obviously has negative implications elsewhere or it wouldn’t be an option.

I am using Grid.js and I have used Datatables before. However I have not found “advanced” library in a sense that none of them can do good table collapsion and rendering on mobile. Are there any grid systems that could handle mobile particularly well?

I'm not sure how to interpret a show HN with a year on it.

This is a repost of a show HN from 2020?

Or this is a new show HN of a project that hasn't been touched since 2020?

Something else?

Does this provide a method to send only updates/differences/deltas to the frontend and update only the changed/new table rows? (In other words, consume a JSON on the backend and send only updated rows to the frontend in order to avoid sending the entire table data for every update.) Or is there a more advanced table system that can handle this?

(Live-updating views of tabular data retrieved via an SQL query are a requirement that I've been looking for a PHP/Laravel-JS solution for, but maybe there's something better in the pure-JS world for it. Should I be looking at a solution like Meteor, FeathersJS, or Phoenix LiveView?)

edit: Wow, I just looked at AG-Grid mentioned in other comments, and the first example is a live-updating table ("Live Streaming Updates"). But it doesn't seem to provide server-side diffing of the source data...guess I'll have to handle that manually in application logic by making the frontend request rows with id > the last id it has.

I just built something like that in vanilla JS for a client, took a few days. Dump the table as JSON, render it as a HTML table with inputs, add event listeners for input.

On input, convert that row back to JSON and diff it. Did it change? Mark the row as "changed". (You can skip the diffing to keep it simple and just mark it changed on input, but then it will keep it marked as changed even if you restore the original value.)

On save, run document.querySelectorAll('tr.changed'), convert them back to JSON and send to backend.

Doing everything with vanilla JS and DOM manipulation is a bit gnarly though (in terms of the readability/maintainability of the resulting code), I would be surprised if there isn't an elegant solution out there for this already.

Of course by the time I was done I realized I could have just taught my client how to use Ultorg... but this was more fun :)

I see how you did it, yeah - makes sense. One of my teammates implemented the same thing for a HTML table editor for a product many years ago.

I just completed my own task by getting the frontend to provide the latest row ID it has to the backend. Guess it was really simple since I didn't actually need to update existing records, just get new ones.

Ultorg looks like MS Access for general data sources (including Access itself as a data source). Developers just end up rebuilding existing ideas on new infrastructure, hah. We had the same requirement just a few weeks ago and ended up showing the business users how to use HeidiSQL :)

Good, but did you take a look at http://tabulator.info ?

I was looking around last week for tables like this but then with some more intricate filtering with logical operators.

I had in mind something along the lines of query: "columnA: <5 && columnB: >=12" Or am I asking too much of the js ecosystem and should I go back to playing with excel?

Anyone any idea if there's a solution that does what I want?

How about https://github.com/finos/perspective

Holy shit-balls this looks fucking incredible...

Mmh looks pretty similar to Simple-DataTables (https://github.com/fiduswriter/Simple-DataTables). I was pretty familiar with the jQuery DataTables plugin (https://datatables.net/), so this was the obvious migration strategy to not have the jQuery dependency...

I use it as UX improvement on my hugo blog (e.g. here https://pilabor.com/blog/2022/01/the-ultimate-boot-stick/) and it was pretty easy to integrate...

Maybe I'll try this one out just for fun...

I'd consider using this in place of the built-in Vuetify data table because of your resizable columns and fixed headers.

Virtual Scrolling might be the deciding factor though. Is this supported? I couldn't find anything in the docs (on mobile)

JQuery Datatable is pretty good as well. More features. You'll have to include Jquery which I guess feels a bit unclean but you can easily make it work with Vue, Angular etc if you know those libraries well.

"works everywhere"

Even browsers that don't have JavaScript? I sure hope so - after all, it's certainly not as if rendering tables is a solved problem since the 90s.

Chiming in with my siblings, not to berate an OSS project and I'm probably missing something as I just skimmed through the docs, but how is this advanced?

I prefer https://tanstack.com/table/v8

Reply on news.ycombinator.com