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:

// yarn
yarn add react-native-table-optimize

// or npm
npm i react-native-table-optimize

2. Add needed components:

import { 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

import { TableWrap, TableHead, TableBody, TableRow } from 'react-native-table-optimize';
export default function App() {

  return (
      <ScrollView>
          <Text style={{textAlign: 'center', paddingVertical: 30, marginTop: 30, fontWeight: '700', fontSize: 20}}>Table Native Table Optimize</Text>
          <TableWrap width='125%' scrollHorizontal={true}> 
              <TableHead
                  dataSpacing={dataSpacing}
                  dataTitleHead={dataTitleTHead}
                  itemStyle={{
                      backgroundColor: THEME.PRIMARY_COLOR_LIGHT,
                      padding: 10,
                      borderWidth: 1,
                      borderColor: THEME.PRIMARY_COLOR_DARK,
                  }}
                  titleTextStyle={{
                      textAlign: 'center',
                      color: THEME.BLACK_COLOR,
                      fontWeight: '700'
                  }}
              />
              <TableBody
                  isScroll={true}
                  bodyHeight={465}
                  onRefreshTable={() => {
                      Alert.alert('On RefreshDataTable')
                  }}
              >
                  {
                      dataRow.map((item, idx) => {
                          let itemRow = [
                              item.content1,
                              item.content2,
                              item.content3,
                              item.content4,
                              item.content5,
                          ]
                          return (
                              <TableRow 
                                  key={idx}
                                  width='100%' 
                                  dataSpacing={dataSpacing}      
                                  dataRow={itemRow}    
                                  textStyle={{
                                      textAlign: 'center',
                                      color: THEME.BLACK_COLOR
                                  }}
                                  itemStyle={{
                                      backgroundColor: THEME.WHITE_COLOR,
                                      padding: 10,
                                      borderWidth: 1,
                                      borderColor: THEME.PRIMARY_COLOR_LIGHT,
                                  }}         
                                  onHandleItemRow={() => Alert.alert('On Touch Row')}            
                              />
                          )
                      })
                  }
              </TableBody>
          </TableWrap>
      </ScrollView>
  );
}