React Native Table Optimize 🇻🇳

Makes it easy to display data in tabular form and you can completely customize it flexibly.

The package is both Android and iOS compatible.

Try it out

Have a look at the examples below! :-)

• Installation
• Props: TableWrap TableHead TableBody TableRow
• Examples

Installation

1. Install as dependency:

1// yarn
2yarn add react-native-table-optimize
3
4// or npm
5npm i react-native-table-optimize

2. Add needed components:

1import { TableWrap, TableHead, TableBody, TableRow } from 'react-native-table-optimize';

Props

• TableWrap
• TableHead
• TableBody
• TableRow

TableWrap

Prop	Default	Type	Description
children	-	React.ReactNode	Children. Should be of type Section
width	100%	string	Length of percentage table with screen size
scrollHorizontal	false	bool	Allow horizontal dragging of the table if the length of the board exceeds 100%

TableHead

Prop	Default	Type	Description
titleTextStyle	-	Text.propTypes.style	These styles will be applied to the title text table.
itemStyle	-	View.propTypes.style	These styles will be applied to the box (row - col) in table.
dataTitleHead	-	array	An array of text corresponding to each column heading
dataSpacing	-	array	A text array of percentage distances for each column

TableBody

Prop	Default	Type	Description
children	-	React.ReactNode	Children. Should contains the rows of the table
isScroll	false	bool	Allow scrolling up and down and fix the table title
bodyHeight	300	number	Table content height
bodyStyle	_	View.propTypes.style	These styles will be applied to the content of table
onRefreshTable	_	func	Listen to refresh table event

TableRow

Prop	Default	Type	Description
width	100%	React.ReactNode	Length of percentage table with screen size
textStyle	_	Text.propTypes.style	These styles will be applied to the row text table.
itemStyle	_	View.propTypes.style	These styles will be applied to the item row table.
dataRow	_	array	An array of text corresponding to each column row
dataSpacing	_	array	A text array of percentage distances for each row
onHandleItemRow	_	func	Listen to onPress event of item

Examples

1import { TableWrap, TableHead, TableBody, TableRow } from 'react-native-table-optimize';
2export default function App() {
3
4  return (
5      <ScrollView>
6          <Text style={{textAlign: 'center', paddingVertical: 30, marginTop: 30, fontWeight: '700', fontSize: 20}}>Table Native Table Optimize</Text>
7          <TableWrap width='125%' scrollHorizontal={true}> 
8              <TableHead
9                  dataSpacing={dataSpacing}
10                  dataTitleHead={dataTitleTHead}
11                  itemStyle={{
12                      backgroundColor: THEME.PRIMARY_COLOR_LIGHT,
13                      padding: 10,
14                      borderWidth: 1,
15                      borderColor: THEME.PRIMARY_COLOR_DARK,
16                  }}
17                  titleTextStyle={{
18                      textAlign: 'center',
19                      color: THEME.BLACK_COLOR,
20                      fontWeight: '700'
21                  }}
22              />
23              <TableBody
24                  isScroll={true}
25                  bodyHeight={465}
26                  onRefreshTable={() => {
27                      Alert.alert('On RefreshDataTable')
28                  }}
29              >
30                  {
31                      dataRow.map((item, idx) => {
32                          let itemRow = [
33                              item.content1,
34                              item.content2,
35                              item.content3,
36                              item.content4,
37                              item.content5,
38                          ]
39                          return (
40                              <TableRow 
41                                  key={idx}
42                                  width='100%' 
43                                  dataSpacing={dataSpacing}      
44                                  dataRow={itemRow}    
45                                  textStyle={{
46                                      textAlign: 'center',
47                                      color: THEME.BLACK_COLOR
48                                  }}
49                                  itemStyle={{
50                                      backgroundColor: THEME.WHITE_COLOR,
51                                      padding: 10,
52                                      borderWidth: 1,
53                                      borderColor: THEME.PRIMARY_COLOR_LIGHT,
54                                  }}         
55                                  onHandleItemRow={() => Alert.alert('On Touch Row')}            
56                              />
57                          )
58                      })
59                  }
60              </TableBody>
61          </TableWrap>
62      </ScrollView>
63  );
64}