Reputation: 53

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

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%'
    }
  });

Upvotes: 4

Answers (5)

Vijay

Reputation: 1

<DataTable.Title
  textStyle={styles.cell}
  numberOfLines={2}
>
  This line is about to wrap `enter code here`
</DataTable.Title>

Add numberofLines props to Datatable.Title, it will assign two lines to text.

Upvotes: 0

MUHAMMAD SHOAIB

Reputation: 1

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

Upvotes: 0

Patryk

Reputation: 70

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',
  },
});

Upvotes: -1