अपनी निश्चित डेटा तालिका को परिभाषित करते समय, आप पंक्तिहेइट संपत्ति का उपयोग करके अपनी पंक्ति ऊंचाई निर्दिष्ट करते हैं। लेकिन 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, क्रिस्टोफ
यह सुनिश्चित करने के लिए कि आप एक अच्छा जवाब दे रहे हैं, बस कुछ बुनियादी कदम प्रदान करें। –