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