7

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>
Prajna
  • 578
  • 4
  • 8
  • 23

1 Answers1

13

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

for example:

 <DataTable.Cell style={{flex: 3}}>
Wojtek Szafraniec
  • 541
  • 3
  • 7
  • Can we add horizontal scrollbar because there are 5 columns, I want First column as flex 5, so the end columns are showing as ...? – Prajna Oct 14 '20 at 09:44
  • I think you would have to wrap it with horizontal scroll view, but actually did not try it. – Wojtek Szafraniec Oct 14 '20 at 10:33
  • Okay, I is not working properly, I have wrapped whole table with horizontal and another scroll bar for table rows @Wojtek – Prajna Oct 14 '20 at 10:46
  • Unfortunately, we do not support that in Paper yet, quick fix for that would be to get rid of DataTable & use ScrollView with sub-components like cells and header :( – Wojtek Szafraniec Oct 14 '20 at 10:57