7

固定データ テーブルを定義するときは、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、クリストフ

4

2 に答える 2

4

レンダリングされたコンテンツに基づく可変の行の高さ、無限のスクロール、および適切なパフォーマンスを同時に満たすのは難しい要件です。Fixed Data Table は、大きなテーブルの高速レンダリングとスクロール用に最適化されています。これを効率的にサポートするには、データセットをレンダリングする前に、データセット内の各行の高さを知る必要があります (理想的で最速のケースは、すべての行が同じ事前定義された高さを持つ場合です)。

したがって、本当に無限スクロールが必要な場合は、インデックスだけで各行の大きさを計算する必要があります。行をオフスクリーンのプレーンhtmlテーブルに手動でレンダリングし、その高さを測定する（および結果をキャッシュする）か、おそらくより単純なアルゴリズムを使用することで（たとえば、適切な必要な高さベースを推測する）、このメソッドを実装できると思います内容上）。前者のアプローチは、試したことはありませんが、あまりうまく機能しない可能性があります。

無限スクロールが必要ない場合は、Fixed Data Table をドロップしてプレーンな HTML <table> をレンダリングするだけで、コンテンツ ベースの行の高さを適切に処理できます (適切な CSS を使用して必要に応じてレイアウトします)。

最後のオプションは、レンダリング後の各行の高さに基づいてスクロール位置を自動的に自動調整する、素晴らしい自動調整無限スクロール テーブル コンポーネントを実装することです。頑張ってください（これは可能だと思います！）

于 2015-12-01T17:53:51.067 に答える