Rewrite ItemTable with react-table

[campb303]

ItemTable currently uses the material-table library. This works well for a simple table view with sorting, however it does not allow for the complete styling needed for a responsive interface.

react-table is a barebones library meant for building a table but makes no styling decisions for the user. Rewriting the ItemTable using react-table would allow for the type of custom styling needed to achieve a tabular interface on large screens and a card-like interface on small screens.

Example: github.com/ArsenyYankovsky/react-responsive-cards-table

[campb303]

It may not be necessary to ditch material-table all together. Component overriding appears to be possible according the material-table's documentation.

It may be possible to replace the Row and Cell components with a card and add custom media queries to achieve the desired outcome.

[wrigh393]

After working with material-table's component overriding feature we've found that when overriding the row or cell component with a card it seems to breaks the styling of the table.

Default Behavior:

Row Component override:

Cell Component override:

We are taking a look at using mui-datatables . Mui-datatables lacks some features that material-table provides like per column sorting but is responsive out of the box.

Here's an example of how mui-datatables could work for the ItemTable

[campb303]

There appears to be official support for custom rendering using a couple of options together. See this issue for more details.

[campb303]

We've moved from using material-table to react-table for table rendering. react-table is a headless table library meaning it controls markup but not UI. This is beneficial as it allows us to use any styling we choose and change it later without affecting the logic.

Initial table rendering was straightforward with a quickstart guide from this article.

The first major issue we encountered was variable column widths that would change depending on the content of the table. This was fixed by using the useFlexLayout() hook.

The next thing to address is table sorting. We've decided to use a combo search/title box in the table header to identify columns and act as filters. Now there needs to be some ui interaction to sort by columns, preferably multiple columns at a time.

Example: react-table ItemTable UI as of now:

[wrigh393]

We have implemented sorting by using the useSortBy() hook. This allows the table to be sorted by ascending and descending order.

The issue that we are facing right now is how to properly set the sorting as active when the user clicks on the button. When inactive we want the button to have a low opacity so that it is seen, but when it is active the button should be clearly visible. Here is an example of how we would like the sorting to work.

[campb303]

Resolved here