Skip to content

Latest commit

 

History

History
158 lines (133 loc) · 8.53 KB

README.md

File metadata and controls

158 lines (133 loc) · 8.53 KB

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

  1. Install as dependency:
// yarn
yarn add react-native-table-optimize

// or npm
npm i react-native-table-optimize
  1. Add needed components:
import { TableWrap, TableHead, TableBody, TableRow } from 'react-native-table-optimize';

Props

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