CODEWITHSUNDEEP
cssreactjsmaterial-uimaterial-table
Wyatt Cake
Wyatt Cake

Reputation: 35

How to keep rows aligned with column headers when hiding columns on Material Table

I have a React project in which Material Table 1.69.3 is being used. It is passed in the components for the body a render function for virtualized rows. This function splices the data, and then renders

<TableBody>
  <MTableBodyRow {…props}/>
</TableBody>

this component is passed on a conditional. When false the table is good, all rows are aligned with the headers w/ some columns set to hidden. scrolling works well, and the table allows itself to be cut off when the window is resized.

The problem is when the conditional is true, and columns are hidden, as immediately the rows and remaining column headers do not line up.

First solution I had was my <tr> had the styles

position:absolute 
translateY: ${75*i}

which removing fixed the unalignment, but made the virtualization bug out, and scrolling the table would make the scroll jump around.

second solution was simple one of pass the width in the rowData of the columns by

const visibleColumns = this.props. columns.filter(column => !column.hidden)
const columnWidths = “calc(this.state.tableWidth / visibleColumns.length)”

and passed in columnWidth. This however depends on tableWidth which is changed when the window is resized. Making for if the table is resized/cut off all the rows will squish on screen while the columns remain in their original position.

If the original render value of tableWidth is saved and only used, then the table cant be expanded, if opened in a smaller window at first.

So to reiterate, my main problem is that when columns are hidden, the rows of my MaterialTable do not line up with the above column headers. Only occurs when custom component body is passed in, when not table works perfectly.

Sadly this is a problem I’m having at work so cannot copy any code, bit shown from memory.

Upvotes: 1

Views: 38

Answers (0)

Related Questions