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 <TR> 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.
> 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.
The hooks API literally "hooks" into React's lifecycle, by allowing the ability to save state and force re-renders as needed. In addition, React-Table explicitly implements support for doing rendering of whatever React "cell" components you have supplied as part of the column definition.
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.
This is specifically designed for React and uses the native APIs for best performance and usability. Being framework-agnostic isn't a goal and there are other components like AG-Grid you can look at if you need that.
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.
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/