0.1.2 • Published 12 months ago
table-react-native v0.1.2
table-react-native
Installation
npm install table-react-nativeUsage
import * as React from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { Table, Tr, Td, Head, Body } from 'table-react-native';
export default function App() {
return (
<View style={styles.container}>
<ScrollView
style={{ display: 'flex', flexDirection: 'column' }}
horizontal={false}
>
<ScrollView horizontal={true}>
<Table widths={[150, 150, 160]}>
<Head style={{ backgroundColor: '#F9FAFB' }}>
<Tr>
<Td style={styles.Td}>
<Text style={styles.tableHeadertext}>First Name</Text>
</Td>
<Td style={styles.Td}>
<Text style={styles.tableHeadertext}>Last Name</Text>
</Td>
<Td style={styles.Td}>
<Text style={styles.tableHeadertext}>Phone Number</Text>
</Td>
</Tr>
</Head>
<Body>
<Tr style={styles.Tr}>
<Td style={styles.Td}>
<Text>Ibrahim</Text>
</Td>
<Td style={styles.Td}>
<Text>Kazımov</Text>
</Td>
<Td style={styles.Td}>
<Text>+9999999999</Text>
</Td>
</Tr>
<Tr style={styles.Tr}>
<Td style={styles.Td}>
<Text>Alper</Text>
</Td>
<Td style={styles.Td}>
<Text>Bayram</Text>
</Td>
<Td style={styles.Td}>
<Text>+123231123</Text>
</Td>
</Tr>
</Body>
</Table>
</ScrollView>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 55,
},
Td: {
paddingHorizontal: 24,
paddingVertical: 12,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-start',
},
Tr: {
borderBottomWidth: 1,
borderBottomColor: '#d1d5db',
},
tableHeadertext: {
fontWeight: '400',
textTransform: 'uppercase',
},
});Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library