Calculating dynamic row heights about fixed-data-table-2 HOT 6 CLOSED

For anyone who runs into this same issue, I was able to wrap the table in a CellMeasurer from react-virtualized which made this seamless.

from fixed-data-table-2.

The most efficient way is to use some heuristic to estimate your given height. In practice, this is hard to nail down. In our application, we ended up allowing users to resize rows and added a text overlay indicating that there was content that was hidden.

You could use some magic in componentDidMount to calculate desired row height and use that. Heres a quick example where rowHeight are generated dynamically: https://jsfiddle.net/c39qj6nd/

I would definitely not recommend if you are worried about performance

from fixed-data-table-2.

@gschwa, are you willing to share some code on how you change the cell's height? Just a simple example.
Thank you.

from fixed-data-table-2.

@LESARQ you can write your own cell measurer with componentDidUpdate and use calc results in Table rowHeightGetter

from fixed-data-table-2.

findLongestValue(arr) {
    var lgth = 0;
    var longestValue;

    for (var i = 0; i < arr.length; i++) {
      if (arr[i] && arr[i].length > lgth) {
        var lgth = arr[i].length;
        longestValue = arr[i];
      }
    }

    return longestValue;
}

getDimensions(txt) {
    this.e = document.createElement("span");
    this.e.style.fontSize = "12px";
    this.e.style.fontFamily = "Signika";
    this.e.style.minWidth = "180px";
    this.e.style.maxWidth = "400px";
    this.e.style.display = "inline-block";
    this.e.style.lineHeight = "1.4";
    this.e.style.padding = "8px";
    this.e.innerHTML = txt;
    document.body.appendChild(this.e);
    var w = this.e.offsetWidth;
    var h = this.e.offsetHeight;
    document.body.removeChild(this.e);
    return { w, h };
  }

I use this combination to get my column widths and row heights. Then you can set a Math.max in your rowHeightGetter to either display the minimum height or the height of the content.

from fixed-data-table-2.

Hey, @tsnevillecom I just ended doing my own table component as simple as I could.

Since I don't need table virtualization in my application, it would be an overkill to use this component.

from fixed-data-table-2.