A better databrowser table #429
Description
Currently, all functionality of the databrowser table uses a homegrown table component. This decision was made a year ago when I started working on Studio for these reasons:
- The table initially did not have a lot of advanced features like cell selection and detailed shortcuts back then. A grid library back then would likely have been overkill, and complexity in the name of speculation.
- Existing solutions fit in one of two categories: they were either too open-ended, which meant that a lot of functionality we'd like would have to be custom built anyway, or they weere too opinionated, which meant that extending them to add functionality would have been painful.
- Existing solutions were React specific. This is a little hard to explain, but the problem with React-specific frameworks is that some things are just extremely painful to do. This isn't to bash on the library itself, but rather the fact that React just makes some things really difficult to do. A simple example would be accessing the DOM element to manage events etc. is abnormally hard with React. For libraries built on top of React, this holds doubly true, since there are now two layers of abstraction. All this assumes that it is possible at all in the first place.
- Honestly, I didn't know ag-grid existed back then. Even if I did though, it is likely I would have dismissed it ibecause of the first argument above.
As we've gained more clarity on what we want this table to be, it now makes sense to take a second look at our implementation and reconsider if a grid library makes sense now.
After a few days of research, I've reached the conclusion that ag-grid fits our use case pretty well:
- It brings a bunch of things for free. They've implemented cell selection and a lot of shortcuts we built almost exactly as we've built. This means a bunch of custom code can literally be deleted without changing end-user functionality.
- A few other features that we'd like can be built on top of ag-grid with ease. Column resizing, column reordering, column pinning, infinite loading, situation-specific shortcuts etc. are a few examples.
- ag-grid is quite honestly the most configurable grid library I've ever seen, but a lot of these things have sensible defaults. It manages to walk the fine line between open-ended and opinionated really well.
- ag-grid is built to be framework agnostic. They have a React component, but the library core is plain JS, which means that I can use these escape hatches to do things that React makes hard.
- Finally, I like working with it
The aim is now to replace our table with ag-grid. A lot of existing code can be reused, so it isn't like building the table from scratch. We also have a lot of tests for the existing library, so if the new implementation passes these, we'd already be at a really stable place. A few regressions are to be expected, but this gives me a chance to add more tests.
We'd also like the design team to take a second look at the table's styling, so this is the perfect time for it too.