定義固定數據表時,使用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, 克里斯托夫
只需提供一些基本步驟,以確保您給出了一個很好的答案。 –