Dynamically set the height of Plotly.js table component

user_10483595 0
Viewed 1313

I've come across the issue that table becomes scrollable if the number of rows exceeds table height.

By now height is set dynamically based on clientHeigth property

<Plot
  data={[
    {
      type: "table",
      columnwidth: [4, 1],
      header: {
        values: headerValues,
        font: { size: 24, family: "Montserrat" },
        height: 50,
        align: ["center", "center"],
        fill: { color: "rgb(179, 180, 180);" }
      },
      cells: {
        values: cellValues,
        align: ["left", "center"],
        font: { size: 24, family: "Montserrat" },
        height: 50,
        fill: { color: [tableColors] }
      }
    }
  ]}
  layout={{
    hoverlabel: { bgcolor: "salmon" },
    width: document.documentElement.clientWidth * 0.8,
    height: document.documentElement.clientHeight * 2.5,
    font: {
      family: "Montserrat",
      size: 20
    },
    paper_bgcolor: "#eaeaea",
    opacity: 0.01,
    plot_bgcolor: "#eaeaea"
  }}
/>

The workaround I've come across is to set height to document.documentElement.clientHeight * 2.5 so it would be larger, than number of rows in any case, but that solution is quite ugly and not at all dynamic.

My question is - is there any way to set table height dynamically based on the content to avoid scrolling?

I wasn't sure if it's the right place to ask this question, but plotly.js community is quite uninformative and maybe someone here have come across similar issue. Thank you

plotly.js reactjs javascript
1 Answers

I found kind of solution. The structure of my table as follows: header (1 line), contents (n lines) and summary (1 line). Therefore height of my table should be enough to contain n + 2 lines.

As we see from the code, all the data to be displayed in the n lines is contained in cellValues variable, which has the following structure [ [], [], [] ], where each inner array represents a column.

So to calculate the n lines, we need to take cellValues[0].length

Then to calculate the whole height needed, I took 50px as height for 1 line, and the answer is to set height in <Plot />'s layout property to height: (cellValues[0].length + 2) * 50 + 150.

Extra 150px come from margins of the plot.

user_104835950
Related