Open NishilE opened 3 years ago
having the same issue. Can't set widthArr to cell.
I have a working solution. It involves editing the cell.js file and then passing in the width prop. So it is like this:
width={widthArr[cellIndex]}
the widthArr is used for the header component of the table (as you know), then I pass it as a prop to the cell after editing the cell.js file like this:
const textDom = React.isValidElement(data) ? ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> ) : ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> );
I do have a concern that under certain conditions this will break but I have tested it with the following as the data prop:
// not sure why, but this does work even though to me it looks like it should not. maybe when the prop is destructured?
data={example(cellData, index)}
// only cell data
data={cellData}
This is actually a better solution using a partial:
const textDom = React.isValidElement(data) ? ( <> {data} </> ) : ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> );
The cell.js file is in the actual npm module. /react-native-table-component/components/cell.js
I have a working solution. It involves editing the cell.js file and then passing in the width prop. So it is like this:
width={widthArr[cellIndex]}
the widthArr is used for the header component of the table (as you know), then I pass it as a prop to the cell after editing the cell.js file like this:
const textDom = React.isValidElement(data) ? ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> ) : ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> );
I do have a concern that under certain conditions this will break but I have tested it with the following as the data prop:
// not sure why, but this does work even though to me it looks like it should not. maybe when the prop is destructured?
data={example(cellData, index)}
// only cell data
data={cellData}
Can provide example of this implementation? Thank you.
@KevinMac19
So I will try to walk you through this.
Please read the entire post before changing any code
This was a solution as of the original posting date.
You must make edits to the actual npm module. So under your node-modules folder in you project find react-native-table-components module and then go to this file path:
node-modules/react-native-table-component/components/cell.js
find the variable named textDom in the cell.js file and replace that code with the following
const textDom = React.isValidElement(data) ? ( <> {data} </> ) : ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> );
After making the above changes then go to the component in your project (not in the node-modules folder) and add a width as a prop to the import Cell component from react-native-table-components (see below code for an example):
<Cell
key={cellIndex}
style={}
textStyle={}
data={}
width={widthArr[cellIndex]} // this
height={40}
borderStyle={}
/>
The widthArr variable is an array. For example if you have 3 rows and then within those rows 3 cells then you would pass the widthArr into the row as a prop
I created this widthArr variable within a useEffect so I can dynamically change the widths depending on the data. But for testing I would recommend just making a variable and keeping it simple.
For example
//one row example
const widthArr = [60] // this is pixels I believe
<React.Fragment>
<Row
widthArr={widthArr}
/>
<TableWrapper>
{rowData.map((cellData, cellIndex) => (
<TouchableOpacity>
<Cell
key={cellIndex}
style={}
textStyle={}
data={}
width={widthArr[cellIndex]} // this
height={40}
borderStyle={}
/>
</TouchableOpacity>
))}
</TableWrapper>
<React.Fragment>
The above code does not include all of the props that are necessary but should give you an idea of how it works. The reason I did not include all of my code is it is quite complex and it is for a production application. Sorry it took a few days to get back to you.
The main thing to understand is that making the change in the node-module component gives react something (a partial in this case) something to apply a width too. Before it was just rendering the data but now with the partial the code has some structure and can add a width to it.
Let me know if you have anymore questions. Also you might have to rebuild your project after making your changes to the node-module before moving ahead with the rest of the code in your own project.
@KevinMac19
So I will try to walk you through this.
Please read the entire post before changing any code
This was a solution as of the original posting date.
- You must make edits to the actual npm module. So under your node-modules folder in you project find react-native-table-components module and then go to this file path:
node-modules/react-native-table-component/components/cell.js
- find the variable named textDom in the cell.js file and replace that code with the following
const textDom = React.isValidElement(data) ? ( <> {data} </> ) : ( <Text style={[textStyle, styles.text]} {...props}> {data} </Text> );
- After making the above changes then go to the component in your project (not in the node-modules folder) and add a width as a prop to the import Cell component from react-native-table-components (see below code for an example):
<Cell key={cellIndex} style={} textStyle={} data={} width={widthArr[cellIndex]} // this height={40} borderStyle={} />
The widthArr variable is an array. For example if you have 3 rows and then within those rows 3 cells then you would pass the widthArr into the row as a prop
I created this widthArr variable within a useEffect so I can dynamically change the widths depending on the data. But for testing I would recommend just making a variable and keeping it simple.
For example
//one row example const widthArr = [60] // this is pixels I believe <React.Fragment> <Row widthArr={widthArr} /> <TableWrapper> {rowData.map((cellData, cellIndex) => ( <TouchableOpacity> <Cell key={cellIndex} style={} textStyle={} data={} width={widthArr[cellIndex]} // this height={40} borderStyle={} /> </TouchableOpacity> ))} </TableWrapper> <React.Fragment>
The above code does not include all of the props that are necessary but should give you an idea of how it works. The reason I did not include all of my code is it is quite complex and it is for a production application. Sorry it took a few days to get back to you.
The main thing to understand is that making the change in the node-module component gives react something (a partial in this case) something to apply a width too. Before it was just rendering the data but now with the partial the code has some structure and can add a width to it.
Let me know if you have anymore questions. Also you might have to rebuild your project after making your changes to the node-module before moving ahead with the rest of the code in your own project.
Thank you for your response @jmsbrett 👍 It helped me and also I have updated the code for my requirement.
How to set different width sizes for each cells ?