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.
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.
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…
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 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)?
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?
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 :)
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?
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.
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?
Nowadays “advanced” seems to be a static array or rows that can be sorted by a column.
[1] http://www.ehlib.com/en/screenshots