React Native Mantine › Data display
DataList
Display a list of label-value pairs
Import: import { DataList } from 'react-native-mantine';
Usage
import { DataList } from 'react-native-mantine';
<DataList withDivider labelWidth={100} size="sm">
<DataList.Item>
<DataList.ItemLabel>Name</DataList.ItemLabel>
<DataList.ItemValue>John Doe</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Email</DataList.ItemLabel>
<DataList.ItemValue>john.doe@example.com</DataList.ItemValue>
</DataList.Item>
</DataList>
// Vertical orientation
<DataList orientation="vertical" gap="md">
...
</DataList>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | DataList.Item components | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "sm" | Controls font size of labels and values |
gap | MantineNumberSize | "sm" | Key of theme.spacing or number, gap between items |
orientation | 'horizontal' | 'vertical' | "horizontal" | Orientation of items, horizontal renders label and value side by side |
withDivider | boolean | false | Determines whether items should be separated with a divider |
labelWidth | number | 120 | Width of the label column in horizontal orientation |
style | ViewStyle | Additional styles to apply to the root element |