React Table is a “headless” UI library • Hacker News Board

Re: React Table is a “headless” UI library

#31

Post by manigandham » Mon, Nov 25, 2019, 8:43 PM UTC

simion314 wrote: post #29

is there a library that can render a lot of data as performant as native GUIs tabes/data-grids . In my experience just loading 1000 items at once it hangs in the browser native dom lay outing code, a good implementation won't create a GUI widget of each item but only for the visible ones and some buffer ones to have faster scrolling. Pagination and loading as you scroll is a hack, an example scenario would be like yo…

Yes, you should look for "virtualized" lists or scrolling. This is offered by many components in all frameworks.

Here's a popular one: https://github.com/bvaughn/react-virtualized

Re: React Table is a “headless” UI library

#32

Post by akdor1154 » Mon, Nov 25, 2019, 8:44 PM UTC

at-fates-hands wrote: post #23

wnevets wrote: post #4

Earlier quoted context omitted.

how do you do in browser sorting with a plain old html table?

Adding the “sortable” class to a element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column’s value. Tables must use and tags for sortable functionality to work.

The hell? Did you copy and paste this from WordPress docs? That has nothing to do with native html functionality.

Re: React Table is a “headless” UI library

#33

Post by simion314 » Mon, Nov 25, 2019, 8:46 PM UTC

onion2k wrote: post #30

simion314 wrote: post #29

is there a library that can render a lot of data as performant as native GUIs tabes/data-grids . In my experience just loading 1000 items at once it hangs in the browser native dom lay outing code, a good implementation won't create a GUI widget of each item but only for the visible ones and some buffer ones to have faster scrolling. Pagination and loading as you scroll is a hack, an example scenario would be like yo…

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 work that the textarea should have done by itself.

Re: React Table is a “headless” UI library

#34

Post by lowboy » Mon, Nov 25, 2019, 8:50 PM UTC

at-fates-hands wrote: post #23

wnevets wrote: post #4

Earlier quoted context omitted.

how do you do in browser sorting with a plain old html table?

Adding the “sortable” class to a element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column’s value. Tables must use and tags for sortable functionality to work.

this is not native browser behaviour and will only work if you include a JS lib that provides this functionality based on a classname of "sortable"

Re: React Table is a “headless” UI library

#35

Post by simion314 » Mon, Nov 25, 2019, 8:51 PM UTC

manigandham wrote: post #31

simion314 wrote: post #29

is there a library that can render a lot of data as performant as native GUIs tabes/data-grids . In my experience just loading 1000 items at once it hangs in the browser native dom lay outing code, a good implementation won't create a GUI widget of each item but only for the visible ones and some buffer ones to have faster scrolling. Pagination and loading as you scroll is a hack, an example scenario would be like yo…

Yes, you should look for "virtualized" lists or scrolling. This is offered by many components in all frameworks. Here's a popular one: https://github.com/bvaughn/react-virtualized

Thank you. I will research and see if it is what I needed (from my initial description I am not sure if it recycles invisible GUI items(DOM Elements) - there is no how it works in the github but I will look under ther hood tomorrow )

Re: React Table is a “headless” UI library

#36

Post by tobr » Mon, Nov 25, 2019, 8:53 PM UTC

tannerlinsley wrote: post #14

acemarke wrote: post #12

Earlier quoted context omitted.

And on that note, Tanner has put together a bunch of example CodeSandboxes for the various features [0] . For our own app, I basically copied most of the default rendering logic from those, applied styles to match the rest of our app, and we've been adding some additional APIs to the grid from there to suit our needs. [0] https://github.com/tannerlinsley/react-table/blob/master/doc...

This is how I envisioned things from the beginning. Some people may want a quick drop-in library, since that's what they're used to, but in reality, copying and pasting an example into a `component/Table.js` file is essentially the same thing. The only thing it's missing is styles, which are implemented so differently these days, it's almost impossible to ship standard table styles without compromising the majority o…

I wish more open source code took this approach. Rather than install something that is designed to be a black box that I don’t need to understand and can’t adapt, so often I would prefer to get a well designed, battle tested starting point, but be able to adapt and change that code in the future if I want to.

Re: React Table is a “headless” UI library

#37

Post by georgewfraser » Mon, Nov 25, 2019, 8:53 PM UTC

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 canvas is that if you are scrolling a full-screen table fast, even at 30 FPS you are going to have to rerender about half the table on each frame. So "virtualized DOM" doesn't really work; it's all about render speed. And canvas allows you to achieve unbeatable render speeds by specializing your drawing algorithm for your particular scenario.

Re: React Table is a “headless” UI library

#38

Post by fithisux » Mon, Nov 25, 2019, 8:55 PM UTC

So a reimplementation of celtk or hoplon?

Re: React Table is a “headless” UI library

#39

Post by nkrisc » Mon, Nov 25, 2019, 8:56 PM UTC

at-fates-hands wrote: post #23

wnevets wrote: post #4

Earlier quoted context omitted.

how do you do in browser sorting with a plain old html table?

Adding the “sortable” class to a element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column’s value. Tables must use and tags for sortable functionality to work.

Now that your element has the class "sortable," what are you going to do to actually make it sortable?

Re: React Table is a “headless” UI library

#40

Post by texodus » Mon, Nov 25, 2019, 8:57 PM UTC

simion314 wrote: post #29

is there a library that can render a lot of data as performant as native GUIs tabes/data-grids . In my experience just loading 1000 items at once it hangs in the browser native dom lay outing code, a good implementation won't create a GUI widget of each item but only for the visible ones and some buffer ones to have faster scrolling. Pagination and loading as you scroll is a hack, an example scenario would be like yo…

Try https://perspective.finos.org/ (example https://bl.ocks.org/texodus/77fb8ef87155b3a7fe341932bfc33382 )

WebAssembly engine can handle 1mm+ rows, and can be run virtually in node.js, Python or C++. Does filtering, pivoting on multiple axes, sorting, linking, click events, and more.