How adjust column width of header and row same in datatabe of react-native-paper?

Hy! I’m new in react native development and using expo-cli. I add a react-native-paper datatable in my app its working fine but I have many fields I add a horizontal scroll but after adding horizontal scroll table content looks messy. like every data is attached with each other I add padding but datatable.header and datatable cell are not same size. I attach a picture, you can see it there.

    import React from 'react';
    import { StyleSheet, Text, View, ScrollView, TextInput, Button, } from 'react-native';
    import { Card } from "react-native-shadow-cards";
    import {DataTable} from  "react-native-paper"


    const AllUsers = () =>{
        return(
            <ScrollView horizontal>
            <View>
                <View style={styles.headSection}>
                    <Text style={styles.titleHeading}>All Users</Text>
                </View>
               
                <DataTable  >
                    <DataTable.Header  >
                        <DataTable.Title style={{borderColor:'red', borderWidth:1,}}  > <Text>Id</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}}  > <Text >Username</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} > <Text >First Name</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} > <Text >Last Name</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} >  <Text >Email</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} numeric  > <Text >Contact No.</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} numeric  > <Text >Age</Text></DataTable.Title>
                        <DataTable.Title style={{padding:10, borderColor:'red', borderWidth:1,}} numeric  > <Text >Code</Text></DataTable.Title>
                    </DataTable.Header>
                    
                    <DataTable.Row>
                        <DataTable.Cell style={{borderColor:'red', borderWidth:1,}} >1.</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}}  >adiljaz02</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}} >Adil</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}} >IJaz</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}} >[email protected]</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}} numeric>3214578288</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}} numeric>18</DataTable.Cell>
                        <DataTable.Cell style={{padding:10, borderColor:'red', borderWidth:1,}}  numeric>23</DataTable.Cell>
                    </DataTable.Row>
                    <DataTable.Pagination
                        page={1}
                        numberOfPages={3}
                        onPageChange={(page) => { console.log(page); }}
                        label="1-2 of 6"
                    />
                    
                </DataTable>
                
            </View>
            </ScrollView>
        )    
    }
    const styles = StyleSheet.create({
        table:{
            
        },
        headSection:{
            borderBottomWidth:2,
            borderColor:'black',
            paddingBottom:15,
            
        },
        titleHeading:{
            marginTop:50,
            fontWeight:'bold',
            marginHorizontal:167,
        },
        tableHeading:{
            fontWeight:'bold',
            color:'black',
        },
        header:{
            paddingLeft:0,
        },
    });
    export default AllUsers;

Look that fields name and there data is not under each other.

Source: Android Questions

LEAVE A COMMENT