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

71–80 of 115 posts

Re: React Table is a “headless” UI library

#71

Post by tannerlinsley »

techsin101 wrote: post #63

I use this and it's not ideal, let's just say that. Lot of edge cases that you have no way of fixing without messing with library code itself

I'm sorry you've had that experience, though I don't recall seeing any issues on Github to this degree that we haven't taken care of. Can you point me to anything specific I can help you out with? Thus far, React Table v7 has been a complete joy for many to work with.

Also, remember that it's still in beta, so your frustration doesn't have to be silent or permanent! File an issue and I'll see what I can do.

Re: React Table is a “headless” UI library

#72

Post by tannerlinsley »

burtonator wrote: post #65

I've been using react-table in Polar since the beginning and it's a great library. We're using it in the document and annotation views and it provides pagination, sorting, etc. I'm a bit nervous about this 7.0 release not providing a basic table UI as that was one of the wins for us migrating. For example, here's a screenshot of the document repository: https://getpolarized.io/#document-repository ... which is sort o…

That's awesome! Soo cool to see it in your product! About being nervous, I don't think you should be! I know it's intimidating moving to v7 from v6, but it's pretty simple given the examples that we have in the repo thus far. If you still are getting the jitters, then DM me on Twitter! I would love to work something out to help you feel better about it. I offer sponsorships for prioritized support and even private consultation if needed. Don't be shy, just reach out!

Re: React Table is a “headless” UI library

#73

Post by outsidetheparty »

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 of indirection?

Re: React Table is a “headless” UI library

#74

Post by acemarke »

bikeshaving wrote: post #64
manigandham wrote: post #27

Earlier quoted context omitted.

The difference is that jQuery directly modifies the DOM while React/Vue/Angular/Svelte are all designed to react to some data and automatically render based on it. The simplest table components create an HTML structure by repeating a for an array of data you pass in, with the columns being the keys. More complex ones let you define your own components to render each row and cell, and have internal state and logic to…

> React Table in this version is headless meaning it just provides the backend functionality but requires you to implement the HTML rendering with your own JSX/components so you get the most control over the output. If this is the case, why are we putting this logic in React hooks? Shouldn’t the logic be portable across different frameworks? What does the hook API provide which couldn’t be provided using a class or e…

The hooks API literally "hooks" into React's lifecycle, by allowing the ability to save state and force re-renders as needed. In addition, React-Table explicitly implements support for doing rendering of whatever React "cell" components you have supplied as part of the column definition.

Yes, a lot of the logic probably could be extracted as a pure vanilla JS lib, but there'd also be a lot of work that would have to be done to then integrate it into React.

Also, the creator is a fairly prolific author of React-based libraries, and that was his focus when he wrote React-Table. If someone else wants to try to create a vanilla JS version, you're free to do so.

Re: React Table is a “headless” UI library

#75

Post by manigandham »

bikeshaving wrote: post #64
manigandham wrote: post #27

Earlier quoted context omitted.

The difference is that jQuery directly modifies the DOM while React/Vue/Angular/Svelte are all designed to react to some data and automatically render based on it. The simplest table components create an HTML structure by repeating a for an array of data you pass in, with the columns being the keys. More complex ones let you define your own components to render each row and cell, and have internal state and logic to…

> React Table in this version is headless meaning it just provides the backend functionality but requires you to implement the HTML rendering with your own JSX/components so you get the most control over the output. If this is the case, why are we putting this logic in React hooks? Shouldn’t the logic be portable across different frameworks? What does the hook API provide which couldn’t be provided using a class or e…

This is specifically designed for React and uses the native APIs for best performance and usability. Being framework-agnostic isn't a goal and there are other components like AG-Grid you can look at if you need that.

Hooks is basically a declarative way to keep things in sync instead of writing a bunch of imperative code yourself. You describe the functionality that should run when some data changes (or all the time) and React handles the rest. The code inside hooks is just javascript, and by being functions it's much simpler than class-based structures. Vue is also working on a similar composition API.

This is a good walkthrough that explains hooks: https://wattenberger.com/blog/react-hooks

Re: React Table is a “headless” UI library

#76

Post by williamxd3 »

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 find it very useful, It works like a "backend" for components

Re: React Table is a “headless” UI library

#77

Post by max23_ »

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…

Whenever I need a table with pagination and export, jQuery DataTables is my go-to tool and it does the job well.

Re: React Table is a “headless” UI library

#78

Post by BigJono »

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've never used one, but it sounds like a great idea. 3rd party React components are a huge pain in the ass to work with. People do all sorts of bullshit like re-implement half of CSS in their component's API and half the time it's easier to just build the fucking thing yourself than learn all the arbitrary rules around customisation the author has conjured up.

The best reusable components are the ones that have exactly one look, which you're fine with, and are just plug in and go.

None of that is a problem with the logic behind the component though, just the display. So for something complex that has a bunch of logic behind it, it's a real nice idea to just be able to reuse that logic and whack some html and css over the top of it instead of having to read some 6 page doc every time you want to increase the width of a border or something.

Re: React Table is a “headless” UI library

#79

Post by ng12 »

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 am extremely excited about it. I think of it as a form of IOC for front-end development. Almost constantly we run into a problem where a third party React library gets us 80% of what we want, but that last 20% is where we spend most of our time and where the most bugs are introduced. By taking full control of the front-end we can minimize the API wrangling and CSS hacks we need to get the component to play nice with our UI/UX spec.

Re: React Table is a “headless” UI library

#80

Post by sandGorgon »

georgewfraser wrote: post #37

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…

Even approaches like React-Window?

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

Post reply on HN