90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { Text, View, StyleSheet, ScrollView } from 'react-native';
|
|
import { BasicExample } from './BasicExample';
|
|
import { ScrollableExample } from './ScrollableExample';
|
|
import { ExampleThree } from './ExampleThree';
|
|
import { StickyTableExample } from './StickyColumnExample';
|
|
import { ExampleFour } from './ExampleFour';
|
|
import { ExampleFive } from './ExampleFive';
|
|
import SheetJSExample from './SheetJSExample';
|
|
|
|
export default function App() {
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Text style={styles.heading}>React Native Tabeller</Text>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>Basic Table</Text>
|
|
<BasicExample />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>Scrollable Table</Text>
|
|
<ScrollableExample />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>
|
|
Scrollable Sticky 1st Column Table
|
|
</Text>
|
|
<StickyTableExample />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>Example Three</Text>
|
|
<ExampleThree />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>Example Four</Text>
|
|
<ExampleFour />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>Example Five</Text>
|
|
<ExampleFive />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.subheading}>SheetJS Example</Text>
|
|
<SheetJSExample />
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexGrow: 1,
|
|
paddingHorizontal: 20,
|
|
paddingTop: 60,
|
|
backgroundColor: '#f5f5f5',
|
|
alignItems: 'center',
|
|
alignSelf: 'center',
|
|
maxWidth: 800,
|
|
width: '100%',
|
|
},
|
|
heading: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
section: {
|
|
marginBottom: 30,
|
|
padding: 15,
|
|
backgroundColor: '#fff',
|
|
borderRadius: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
width: '100%',
|
|
},
|
|
subheading: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
marginBottom: 10,
|
|
},
|
|
});
|