Skip to content

Consolidate react-table implementations #133

Closed
campb303 opened this issue Dec 2, 2020 · 3 comments
Closed

Consolidate react-table implementations #133

campb303 opened this issue Dec 2, 2020 · 3 comments
Assignees
Labels
feature-request Request for functionality that has not already been implemented

Comments

@campb303
Copy link
Collaborator

campb303 commented Dec 2, 2020

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.

@campb303 campb303 added feature-request Request for functionality that has not already been implemented frontend labels Dec 2, 2020
@campb303 campb303 added this to the v1 milestone Dec 2, 2020
@campb303 campb303 self-assigned this Dec 15, 2020
@campb303 campb303 assigned wrigh393 and unassigned campb303 Feb 5, 2021
@wrigh393
Copy link
Collaborator

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 campb303 added this to To do in v1.0 Mar 8, 2021
@campb303 campb303 removed the frontend label Mar 17, 2021
@campb303
Copy link
Collaborator Author

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 campb303 removed this from To do in v1.0 Mar 29, 2021
@campb303 campb303 added the high-priority Needs immediate extra focus label Apr 5, 2021
@campb303 campb303 removed the high-priority Needs immediate extra focus label Apr 27, 2021
@campb303
Copy link
Collaborator Author

campb303 commented Jul 6, 2021

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

@campb303 campb303 closed this as completed Jul 6, 2021
Sign in to join this conversation on GitHub.
Labels
feature-request Request for functionality that has not already been implemented
Projects
None yet
Development

No branches or pull requests

2 participants