React Native Table Optimize 🇻🇳

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>
  );
}