Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Table is a “headless” UI library

github.com

Post reply on HN
Print view View original

81–90 of 115 posts

Re: React Table is a “headless” UI library

#81

Post by sandGorgon »

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

The next version of this is react-window.

https://github.com/bvaughn/react-window

Re: React Table is a “headless” UI library

#82

Post by pault »

simion314 wrote: post #47
pault wrote: post #43

Earlier quoted context omitted.

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…

Oh I see, yeah that's pretty much the default way to render large lists in a SPA (the term of art is called windowing). React-window is really well designed[0]. It is a shame that there is no native HTML element for this though.

[0] https://github.com/bvaughn/react-window

Re: React Table is a “headless” UI library

#83

Post by pault »

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 think there is a misunderstanding here; I believe that OP is referring to "infinite scrolling" where the list items are fetched from the server n items at a time as you scroll and wishing for a toolkit that keeps the data in memory and recycles elements as you scroll (which is what everyone is recommending). When OP says "hack" they are talking about loading data as you go, not windowing, which is what you are talking about.

Re: React Table is a “headless” UI library

#84

Post by johnsoft »

outsidetheparty wrote: post #73

I'm very curious how do people feel about the "headless component" UI strategy? First came across the concept at a conference recently -- React Table was one of the key examples the speaker gave, in fact -- and I find the idea intriguing, but I'm not quite sure yet whether I want to subscribe to the newsletter. Is it a useful way to separate look-and-feel concerns from functional concerns, or is it just another layer…

I'm a fan. It's so refreshing to have all the HTML and CSS in your own codebase, under your control, instead of reading through a list of 50 sparsely-documented props only to realize that none of them quite do what you need.

Another example of this pattern is `downshift`, which is a headless autocomplete library: https://github.com/downshift-js/downshift

I would love to see a datepicker component that used this design. I have some choice words for the various datepicker libs I've used over my career and none of them are friendly.

Re: React Table is a “headless” UI library

#85

Post by mmis1000 »

outsidetheparty wrote: post #73

I'm very curious how do people feel about the "headless component" UI strategy? First came across the concept at a conference recently -- React Table was one of the key examples the speaker gave, in fact -- and I find the idea intriguing, but I'm not quite sure yet whether I want to subscribe to the newsletter. Is it a useful way to separate look-and-feel concerns from functional concerns, or is it just another layer…

Actually, many people do has same idea, but they don't call it 'headless component'. They instead call it 'renderless component'. Means the component itself render no ui element and delegate every ui part to something else. Google this word will give you a lot of similar ideas.

Re: React Table is a “headless” UI library

#87

Post by swaggyBoatswain »

euoia wrote: 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…

I worked at a company that migrated away from jQuery datatables. We chose Vue-good-table. Worked well but client side rendering mode had performance issues at 10k rows so we implemented a sorting algo in it.

Re: React Table is a “headless” UI library

#88

Post by commanderkeen08 »

justaguyhere wrote: post #58
euoia wrote: 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…

If you are impressed by datatables, you should check out Ag-Grid. It is much, much more powerful than datatables. The only negative thing about ag-grid is its price, otherwise it is a pleasure to work with. I am not affiliated with them, just a very happy customer

Can’t agree more. We were using vue-tables-2, which got the job done, but the maintainer went MIA for a few months (he did just recently push a new update).

Ag Grid is INSANE. The client side version churns through our entire set like butter.

Even if it weren’t, I was prepared to dive into the graphQL implementation but haven’t needed to.

The only negative I have is the bloat. But I’m p sure v22 solves that by letting you load on demand vs the whole thing.

I can’t imagine ever using datatables again or having to make a server call to sort or filter.

Re: React Table is a “headless” UI library

#90

Post by CodeWriter23 »

euoia wrote: 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…

> What do people use in Vue-land for tables?

Can’t speak for all the folks in Vue-land, but IMO this is pretty super. You do have to add a couple of bells and whistles (like a search field - 5-10 lines of js) to make it awesome.

https://bootstrap-vue.js.org/docs/components/table/#tables

Post reply on HN