This is my first time using react native paper. I am building a data table that should be horizontally scrollable.
Each cell might hold data that would be longer than the header title. I would like the column headers to take the width of the max content in that column so that the data below it is correctly aligned in the column.
Currently it looks like this. Please see the code below:
<ScrollView horizontal style={[globalStyle.marginTop16]}>
<DataTable>
<DataTable.Header>
<DataTable.Title numeric>Location ID</DataTable.Title>
<DataTable.Title>Name</DataTable.Title>
<DataTable.Title>Address</DataTable.Title>
<DataTable.Title>Status</DataTable.Title>
<DataTable.Title>Action</DataTable.Title>
</DataTable.Header>
{locations &&
locations.rows &&
locations.rows.map(row => {
return (
<DataTable.Row>
<DataTable.Cell textStyle={{alignSelf: 'flex-start'}}>
{row.locationId}
</DataTable.Cell>
<DataTable.Cell>{row.name}</DataTable.Cell>
<DataTable.Cell>
{[row.address1, row.city, row.state].join(', ')}
</DataTable.Cell>
<DataTable.Cell>
{parseInt(row.status) === 1 ? 'Active' : 'Inactive'}
</DataTable.Cell>
<DataTable.Cell>
<TouchableOpacity>
<Text>Edit</Text>
</TouchableOpacity>
</DataTable.Cell>
</DataTable.Row>
);
})}
<DataTable.Pagination
page={page}
numberOfPages={3}
onPageChange={page => setPage(page)}
label="1-2 of 6"
optionsPerPage={optionsPerPage}
itemsPerPage={10}
showFastPagination
optionsLabel={'Rows per page'}
/>
</DataTable>
</ScrollView>