React FixedDataTable響應行/單元格大小

Question

定義固定數據表時，使用rowHeight屬性指定行高度。但是如果該cell的內容太大，則通過設置靜態值（例如，高50個像素），它會被切斷，因爲高度被明確設置。我看到有一個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， 克里斯托夫

Answer 1

可變的，基於呈現的內容行高度，無限滾動和合理的績效是很難要求同時滿足。固定數據錶針對大型表格的快速渲染和滾動進行了優化。爲了有效地支持這一點，它需要知道數據集中的每一行在渲染之前會有多高（並且理想和最快的情況是每行具有相同的預定義高度）。因此，如果您確實需要無限滾動，您需要計算出每行有多大，僅從索引開始。我想你可以實現這個方法，通過手動將本行渲染到屏幕外的純html表中，並測量它有多高（並緩存結果），或者使用更簡單的算法（例如，猜測基於合理的所需高度在內容上）。前一種方法不可能表現得特別好，儘管我還沒有嘗試過。

如果你不需要無限滾動，跌落固定數據表，只是呈現一個普通的HTML <表>，它將處理基於內容的行高精細（使用適當的CSS奠定它不過你想要的）。

最後一個選項是實現一個夢幻般的自我調整無限滾動表組件，它根據每行的高度自動自動調整其滾動位置。祝你好運（我認爲這是可能的！）

Answer 2

在這link作者建議通過React.getDOMNode（）。outerHeight on componentDidMount事件檢查行高度。也許你可以結合這些信息和rowHeightGetter回調來相應地調整行高。

有一個使用rowHeightGetter回調here的例子。