Offload table component to `@tanstack/vue-table`

[vincerubinetti]

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 as grid-js.
• vue-good-table - Vue 3 support only through third party port, with holes in docs and features. Also several accessibility issues.
• ... a few other libraries that are used by < 10 people and have poor features and documentation.

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 !important overrides. 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-table is 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-table to become stable.

[vincerubinetti]

This is not really needed as much anymore, because the pagination and sorting logic is all handled on the backend.