vincerubinetti
commented
2 years ago This is not really needed as much anymore, because the pagination and sorting logic is all handled on the backend.
Closed vincerubinetti closed 2 years ago
vincerubinetti
commented
2 years ago This is not really needed as much anymore, because the pagination and sorting logic is all handled on the backend.
I have long searched for an acceptable Vue table component. I have looked at pretty much every Vue 3 table library available on Google:
ag-table- Pretty fully featured, but also very "enterprise-y" (obtuse implementation and documentation), very heavy (includes an order of magnitude more features than we need, and not sure if those will tree-shake out sufficiently), and most importantly, $750 to make use of server-side data (a feature we need). Needing to pay also likely means we can't use it in open source.grid-js- Their official Vue wrapper only supports Vue 2. There are 1 or 2 third-party Vue 3 ports of it, but they have holes in their features and docs and are not well-maintained or widely used. Moreover, the way this library implements server-side data is unacceptable, and does not support simultaneous sorting/pagination/filtering.tabulator- Essentially the same issues asgrid-js.vue-good-table- Vue 3 support only through third party port, with holes in docs and features. Also several accessibility issues.Aside from the issues mentioned, there is one bigger issue with all the libraries above: they are very prescriptive. E.g., they are not "headless". To style them the way we want, it would involve a lot of hacking and CSS
!importantoverrides. Want to use our own button component for the sorting button so it looks like the rest of the app? Can't do that (easily/cleanly).However, I've finally found an example of what I view to be the "correct" ™ way to do a table: https://tanstack.com/table
Basically a set of low-level utilities that help you do things like pagination and sorting, and let you render the result however you want, with your own components and styles, since those will change for every application. It's also good to have them as low-level, because tables can have potentially infinite features (sub-rows, column groups, selectable rows, downloadable data, pivoting, etc...), and every project's needs will be different.
The way forward is, you just make a basic table component for your app with barebones html, then you import the interactive functionality you need for that project.
Only problem is that
@tanstack/vue-tableis still very very new. Not sure that it supports all the features from the core library yet. We could perhaps try to use the core code directly in our own component, or we could just wait (a few months? a year?) for@tanstack/vue-tableto become stable.