React FixedDataTable响应行/单元格大小

Question

定义固定数据表时,使用rowHeight属性指定行高.但是通过设置静态值(例如,50像素高),如果其内容cell太大,则会因为明确设置高度而被切断.我看到有一个rowHeightGetter回调函数,但该函数的参数似乎没有任何相关性(也许它可能是它得到的行？哪种有意义,但没有关于特定列的数据或cell).

所以我很好奇,有没有办法让它cell(甚至有点)响应它包含的数据？

var Table = FixedDataTable.Table,
  Column = FixedDataTable.Column,
  Cell = FixedDataTable.Cell;

var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={500}
    height={500}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>}
      width={200}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={200}
    />
  </Table>,
  document.getElementById('CustomDataTable1')
);

这是一个简单的例子,但如果/当你运行它时,你会看到第一列单元格的内容被切断,你不能看到其中包含的内容.

我已经在这个问题上打了一针墙已经有一段时间没有找到任何可以帮助我的东西了.我开始认为我需要使用其他东西.有人可以提供任何提示或建议吗？

thnx,Christoph

Answer 1

可变的、基于渲染内容的行高、无限滚动和合理的性能是很难同时满足的要求。固定数据表针对大型表格的快速渲染和滚动进行了优化。为了有效地支持这一点，它需要在渲染数据集中的每一行之前知道它的高度（理想且最快的情况是每行具有相同的预定义高度）。

因此，如果您确实需要无限滚动，则需要仅根据索引计算出每行有多大。我猜你可以通过将行渲染到屏幕外的纯 html 表，手动地，并测量它的高度（并缓存结果），或者也许使用更简单的算法（例如，猜测基于合理的所需高度）来实现此方法关于内容）。前一种方法不太可能表现得特别好，尽管我还没有尝试过。

如果您不需要无限滚动，请删除“固定数据表”并仅渲染一个纯 HTML <table>，它将很好地处理基于内容的行高（使用适当的 CSS 来根据您的需要进行布局）。

最后一个选择是实现一个出色的自调整无限滚动表组件，该组件在渲染后根据每行的高度自动调整其滚动位置。祝你好运（我认为这是可能的！）