React Table is a “headless” UI library

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.

Re: React Table is a “headless” UI library

#6

Post by tannerlinsley » Mon, Nov 25, 2019, 6:38 PM UTC

Thoraway1 wrote: post #3

And this is an advantage over plain old HTML how? Did people for get HTML exists and can be used without all this fluff?

"Plain old HTML" is great. And guess what, because React Table is headless, you can render your tables using standard HTML table elements (table,thead,tbody,tr,th,td,tfoot,etc...).

Html elements on their own, however, are not capable of sorting, filtering, grouping, selection, nested header generation, (insert any feature from React Table here), let alone making all of those things perform well together.

Re: React Table is a “headless” UI library

#7

Post by mcaruso » Mon, Nov 25, 2019, 6:39 PM UTC

Thoraway1 wrote: post #3

And this is an advantage over plain old HTML how? Did people for get HTML exists and can be used without all this fluff?

It's a React component for data tables. So it implements (re)loading data, sorting, pivoting, and the other stuff mentioned in this feature list:

https://github.com/tannerlinsley/react-table#features

So the comparison to HTML tables is a bit odd, because (as per the article linked by OP) it does pretty much everything except the UI part.

(I'm not the author, I just use this library at my work.)

Re: React Table is a “headless” UI library

#8

Post by euoia » Mon, Nov 25, 2019, 7:09 PM UTC

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 requires watching for data changes in Vue and making calls to the DataTables API.

I have a few questions about this library. Can it detect rows being clicked on (and emit an event, for example)? Can the searching be customized (I may want to display numbers in a locale-specific format, but match even when the search doesn't include the formatting)? Can sorting be customized (I may wish to the sorting for a field to depend on another, possibly hidden, field)?

What do people use in Vue-land for tables? Is there anything that approaches the feature set of jQuery DataTables?

Re: React Table is a “headless” UI library

#9

Post by tannerlinsley » Mon, Nov 25, 2019, 7:14 PM UTC

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…

- Exporting to excel is simple. You are provided the final data model after all processing/filtering/sorting/etc is done, and you are free to use whatever means you want to provide that data to your users, eg. The 'xlsx' npm package could do this easily.

- Searching/Filter is quite advanced. You can search/filter on any derived model of the data regardless of the display or format of that data.

- Sorting can also be 100% customized and can be configured to use any derived sorting mechanism that you choose or build, regardless of display or format.

Re: React Table is a “headless” UI library

#10

Post by scarejunba » Mon, Nov 25, 2019, 7:16 PM UTC

I see. It's the backing data and state handling plus hooks (in the normal sense rather than React sense) to allow you to draw your own table. Very interesting.

Naturally, I imagine someone will make basic-react-table or something so you don't have to write the code to render the table. I appreciate that the bottom-most level of libraries is this customizable but frequently I don't want to draw all that code.

Still, perhaps the right place for that code is examples rather than a library. Hmm.