Table library comparison

Requirements

The current Topcat source code relies on the ui-grid AngularJS library (see also the ui-grid github repository), and thus we need to explore other libraries to replace it for the React-based DataGateway development.

The requirements are to select a Javascript library compatible with the React framework with - at least - support for the following functionality:

• column sorting
• column filtering
• row selection
• row expansion (to show details of the entity described in the row)

In order to support a filesystem view of the data, the library could ideally support some tree visualisation. However, this is not strictly necessary as we could select a separate library for such data representation.

Another consideration for the choice of table library is taking into account that we have made the Architectural Decision of relying on the material-ui library as a standard component library.

Candidate libraries

There is a great variety of React-based Javascript libraries supporting table/grid functionality, which range from simple tables to having Spreadsheet-like functionality (including editing). This site maintains a list of curated table/grid Javascript libraries with various features.

The libraries that were investigated as part of the DataGateway Table plugin are:

• material-table (see details and examples)
• react-virtualized (see demo)
• ag-grid-community

Others to consider:

• react-table

Libraries comparison

material-table

PROS	CONS
Uses material-ui for styling so uniform look	Doesn't perform virtualization or lazy loading, so performance may be an issue and we are forced to use pagination
Implements a lot of features we need e.g. sorting, filtering, expandable rows, row actions already, so reduced dev time	Doesn't allow for custom filters so we have to modify source code to get date filter
Recommended by material-ui docs	Hard to get access to data cycle so I don't see how we can implement async loading of sizes
	Small library with not a huge amount of effort being spent towards development of the library

VERDICT: I don't think we can use due to it not being possible to interact deeply enough with the table's API for storing its data

react-virtualized

PROS	CONS
Ultimate flexibility since we are just using the table for virtualization + lazy loading + autosizing, and using material-ui for display - we have total control of our own data fetching cycle and what filters we implement	Double edged sword since we have to implement all this stuff ourselves
Easy to use your own visual components, so we can use material-ui with it easily	We have to style things ourselves a lot more to make things look correct (see demo for examples)
Very popular library for virtualization, so performs well and has good developer support and large community
Recommended by material-ui docs

VERDICT: good choice, but more effort on ourselves to put in the features we want, but we won't get package bloat due to features we don't use

ag-grid-community

PROS	CONS
Implements most of the features we need already - reducing the amount of code we have to manage	Some features (e.g. row expansion, tree view) are locked behind the enterprise edition
Very popular datagrid library with commercial backing	It is a very large library, since it has no dependencies, so will likely bloat any plugin that needs it
Has material design theme	Doesn't actually use material-ui library so if we needed other parts of said library for other parts of the plugin we'd need to load both - increasing bundle size more

VERDICT: good choice, but the facts that some features locked behind pay wall and package bloat are concerning