- 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.
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/
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.
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.
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
This little widget : https://media.gcflearnfree.org/ctassets/topics/175/filtering...
Can’t speak for all the folks in Vue-land, but IMO this is pretty super. You do have to add a couple of bells and whistles (like a search field - 5-10 lines of js) to make it awesome.
I am not affiliated with them, just a very happy customer
Ag Grid is INSANE. The client side version churns through our entire set like butter.
Even if it weren’t, I was prepared to dive into the graphQL implementation but haven’t needed to.
The only negative I have is the bloat. But I’m p sure v22 solves that by letting you load on demand vs the whole thing.
I can’t imagine ever using datatables again or having to make a server call to sort or filter.
That said, I'd argue it is still worth it, assuming you can afford it. It will save you tons of developer time down the road. Their documentation is top notch too.
For example, it has graphs built in! I have never seen any grid library do that.
Again, not affiliated with them in any shape or form, just a happy customer (trying to get a discount from them though, ha!)
You will find more in future. I use it for one of client, Financial service. I found bugs in ag-Grid, they wrote that it is custom work and that they will start custom work from 50,000$ only.
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://slickgrid.net/ have a look at the https://6pac.github.io/SlickGrid/examples/
https://xaksis.github.io/vue-good-table/
haven't tried them yet, current personal vue favorites
keeping for reference when will need to use
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?