0.1.0 • Published 6 months ago
react-native-table-element v0.1.0
react-native-table-element
React Native Table Element is a library that provides a customizable Table component for React Native applications. This library simplifies the process of creating table and provides a variety of options to customize the table
Getting started
npm install react-native-table-element
or
yarn add react-native-table-element
Table Props
Table Example
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import Table from 'react-native-table-element';
export default function App() {
return (
<View style={styles.container}>
<Table
containerStyle={{ margin: 10 }}
header={['#', 'Song', 'Artist', 'Year']}
columnsWidth={[30, 160, 150, 50]}
columnsAlign={['center', 'left', 'left', 'right']}
data={[
[
1,
'The Sliding Mr. Bones (Next Stop, Pottersville)',
'Malcolm Lockyer',
1961,
],
[2, 'Witchy Woman', 'The Eagles', 1972],
[2, 'Shining Star', 'Earth, Wind, and Fire', 1975],
]}
borderColor="#000"
borderWidth={1}
headerStyle={{
backgroundColor: '#2168db',
}}
headerTextStyle={{
fontWeight: 'bold',
color: '#fff',
}}
textStyle={{
color: '#333',
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
Table Horizontal scroll Example
<ScrollView horizontal>
<View>
<Table
containerStyle={{ margin: 10 }}
header={['#', 'Song', 'Artist', 'Year']}
columnsWidth={[30, 200, 150, 50]}
columnsAlign={['center', 'left', 'left', 'right']}
data={[
[
1,
'The Sliding Mr. Bones (Next Stop, Pottersville)',
'Malcolm Lockyer',
1961,
],
[2, 'Witchy Woman', 'The Eagles', 1972],
[2, 'Shining Star', 'Earth, Wind, and Fire', 1975],
]}
borderColor="#000"
borderWidth={1}
headerStyle={{
backgroundColor: '#2168db',
}}
headerTextStyle={{
fontWeight: 'bold',
color: '#fff',
}}
textStyle={{
color: '#333',
}}
/>
</View>
</ScrollView>
0.1.0
6 months ago