Live data from Hacker News

React Table is a “headless” UI library

github.com

41–50 of 115 posts

Re: React Table is a “headless” UI library

#41

I spent a ridiculous amount of time working on optimized table rendering in the early years of my company, and I came to a simple conclusion: if you want to display full-screen tables, with dense data, and scroll around fast, the only option is canvas. "Virtualized" HTML tables are always an order-of-magnitude slower, no matter how much effort you put into optimization. The fundamental reason why you end up back at c…

Using canvas also means you can't select text, copy/paste, open links, etc, which is a non-starter in most cases.

Re: React Table is a “headless” UI library

#42
post #8

Every few months I look at the state of table libraries on the web. Of course, it's great to have pagination, sorting, searching - these are the basics. I have been impressed with jQuery DataTables. jQuery DataTables has a lot of features, including export to Excel. jQuery DataTables works with Vue without any issues so long as you never mutate the table data. Mutating table data in Vue can be accommodated, but requi…

> Is there anything that approaches the feature set of jQuery DataTables?

https://slickgrid.net/ have a look at the https://6pac.github.io/SlickGrid/examples/

Re: React Table is a “headless” UI library

#43
post #30

Earlier quoted context omitted.

Pagination and loading as you scroll is a hack.. I've written software using virtual lists in languages from VB6 to React. They're not a hack; they've been a staple of UI libraries for decades.

I am sorry but it is a hack, if I can fit that 1000 rows of CSV in a few KBs of memory and and Array of 1000 objects is fast to manipulate paginating the UI layer because the UI is slow is a necessary workaround not something you do because of UX. Your text editor is not painting all the text in a large file , how would you feel if you had to display a large file in an html view you had to paginate it and do all the…

I have the same scrolling issues on large, complex Excel spreadsheets. Every environment is going to hit a wall at some point when the UI is forced to display a certain amount of data.

Re: React Table is a “headless” UI library

#45
I think the team behind this is somewhat trivializing this change by saying that a UI table library "has no business being in charge of your UI". Is the expectation is that the following are all bespoke, easy-to-implement features that application teams should rewrite from scratch and maintain internally, and should not be considered when looking at a library to deal with rendering tabular data in an application?

* Support for virtualized rows/columns * Support for fixed headers * Support for frozen columns * Support for resizable columns * Support for re-ordering columns * Dealing with page / container resizing. * Support for context menus in the context of all of the above * Support for master/detail views * Support for tree data

My take is that the inverse is true. Structure/Pagination/sorting/filtering of data sets is pretty trivial and in most cases the out-of-the-box functionality that libs provide for these is insufficient and ends up being overwritten anyway. The above list is exactly what I'm looking to outsource when looking at a grid library.

Re: React Table is a “headless” UI library

#46

I spent a ridiculous amount of time working on optimized table rendering in the early years of my company, and I came to a simple conclusion: if you want to display full-screen tables, with dense data, and scroll around fast, the only option is canvas. "Virtualized" HTML tables are always an order-of-magnitude slower, no matter how much effort you put into optimization. The fundamental reason why you end up back at c…

How do you deal with copy, paste, and accessibility issues?

Re: React Table is a “headless” UI library

#47
post #43

Earlier quoted context omitted.

I am sorry but it is a hack, if I can fit that 1000 rows of CSV in a few KBs of memory and and Array of 1000 objects is fast to manipulate paginating the UI layer because the UI is slow is a necessary workaround not something you do because of UX. Your text editor is not painting all the text in a large file , how would you feel if you had to display a large file in an html view you had to paginate it and do all the…

I have the same scrolling issues on large, complex Excel spreadsheets. Every environment is going to hit a wall at some point when the UI is forced to display a certain amount of data.

I understand that some application are not optimized, a good GUI widget would render only the visible part and a buffer , the fact that we don't have such good library or even beter native component in HTML is sad , especially that people are making desktop apps with electron. What is more sad is trying to excuse this with some fake ideas that pagination and bad implemented infinity scrolling is superior to optimized GUIs.

Just in case I am not clear. Say you have an Array with 10k image thumbnail urls and you want to show them in a Grid, this Array fits in memory so paginating using network request is stupid and makes things slow. So if all images urls are in memory you can create 10k IMG elemetns because the DOM is slow(especially if you have some DIvs and spans to wrape elements around, center some img name , maybe a button or menu). So if on my screen I can fit 15 items , I could create 30 img elements and as you scroll you would move the UI items that are no longer visible at the bottom and change the attributes like src, name etc. This is not simple and decent toolkits do this for you by default similar how a text editor can load a large file fast because is not painting all of the file text.

Re: React Table is a “headless” UI library

#48

And this is an advantage over plain old HTML how? Did people for get HTML exists and can be used without all this fluff?

https://github.com/tannerlinsley/react-table/blob/master/doc... Filtering, sorting, collapsing, etc. Can’t do any of that with plain HTML. And if the rest of your app is React, trying to integrate something non-React is just a headache.

> Can’t do any of that with plain HTML

Well, you can if you reload the page from the backend for each of those operations. Like we did in the 00s.

Re: React Table is a “headless” UI library

#49
post #8

Every few months I look at the state of table libraries on the web. Of course, it's great to have pagination, sorting, searching - these are the basics. I have been impressed with jQuery DataTables. jQuery DataTables has a lot of features, including export to Excel. jQuery DataTables works with Vue without any issues so long as you never mutate the table data. Mutating table data in Vue can be accommodated, but requi…

https://quasar.dev/

https://xaksis.github.io/vue-good-table/

haven't tried them yet, current personal vue favorites

keeping for reference when will need to use

Post reply on HN