javascript - React FixedDataTable 响应行/单元格大小

Question

定义固定数据表时，您可以使用 rowHeight 属性指定行高。但是如果 cell 的内容太大，通过设置一个静态值(例如，50 像素高)，它会被 chop ，因为高度是明确设置的。我看到有一个 rowHeightGetter 回调函数，但该函数的参数似乎没有任何相关性(也许它可能是它正在获取的行？哪种有意义但与数据无关对于特定的列或单元格)。

所以我很好奇，有什么方法可以让 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')
);

这是一个简单的示例，但是如果/当您运行它时，您会看到第一列单元格的内容被 chop 并且您无法看到其中包含的其他内容。

我已经在这个问题上苦苦思索了一段时间，但没有找到任何可以帮助我的东西。我开始认为我需要使用其他东西。谁能提供任何提示或建议？

谢谢，克里斯托夫

Answer 1

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

所以，如果你真的需要无限滚动，你需要计算出每行有多大，仅从索引。我想您可以通过将行本身手动呈现到屏幕外的纯 html 表并测量它的高度(并缓存结果)，或者使用更简单的算法(例如，猜测一个合理的所需高度)来实现此方法关于内容)。前一种方法不太可能表现得特别好，尽管我还没有尝试过。

如果您不需要无限滚动，请删除 Fixed Data Table 并只呈现一个普通的 HTML

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

关于javascript - React FixedDataTable 响应行/单元格大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34025105/

上一篇：javascript - window.navigator.userAgent 真的要弃用了吗？

下一篇：javascript - 将 D3 注入(inject) AngularJS 的正确约定

相关文章：

javascript - Webpack: ES6 语法给出模块构建失败: SyntaxError: Unexpected token

javascript - 处理 Prop 更改时的 SVG 动画的最佳方法是什么？

javascript - 使用属性 maxlength/size 更改 ember js 中的文本字段高度？

reactjs - 如何防止用户返回 react-router-dom？

javascript - 固定数据表中的悬停工具提示内容

javascript - Fixed-data-table-2 - React 不更新表格单元格

javascript - Express应用程序即时通知架构建议

javascript - 如何在更新集合时更新模板的一部分？

javascript - Uncaught TypeError : this. state.data.map 不是函数

javascript - WillMount() 中设置的状态无法在 DidMount() 中访问

©2023 IT工具网  联系我们

，它将很好地处理您基于内容的行高(使用适当的 CSS 对其进行布局)。