Consolidate react-table implementations

[campb303]

Both ItemTable and ItemHeaderView consist of tabular data views with similar styling, sorting, and filtering controls. Right now they're separate components. One generalized component should be made to consolidate this logic.

[wrigh393]

In order to consolidate these into a single component, we need to look at what is necessary for each instance of the component.

ItemTable

Props
data
rowCanBeSelected

The ItemTable component is passed items from the API to the data prop and the rowCanBeSelected prop is passes the sidebarOpen state variable that set when an item is selected.

Classes
For the styling, it is passed a few classes:

• hoverBackgroundColor: Sets the background color for a row when a user hovers over it
• rowSelected: Sets the background color of a row once it's selected
• bandedRows: Gives the rows a banded appearance (row color alternates between white and grey or and black and grey in darkmode)
• columnBorders: Gives each column a border to help users differentiate between the different columns.

ItemHeaderView

Props
data

The ItemHeaderView component is passed the active item's headers to the data prop
Classes
For the styling, it is passed a few classes:

• HeaderCell_root: Gives the headers padding on the bottom as well as sets the border bottom width to 0
• ContentCell_root: Sets the word break CSS property to break-word This is used to make sure the text does not overflow its component as well as prevents a scrollbar from being rendered
• bandedRows: Gives the rows a banded appearance (row color alternates between white and grey or and black and grey in darkmode)

---

Both components use the data prop as that is necessary for react-table to work. Both components also have the bandedRows class. The next step is to determine how to have each of the classes that are present in these components with needing to add a large number of props to the shared component as one component needs classes that the other doesn't and vice versa.

[campb303]

The rowsCanBeSelected variable currently forces the ItemTable to re-render every time we selector something which causes thousands of nodes to be re-rendered. This is currently our single biggest performance issue. Let's put this issue on hold while we reconsider how to design the ItemTable and other components during our performance sprint next week.

[campb303]

The implementations of react-table have differed too much to consolidate. Closing.