Formik does this for forms. It’s great.
So does React-Form ;) https://github.com/tannerlinsley/react-form
React Table is a “headless” UI library
21–30 of 115 posts
Re: React Table is a “headless” UI library
#22Earlier quoted context omitted.
And 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/doc...
This 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 o…
I 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.
Re: React Table is a “headless” UI library
#23And this is an advantage over plain old HTML how? Did people for get HTML exists and can be used without all this fluff?
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.
Re: React Table is a “headless” UI library
#24Earlier quoted context omitted.
This 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 o…
I 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.
I've toyed with that idea for a long time now. I go back and forth, but as of today, I don't feel like that would do much good with the success I've seen people having with the examples. Sure, v6 was popular because it was very AG-grid like and included everything you could ever want and just dropped right in. But IMO, that led to most of its long-term and difficult problems, mainly issues around "How do I style this", "How can I rearrange this", "How can I extend it to do this". I find it much easier to show people how to make their own table component in an 80 line example, then extend it in userland to fit their needs.
I'm always open to the idea though.
Re: React Table is a “headless” UI library
#25Every 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…
jQuery DataTables is unrivaled.
Re: React Table is a “headless” UI library
#26Earlier 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.
I'm assuming that is with this react project.
The OP was asking why this project is needed at all.
Re: React Table is a “headless” UI library
#27Every 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 handle clicks, sorting, filtering, etc.
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. Detecting clicks is just putting a onclick handler for your rows. Searching is up to you wiring up a textbox and filtering the array of data you provide to the table. Sorting can be handled with custom sort functions.
Vue has plenty of table components too: https://vuejsexamples.com/tag/table/
Vue Tables 2 is a solid full-featured option: https://www.npmjs.com/package/vue-tables-2
Also AG-Grid for a universal JS option that competes with datatables: https://www.ag-grid.com/
Re: React Table is a “headless” UI library
#28Every 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…
Have you ever looked at CxJS? - https://docs.cxjs.io/widgets/grids - https://gallery.cxjs.io - https://worldoscope.cxjs.io/
CXJS is a whole separate framework.
Re: React Table is a “headless” UI library
#29is 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
Re: React Table is a “headless” UI library
#30is 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.