React.js：根據對應的表格行單元格寬度設置粘性表格標題單元格寬度

Question

目標

我想創建一個帶有滾動體和粘性標題的表格。 表格標題單元格寬度需要與其對應的正文列寬度相匹配。

它在 React 中，Table 組件包含兩個單獨的組件（一個用於標題，另一個用於正文中的行）。 組件的內容將來自外部來源，所以我不能對任何東西的寬度做出任何假設。 表格的主體將有很多行，因此表格標題需要具有粘性並保持在頂部。

問題

雖然表格正文中的列的寬度是自動設置的，但表格頭中的寬度不會自動設置。 表格標題寬度需要根據表格內容自動設置。

您可以在此處查看問題和我的測試代碼： https : //codesandbox.io/s/y0jx5rp081

注意事項

• 如果有足夠的理由，我願意使用插件或庫，但如果可能的話，我寧願不使用
• 我已經嘗試過react-sticky ，它不支持表格格式
• 我也嘗試過react-sticky-table ，它不允許我將表拆分為行組件，我需要這樣做以幫助更有效地呈現
• 再一次，我需要自動設置寬度。 到目前為止，我看到的唯一解決方案涉及手動設置標題中的寬度

Answer 1

您可以通過在渲染后查詢表格單元格的寬度來獲取它們。 要在渲染后訪問 React 組件，我們需要使用 ref。

constructor(props) {
  ...
  this.bodyRef = React.createRef()
}

將它作為道具傳遞給桌子主體。

<tbody
  ...
  ref={this.bodyRef}
>

然后在componentDidMount中渲染后就可以訪問了。 如果您刪除、添加或編輯行，您可能也希望在 componentDidUpdate 中執行此操作（但注意不要無限循環）。

componentDidMount() {
  const row = this.bodyRef.current.children[0].children; // Get the children of one <tr>
  // the path from this.bodyRef.current to the children you need may vary.
  const headerWidths = [];
  for (let i = 0; i < row.length; i += 1) {
    headerWidths.push(row[i].getBoundingClientRect().width); // Get the rendered width of the element.
  }
  this.setState({
    headerWidths
  });
}

然后只需使用您所在州的寬度值。

constructor(props) {
  ...
  this.state = {
    ...
    headerWidths: []
  }
}
...
render() {
  return (
    ...
    <th style={{ width: this.state.headerWidths[index] }}>
      ...
    </th>
  )
}

這是您方便的示例的工作版本。

Answer 2

我使用react-sticky-table是因為我需要一種簡單的方法來創建一個帶有可凍結標題和列的表。 您不能使用width設置單元格的width但您可以使用max-width和min-width作為一種解決方法，這就是我正在做的設置單元格寬度的方法。 例如：

反應/JS文件：

<Cell className='sticky-table-cell'>
    ...

CSS文件：

.sticky-table-cell{
      display: table-cell;
      min-width: 400px;
      max-width: 400px;
      white-space: pre-wrap;
    }

pre-wrap確保單元格內的文本根據可用寬度中斷。

Answer 3

解決方案：

我對容器的位置粘性和固定高度做了一些 CSS 解決方法，以使第一列和第一個標題具有粘性。 它按預期工作得很好。 這是有效的代碼和框 URL，希望對您有所幫助！

我使用了最流行的react-table包！ https://codesandbox.io/embed/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark

Answer 4

有一個我推薦的 npm 包可以節省你的時間和精力。 檢查一下： react-sticky-table-thead你所要做的就是在你的桌子周圍包裹一個組件，比如：

<StickyHeader>
  <table>
    <thead>
      <tr><th>Head</th></tr>
    </thead>
    <tbody>
      <tr><td>Data</td></tr>
    </tbody>
  </table>
</StickyHeader>