React FixedDataTable Responsive Row / Cell Size

Question

When defining your fixed data table, you specify the row height using the rowHeight property. But by setting a static value (for example, 50 pixels high), if the contents of this cell too large, it is cropped because the height is explicitly set. I see that there is a rowHeightGetter callback function, but the arguments to this function do not have any relevance (maybe it can be the row that it receives? What type makes sense, but does not contain data for a specific column or cell ).

So I'm curious if there is a way to make cell (at least a little) respond to the data it contains?

 var Table = FixedDataTable.Table, Column = FixedDataTable.Column, Cell = FixedDataTable.Cell; var rows = [ ['a1', 'b1', 'c1'], ['a2', 'b2', 'c2'], ['a3', 'b3', 'c3'], // .... and more ]; ReactDOM.render( <Table rowHeight={50} rowsCount={rows.length} width={500} height={500} headerHeight={50}> <Column header={<Cell>Col 1</Cell>} cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>} width={200} /> <Column header={<Cell>Col 3</Cell>} cell={({rowIndex, ...props}) => ( <Cell {...props}> Data for column 3: {rows[rowIndex][2]} </Cell> )} width={200} /> </Table>, document.getElementById('CustomDataTable1') ); 

This is a simple example, but if / when you run it, you will see that the contents of the first cell of the column are disabled and you are not allowed to see what else is inside.

I already hit my head against the wall on this issue and did not find anything that could help me. I'm starting to think that I need to use something else. Can anyone offer any advice or advice?

Thnx, Christoph

Answer 1

Variables, rendering-based row heights, infinite scrolling, and reasonable performance are difficult requirements for meeting at the same time. Fixed data table optimized for fast rendering and scrolling of large tables. To maintain this efficiently, he needs to know how tall each row in the dataset is before he displays it (and the ideal and fastest case where each row has the same predetermined height).

So, if you really need endless scrolling, you need to determine how large each row is, just from the index. I assume that you could implement this method by manually visualizing a row on a non-standard html tabular table, and measuring how high it is (and caching the result), or perhaps using a simpler algorithm (for example, guessing the reasonable required height in terms of content ) The first approach is unlikely to work particularly well, although I have not tried it.

If you don’t need endless scrolling, drop the fixed data table and just render the regular HTML <table> that will process your row heights based on the content (using the appropriate CSS to lay it out as you want).

The final option is to implement a fantastic, self-tuning endless scroll table element that automatically adjusts its scroll position depending on the height of each row after it is rendered. Good luck (I think it is possible!)

Answer 2

In this link, the author suggests checking line heights through React.getDOMNode (). externalHeight on eventDidMount event. Perhaps you can combine this information with the rowHeightGetter callback to adjust the row height accordingly.

Here is an example of using rowHeightGetter callback here .