22 ms·
React Table is a “headless” UI library
- addicted44 7y agoThe "headless" UI concepts promoted at this website feel to me like an attempt to shoehorn separation of templates and business logic which React has strongly resisted. Any thoughts on whether this impression is right or wrong?
- tiglionabbit 7y agoReact doesn't avoid this. They describe sharing behavior through higher-order components in their documentation. https://reactjs.org/docs/higher-order-components.html https://reactjs.org/docs/higher-order-components.html
- tannerlinsley 7y ago- React Table is not an HOC - React may still show educational materials about HOC's but hooks replace their use-cases in almost every situation. - I don't see how HOC's are attempting to draw more separation of concerns between the traditional Markup/Logic/Style debate. They were simply the best solution at the time for creating reusable logic.
- tiglionabbit 7y agoI've edited my comment. I've used HOCs to share behavior between React components in the past. You can also accomplish similar things with the Render Props pattern, depending on how you want to organize code. Using hooks is new to me. Anyway, my point is there has always been ways to factor out the behavior from React components. I'm pretty sure the reason they don't encourage factoring it out completely is so that DOM events are still handled in the domain of the UI, since they don't deal with types in your model. https://reactjs.org/docs/render-props.html https://reactjs.org/docs/render-props.html
- tannerlinsley 7y agoI would say the "separation of concern" you're referring to is typically centered around (and definitely grew out of) the idea that styles, logic and markup should be in separate files or logical systems (html, css, js). The react ecosystem doesn't preach or empower this, and since React Table is built on that React, it also does not. Hooks are a proper interface for modularization of logic, in the same way that components modularize markup (and potentially styles, eg css-in-js). Since React Table v7 is just a collection of hooks, it is no more an attempt at separation of concerns than the core React hooks are. In similarity, it is merely a utility that encapsulates configuration, state and side-effects into a modular unit that can be used to build your UI. Sounds exactly like React if you ask me.
- deleted 7y ago[deleted]
- Thoraway1 7y agoAnd this is an advantage over plain old HTML how? Did people for get HTML exists and can be used without all this fluff?
- wnevets 7y agohow do you do in browser sorting with a plain old html table?
- at-fates-hands 7y ago<table class="sortable"> Adding the “sortable” class to a <table> 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 <thead> and <th> tags for sortable functionality to work.
- wnevets 7y agoI'm assuming that is with this react project. The OP was asking why this project is needed at all.
- akdor1154 7y agoThe hell? Did you copy and paste this from WordPress docs? That has nothing to do with native html functionality.
- lowboy 7y agothis 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"
- nkrisc 7y agoNow that your <table> element has the class "sortable," what are you going to do to actually make it sortable?
- ajanuary 7y agoThis is a copy and paste of the snippet google shows from https://www.bu.edu/tech/services/cccs/websites/www/wordpress/how-to/sortable-searchable-tables/# 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.
- euoia 7y agoEvery 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?
- tannerlinsley 7y ago- 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.
- jordiburgos 7y agoFor the export to Excel part, I created a library that works in the browser to make it easy: https://github.com/jmaister/excellentexport/ https://github.com/jmaister/excellentexport/
- rajangdavis 7y agoWe use jQuery DataTables where I work and it seems more than adequate. Supposed to set some time aside to investigate how to possibly port a small subsection of tables to use Vue Data Tables; it looks like there are a bevy of tools for Vue-based Data Tables here: https://madewithvuejs.com/blog/best-vue-js-datatables https://madewithvuejs.com/blog/best-vue-js-datatables.
- scarejunba 7y agoI 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.
- acemarke 7y agoAnd 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/docs/examples.md https://github.com/tannerlinsley/react-table/blob/master/doc...
- tannerlinsley 7y agoThis 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 of users in some way. I'm happy with the low-level + examples approach.
- acemarke 7y agoI did see someone suggest that maybe R-T v7 should ship with a component that implements the v6 API on top of the v7 implementation, but that would add a noticeable amount of overhead to the API and I'm not sure how much benefit there would be.
- 7y ago
- latortuga 7y agoHave used React Table in production and it's a great, reliable library. Thanks Tanner!
- tannerlinsley 7y agoThanks! Be sure to get your company to sponsor me on Github if you can!
- hiccuphippo 7y agoFyi, the examples in codesandbox don't work for me unless I remove the serviceWorker.unregister() line.
- tannerlinsley 7y agoThat's very strange. Can you file an issue or send me more info on how to replicate that issue?
- intellix 7y agoSounds like angular-cdk, which is just awesome in the angular world
- sbilstein 7y agoFormik does this for forms. It’s great.
- tannerlinsley 7y agoSo does React-Form ;) https://github.com/tannerlinsley/react-form https://github.com/tannerlinsley/react-form
- proc0 7y agoHmmm this isn't srictly true. It's a React library after all, and React is the rendering "engine" here. Even their description says: "Hooks for building lightweight, fast and extendable datagrids for React". Therefore React is taking care of rendering. I think what they really mean by "It doesn't render it for you" is that you have to implement the rendering functions for the Table, which is more just like providing a UI plugin that has no "default" (but I'm even assuming React Table does have a simple default, so it's basically just an extensible UI plugin).
- tannerlinsley 7y agoYep! You're getting it now! Take a look at the examples and see just how easy it is to spin up your own table with React Table :)
- simion314 7y agois 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 you would want to create a simple CSV editor and you want to load 1000+ rows , have sort-able, hide-able , rearangeble columns (with a decent toolkit you would just drop a DataGrid component and set the data provider
- onion2k 7y agoPagination 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.
- simion314 7y agoI 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.
- pault 7y agoI 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.
- simion314 7y agoI 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 GUIs. Just in case I am not clear. Say you have an Array with 10k image thumbnail urls and you want to show them in a Grid, this Array fits in memory so paginating using network request is stupid and makes things slow. So if all images urls are in memory you can create 10k IMG elemetns because the DOM is slow(especially if you have some DIvs and spans to wrape elements around, center some img name , maybe a button or menu). So if on my screen I can fit 15 items , I could create 30 img elements and as you scroll you would move the UI items that are no longer visible at the bottom and change the attributes like src, name etc. This is not simple and decent toolkits do this for you by default similar how a text editor can load a large file fast because is not painting all of the file text.
- georgewfraser 7y agoI 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.
- RussianCow 7y agoUsing canvas also means you can't select text, copy/paste, open links, etc, which is a non-starter in most cases.
- littlecranky67 7y agoWell of course not, you have to implement it yourself - just as everything else when drawing a table into a canvas.
- RussianCow 7y agoRight, 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.
- peteforde 7y agoI don't have a horse in this race - I don't use React Table or render tables in canvas. I still felt compelled to comment because it's not clear you realize that you're being closed-minded and ignoring what littlecranky67 is trying to explain. Sometimes, no amount of optimization will achieve your performance objectives with the "obvious" path and you quickly find yourself deep in diminishing returns. Sometimes, you really do have to do an extraordinary amount of work and cover an intimidating minefield of edge cases and heisenbugs to achieve a viable, working solution. Of course it's almost always better to use a DOM library and just be done. Of course implementing copy+paste and drag-and-drop on Canvas is a masochistic slog. Nobody wants to do this; not even the insane. The question is whether when the need arises and you've exhausted all other avenues, can you engineer the hard solution?
- fithisux 7y agoSo a reimplementation of celtk or hoplon?
- tannerlinsley 7y agoI wrote React Table and have never heard of those. So no, React Table is not a reimplementation.
- iddan 7y agoPairs great with React Spreadsheet https://iddan.github.io/react-spreadsheet/ https://iddan.github.io/react-spreadsheet/
- jsd1982 7y agoI just tried `A1: 1`, `B1: =A1`, `C1: =B1*5` and the C formula failed as `#VALUE`. It seems to only work if there is no nesting of cell references in formulae.
- grumblestumble 7y agoI think the team behind this is somewhat trivializing this change by saying that a UI table library "has no business being in charge of your UI". Is the expectation is that the following are all bespoke, easy-to-implement features that application teams should rewrite from scratch and maintain internally, and should not be considered when looking at a library to deal with rendering tabular data in an application? * Support for virtualized rows/columns * Support for fixed headers * Support for frozen columns * Support for resizable columns * Support for re-ordering columns * Dealing with page / container resizing. * Support for context menus in the context of all of the above * Support for master/detail views * Support for tree data My take is that the inverse is true. Structure/Pagination/sorting/filtering of data sets is pretty trivial and in most cases the out-of-the-box functionality that libs provide for these is insufficient and ends up being overwritten anyway. The above list is exactly what I'm looking to outsource when looking at a grid library.
- tannerlinsley 7y agoBy team, I think you mean me. I'm flattered! :) Being a headless UI library doesn't necessarily mean that it has no business being in charge of your UI, it's more about the way that you interact with the API. If you look closely at React Table, it absolutely does take charge of your UI via prop-getters and inversion-of-control integrated into your table markup. There are plenty of table libraries that do exactly what you are referring to by handling the things you want to "outsource" pertaining to UI-specific features. Ag-Grid comes to mind here, which is a fantastic library and might do what you're looking for. However, the main takeaway here is that markup-bound APIs that are designed to be totally "in charge of your UI" may not always get out of the way when you need them to. Take it from a maintainer who has seen hundreds and hundreds of "issues" and "feature requests" that essentially amount to "how can I take back control of the [markup, styles, scrolling, pagination, resizing magic, frozen columns, etc]". It's true that there is a bit more work involved in managing this on your own, but you're not really on your own after all. Fostering a good community of examples and resources around a low-level library like React Table v7 relieves most of that pain and you'll find that the amount of work to build and control your own table markup and styles is not only easy, but liberating. Also, I don't really think it's fair to generalize structure/pagination/sorting/filtering as trivial tasks. Conceptually they are all very simple, for sure. But, marrying all of these features together in a way that is extremely performant across all of the many flexible permutations of features is very difficult. Ask any table library author and they will likely tell you that those 4 seemingly simple tasks are the ones that complicate everything else by a magnitude of difficulty. Thanks for your feedback!
- veeralpatel979 7y agoIf you like React Table, you might like AG Grid: https://www.ag-grid.com/ https://www.ag-grid.com/
- tannerlinsley 7y agoI would actually say that if you like React-Table, you likely wouldn't want to use Ag-Grid for the very reasons that React Table exists. Had someone asked if there were similar tables libraries, I would have expected this response and welcomed it. Ag-Grid is a great library and their free-tier is very robust, but I don't see how the above comment is anything more than a drop-in marketing attempt.
- cinbun8 7y agoFor those that want a UI along with a table, AG-Grid has a neat solution and is a viable alternative.
- techsin101 7y agoI 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
- tannerlinsley 7y agoI'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.
- burtonator 7y agoI'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 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 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!
- tannerlinsley 7y agoThat'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!
- quink 7y agoI 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.
- tannerlinsley 7y agoThe force is strong with this one! Thanks!
- outsidetheparty 7y agoI'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?
- williamxd3 7y agoI find it very useful, It works like a "backend" for components
- BigJono 7y agoI'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.
- ng12 7y agoI 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.
- johnsoft 7y agoI'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 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.
- rubyn00bie 7y agoSo... is this pretty much providing a "headless" gui like coca does (e.g. UITableView), and then gives you a delegate or something which you implement for styling it (e.g. UITableViewDelegate)?
- dimgl 7y agoI was actually building this exact thing many years ago. In hindsight I probably should have made it into React Table. https://github.com/divmgl/tabled.js https://github.com/divmgl/tabled.js
- bubbab 7y agoReact Table is soo good for making your own table library. The flexibility is insane, even in the previous version where you had render props + prop getters. I love the idea of headlessness in v7, although I'm kind of dreading the migration from v6 -> v7 :)
- mikhailtatsky 7y agoList of almost all grid solutions https://github.com/FancyGrid/awesome-grid https://github.com/FancyGrid/awesome-grid