React native paper DataTable.Cell overflow text causes hide full text

Question

Below code using DataTable.Cell.

If text bigger than column width it hide text

Please help need to display text if text bigger than column width need to break text in next line.

<DataTable.Row
  style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
  <DataTable.Cell
    style={{
      flex: 3,
      flexWrap: 'wrap',
      borderColor: 'yellow',
      borderWidth: 2,
      height: auto,
      overflow: 'visible',
    }}>
    <View style={styles.rowbox}>
      <Text style={styles.stnname}>Test 1</Text>
      <Text>Day:1</Text>
      <Text>Distance:0</Text>
    </View>
  </DataTable.Cell>
  <DataTable.Cell numeric>Cell 1 2</DataTable.Cell>
  <DataTable.Cell numeric>Cell 1 3</DataTable.Cell>
</DataTable.Row>
<DataTable.Row
  style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
  <DataTable.Cell
    style={{
      flex: 3,
      flexWrap: 'wrap',
      borderColor: 'yellow',
      borderWidth: 2,
      height: auto,
      overflow: 'visible',
    }}>
    <View style={styles.rowbox}>
      <Text style={styles.stnname}>Test 2 Test 2 Test 2</Text>
      <Text>Day:1</Text>
      <Text>Distance:0</Text>
    </View>
  </DataTable.Cell>
  <DataTable.Cell numeric>Cell 2 2</DataTable.Cell>
  <DataTable.Cell numeric>Cell 2 3</DataTable.Cell>
</DataTable.Row>

const styles = StyleSheet.create({
    container: {
      flex: 1,
      padding: 16,
      marginTop: 20,
      zIndex:1
    },
    autocompleteContainer: {
      flex: 1,
    },
    descriptionContainer: {
      flex: 1,
      justifyContent: 'center',
      width:'100%',
      alignItems:  'stretch'
    },
    itemText: {
      fontSize: 15,
      paddingTop: 5,
      paddingBottom: 5,
      margin: 6,
      color: '#000',
      
    },
    infoText: {
      textAlign: 'center',
      fontSize: 16,
    },
    autodropsection:{
      backgroundColor: "#fff",
      flex:1,
    },
    containerMain: {
      flex: 1,
      padding: 0,
      marginTop: 0,
    },
    datrow1:{
      flex: 4, 
      flexDirection: 'column',
    },
    tableheader:{
      backgroundColor : "#2375b3",
      color:'#ffffff',
      fontSize: 24,
      fontWeight: '700',
      flex: 2,
    },
    tableheadertitle:{
      fontSize: 14,
       fontWeight: '500',
       color:'#fff',
       textAlign:"center"
    },
     tableheadercell:{
      color:"#fff",
      fontSize:24,
    },
    cell:{
      color:'#fff',
      fontSize:24,
      flexDirection:'column'
    },
    stnname:{
      fontSize: 12, 
      fontWeight: '700',
      color:'#333',
      textAlign:"left",
      flexWrap:'wrap',
      alignContent:'flex-start'
    },
    rowbox:{
      paddingTop:10,
      paddingBottom:10,
      paddingLeft:0,
      paddingRight:0,
      flexDirection:'column',
      textAlign:'left',
      justifyContent:'flex-start',
      flex: 1,
      borderWidth:2,
      borderColor:'red',
      flexWrap:'wrap',
      width:'100%'
    }
  });

score 3 · Answer 1 · answered Aug 24 '21 at 16:35

3

Use a View (with justifyContent: 'center') instead of DataTable.Cell to achieve the multilined cell

Source: https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600

answered Aug 24 '21 at 16:35

Andrew

1,238
3
13
28

score 2 · Accepted Answer · answered Dec 04 '20 at 13:08

I Get the same issue, after big search i simply abandon this idea and start to use.

https://github.com/GeekyAnts/react-native-easy-grid/

Is realy simple to construct the same structure, like a table, after o just need to set border if you want, and done, simple and easy like Html.

score 0 · Answer 3 · answered Apr 13 '23 at 05:59

0

simply added properties out of style: numberOfLines={2}

answered Apr 13 '23 at 05:59

MUHAMMAD SHOAIB

1

Whenever writing code snippet, use formatting to make it more clearer to the reader. – Shivam Tiwari Apr 19 '23 at 08:06

score -1 · Answer 4 · answered Mar 18 '23 at 17:21

You can use css properties: textOverflow: 'clip', whiteSpace: 'normal' on your cell.

Example:

<DataTable.Row>
  <DataTable.Cell textStyle={styles.cell}>Too long text, which should be multiline.</DataTable.Cell>
</DataTable.Row>
    
const styles = StyleSheet.create({
  cell: {
    textOverflow: 'clip',
    whiteSpace: 'normal',
  },
});

React native paper DataTable.Cell overflow text causes hide full text

4 Answers4