Search code examples
react-nativereact-native-paper

How to change the width of table column in DataTable of react-native-paper


The columns are arranging by default, if I try to give width to cell and title, there is no change in result. So how can I arrange column width explicitly?

  <DataTable style={{ height: height }}>
        <DataTable.Header>
            <DataTable.Title>Name</DataTable.Title>
            <DataTable.Title numeric>QTY</DataTable.Title>
            <DataTable.Title numeric>AMT</DataTable.Title>
            <DataTable.Title numeric>TAX</DataTable.Title>
            <DataTable.Title numeric>GROSS</DataTable.Title>
        </DataTable.Header>
        <ScrollView>
            {
                data && data.length > 0 ?
                    data.map((item, index) => {
                        return (
                            <DataTable.Row key={index}>
                                <DataTable.Cell>{item.NAME}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.QTY}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.AMT}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.TAX}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.GROSS}</DataTable.Cell>
                            </DataTable.Row>
                        );
                    })
                    :
                    false
            }
        </ScrollView>
    </DataTable>

Solution

  • You can set width of a particular cell by setting flex value to it.

    for example:

     <DataTable.Cell style={{flex: 3}}>