Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 261
Prajna Avatar asked Oct 14 '20 07:10

Prajna


1 Answers

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

for example:

 <DataTable.Cell style={{flex: 3}}>
like image 99
Wojtek Szafraniec Avatar answered Jan 04 '23 10:01

Wojtek Szafraniec