1.0.4 • Published 3 years ago
React Native Table Optimize 🇻🇳
The package is both Android and iOS compatible.
Try it out
Have a look at the examples below! :-)
Installation
- Install as dependency:
// yarn
yarn add react-native-table-optimize
// or npm
npm i react-native-table-optimize
- 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>
);
}