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…
React Table is a “headless” UI library
41–50 of 115 posts
Re: React Table is a “headless” UI library
#42Every 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://slickgrid.net/ have a look at the https://6pac.github.io/SlickGrid/examples/
Re: React Table is a “headless” UI library
#43Earlier 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…
Re: React Table is a “headless” UI library
#44Re: React Table is a “headless” UI library
#45* 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
#46I 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…
Re: React Table is a “headless” UI library
#47Earlier 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.
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
#48And 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.
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
#49Every 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://xaksis.github.io/vue-good-table/
haven't tried them yet, current personal vue favorites
keeping for reference when will need to use