React FixedDataTable responsive row/cell size

Question

When defining your Fixed Data Table, you specify your row height using the rowHeight property. But by setting a static value (e.g., 50 pixels high) if the content of that cell is too large, it gets cut off because the height is explicitly set. I see that there is a rowHeightGetter callback function but the arguments to that function don't appear to have any relevancy (perhaps it might be the row it's getting? Which kind of makes sense but nothing about the data for the particular column or cell).

So I'm curious, is there any way to make it so that the cell is (even somewhat) responsive to the data that 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')
);

It's a simple example but if/when you run it, you'll see that the contents of the first column's cell gets cut off and you aren't allowed to see what else is contained within.

I've been beating my head against the wall on this issue for a while now and haven't found anything that will help me. I'm starting to think that I need to use something else. Could anyone offer any tips or advice?

thnx, Christoph

Answer 1

Variable, rendered-content-based row heights, infinite scrolling and reasonable performance are difficult requirements to meet simultaneously. Fixed Data Table is optimised for fast rendering and scrolling of large tables. To support this efficiently, it needs to know how tall each row in the data-set will be before it renders it (and the ideal and fastest case is where every row has the same pre-defined height).

So, if you really need infinite scrolling, you need to work out how big each row is, just from the index. I guess you could implement this method by rendering the row to an offscreen plain html table, by itself, manually, and measuring how high it is (and caching the result), or perhaps using a simpler algorithm (e.g. guess a sensible required height based on the content). The former approach isn't likely to perform particularly well, though I haven't tried it.

If you don't need infinite scrolling, drop Fixed Data Table and just render a plain HTML <table>, which will handle your content-based row heights fine (using appropriate CSS to lay it out however you want).

The final option is to implement a fantastic self-adjusting infinite scrolling table component that self-adjusts its scroll position automatically based on the height of each row after it has rendered it. Good luck (I think this is possible!)

Answer 2

In this link the author suggests checking the row height via React.getDOMNode().outerHeight on componentDidMount event. Maybe you can combine this information with the rowHeightGetter callback to adjust the row height accordingly.

There's an example of using the rowHeightGetter callback here.