Dynamically set table height

plotly.js
1

So I have a table where the number of rows depends on how much data user wants to extract from backend.
In the layout I have set the height to document.documentElement.clientHeight * 0.8 and now it statically takes 80% of the screen. If the table itself is larger than it scrolls internally.

I want to avoid the scrolling by setting its height to 100% - how can I do that?

One way around is to set document.documentElement.clientHeight * 2.5 so that it always has enough space, but that is ugly and not dynamic at all.

The code for component:

          <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,
                /*responsive: true,
                autosize: true,
                legend: {
                  orientation: "v",
                  traceorder: "normal"
                },*/
                title: title,
                font: {
                  family: "Montserrat",
                  size: 20
                },
                paper_bgcolor: "#eaeaea",
                opacity: 0.01,
                plot_bgcolor: "#eaeaea"
              }}
            />
2

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.