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.