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?
- 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.
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.
The problem with JS datatables is, as a user, I'm expecting something like Excel tables. Being able to easily pin column or row as headers and having access to a filter / order by options in each of those header cell.
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.
If you are impressed by datatables, you should check out Ag-Grid. It is much, much more powerful than datatables. The only negative thing about ag-grid is its price, otherwise it is a pleasure to work with.
I am not affiliated with them, just a very happy customer
Can’t agree more. We were using vue-tables-2, which got the job done, but the maintainer went MIA for a few months (he did just recently push a new update).
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.
If you are not operating within the React Framework, I can totally agree with this. I used Ag-Grid before I built React Table and it shines as a JS-only datagrid. Start using React however, and I don't believe that is the case.
Holy crap, just checked out their pricing and it is $750 per developer (for enterprise edition)! That is more expensive than JetBrains all products, $649.
Yes, it is expensive. Not just 750, you also have to pay another 750 for deployment license per production environment. And it is 1200 if your devs are working on more than one project.
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!)
Expensive?
I am CTO at ag-Grid competitor(FancyGrid). And I used ag-Grid to check it in details.
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.
We 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.
I worked at a company that migrated away from jQuery datatables. We chose Vue-good-table. Worked well but client side rendering mode had performance issues at 10k rows so we implemented a sorting algo in it.
Comments
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?
- 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.
For the export to Excel part, I created a library that works in the browser to make it easy:
https://github.com/jmaister/excellentexport/
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.
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.
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.
This is a good walkthrough that explains hooks: https://wattenberger.com/blog/react-hooks
The problem with JS datatables is, as a user, I'm expecting something like Excel tables. Being able to easily pin column or row as headers and having access to a filter / order by options in each of those header cell.
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.
https://bootstrap-vue.js.org/docs/components/table/#tables
If you are impressed by datatables, you should check out Ag-Grid. It is much, much more powerful than datatables. The only negative thing about ag-grid is its price, otherwise it is a pleasure to work with.
I am not affiliated with them, just a very happy customer
Can’t agree more. We were using vue-tables-2, which got the job done, but the maintainer went MIA for a few months (he did just recently push a new update).
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.
If you are not operating within the React Framework, I can totally agree with this. I used Ag-Grid before I built React Table and it shines as a JS-only datagrid. Start using React however, and I don't believe that is the case.
Holy crap, just checked out their pricing and it is $750 per developer (for enterprise edition)! That is more expensive than JetBrains all products, $649.
Yes, it is expensive. Not just 750, you also have to pay another 750 for deployment license per production environment. And it is 1200 if your devs are working on more than one project.
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!)
Expensive? I am CTO at ag-Grid competitor(FancyGrid). And I used ag-Grid to check it in details.
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.
We 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://slickgrid.net/ have a look at the https://6pac.github.io/SlickGrid/examples/
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.
https://quasar.dev/
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 worked at a company that migrated away from jQuery datatables. We chose Vue-good-table. Worked well but client side rendering mode had performance issues at 10k rows so we implemented a sorting algo in it.
jQuery DataTables is unrivaled.
Whenever I need a table with pagination and export, jQuery DataTables is my go-to tool and it does the job well.