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

61–70 of 115 posts

Re: React Table is a “headless” UI library

#61

Post by tannerlinsley »

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

If you are not operating within the React Framework, I can totally agree with this. I used Ag-Grid before I built React Table and it shines as a JS-only datagrid. Start using React however, and I don't believe that is the case.

Re: React Table is a “headless” UI library

#64

Post by bikeshaving »

manigandham wrote: post #27
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…

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 even pure javascript functions?

One disturbing development I’ve seen with React hooks is that APIs which would normally be done with pure javascript are now done with React hooks for popularity’s sake, with the result being code which is vendor-locked into the React runtime.

Re: React Table is a “headless” UI library

#65

Post by burtonator »

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 of the main view. React table allows you to sort by progress, creation time, update time, etc.

We used the same react table code to build the annotation viewer:

https://getpolarized.io/#annotation-viewer

One big issue we had was with context menus and selecting multiple items.

This doesn't come out of the box (of course) but I think platform-consistent multi-select is important so we had to implement all that functionality.

We're still a way from a more clear cut API for managing this stuff on the web + desktop + mobile.

I REALLY wish I could have web technology transparently work on mobile!

Re: React Table is a “headless” UI library

#66

Post by littlecranky67 »

RussianCow wrote: post #41
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…

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

Well of course not, you have to implement it yourself - just as everything else when drawing a table into a canvas.

Re: React Table is a “headless” UI library

#67

Post by quink »

I have put together the Material-UI Table component and react-table v7 for a project. Apart from the Typescript for v7 being a bit insufficient (but easy to work around it, and possibly fixed by now), it was an absolutely pleasant experience.

It’s almost like react-table v7 and {insert UI component library here} are made for each other and it’s incredibly valuable, more so than the previous react-table.

Absolute kudos to the developer and I look forward to UI component libraries writing their table display components to target the semantics of react-table v7.

This has some real potential for any UI library to get first-class table functionality without sweating and needlessly repeating the implementation details.

Re: React Table is a “headless” UI library

#68

Post by RussianCow »

littlecranky67 wrote: post #66
RussianCow wrote: post #41

Earlier quoted context omitted.

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

Well of course not, you have to implement it yourself - just as everything else when drawing a table into a canvas.

Right, which makes it a deal-breaker for almost all use cases. Plus, I'd guess that it's almost always less effort to optimize the DOM-based approach than to (poorly) reimplement all of that browser functionality in canvas.

Re: React Table is a “headless” UI library

#69

Post by tannerlinsley »

quink wrote: post #67

I have put together the Material-UI Table component and react-table v7 for a project. Apart from the Typescript for v7 being a bit insufficient (but easy to work around it, and possibly fixed by now), it was an absolutely pleasant experience. It’s almost like react-table v7 and {insert UI component library here} are made for each other and it’s incredibly valuable, more so than the previous react-table. Absolute kudo…

The force is strong with this one!

Thanks!

Re: React Table is a “headless” UI library

#70

Post by ajanuary »

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 a copy and paste of the snippet google shows from https://www.bu.edu/tech/services/cccs/websites/www/wordpress... if you search for “sortable table”. The page is actually talking about how to author pages on their Wordpress site, which presumably uses a wordpress plugin to provide the JavaScript necessary to make this work.
Post reply on HN