动态设置Plotly.jstable组件的高度

Question

我遇到过这样的问题，如果行数超过 table 高度，table 会变得可滚动。

现在高度是根据 clientHeigth 属性

动态设置的

<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"
  }}
/>

我遇到的解决方法是将 height 设置为 document.documentElement.clientHeight * 2.5，这样它会比 任何情况下 中的行数都大，但是这个解决方案非常丑陋，而且一点也不动态。

我的问题是 - 有什么方法可以根据内容动态设置 table 高度以避免滚动吗？

我不确定在这里问这个问题是否合适，但是 plotly.js 社区提供的信息很少，也许这里有人遇到过类似的问题。谢谢

Answer 1

我找到了某种解决方案。我的table的结构如下：header（1 line），内容（n lines）和摘要（1 line）。因此，我的 table 的高度应该足以包含 n + 2 行。

正如我们从代码中看到的，n行中要显示的所有数据都包含在cellValues变量中，该变量具有以下结构[ [], [], [] ]，其中每个内部数组代表一列。

所以要计算 n 行，我们需要 cellValues[0].length

然后为了计算需要的整个高度，我把50px作为1行的高度，答案是在<Plot />的layout中设置height 属性到 height: (cellValues[0].length + 2) * 50 + 150.

额外的 150px 来自情节的边缘。

动态设置Plotly.jstable组件的高度

Dynamically set the height of Plotly.js table component

javascript

reactjs

plotly.js