2015-12-01 54 views
7

定義固定數據表時,使用rowHeight屬性指定行高度。但是如果該cell的內容太大,則通過設置靜態值(例如,高50個像素),它會被切斷,因爲高度被明確設置。我看到有一個rowHeightGetter回調函數,但該函數的參數似乎沒有任何相關性(也許它可能是它得到的行?哪種有意義但沒有關於特定列的數據或cell)。React FixedDataTable響應行/單元格大小

所以我很好奇,有什麼辦法可以讓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

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

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

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

0

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

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

+0

只需提供一些基本步驟,以確保您給出了一個很好的答案。 –