#react-native-easy-table ###a simple javascript implentation of Table for React Native
##Usage Example:
import Table, { SimpleCell } from 'react-native-easy-table'
const MyComponent = (props) => {
return(
<View style={styles.container}>
<Table rowTitle={['A','B','C','D','E']}
columnTitle={['a','b','c','d','e']}
rowComponent={{com:SimpleCell, style:{height:30}}}
columnComponent={{com:SimpleCell}}
crossComponent={{com:SimpleCell}}
crossData={'X'}
cellData={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]}
cellComponent={{com:SimpleCell, style:[{height:30}]}}
highlightAndColor={{color:'red'}}
crossHighlight
style={[styles.topBorder, styles.bottomBorder]}
/>
</View>
)
}Above renders:
##API: ####props
| props name | description |
|---|---|
| rowTitle | An array contains data you want to show in header row |
| columnTitle | An array contains data you want to show in leftmost column |
| rowComponent | Props receive a object with at least one key of com, which defines what component to be used as a cell for header row(sure you can use your own component). Can also receive a style property used to define style for the component to be used, the style can be both an arry or object |
| columnComponent | Props receive a object with at least one key of com, which defines what compoent to be used as a cell for leftmost column cells(sure you can use your own component). Can also receive a style property used to define style for the component to be used, the style can be both an arrary or object |
| crossData | Define data to show in the up-left corner cell |
| crossComponent | Define component to be used as the up-left corner cell |
| cellData | An array contains data for all cells except header row and leftmost column |
| cellComponent | Define component to be used as cell |
| highlightAndColor | If defined, rowComponent and columnComponent will be wrapped by a TouchableOpacity component to enable an tapped event which trigers corresponding row and column to be highlighted |
| corssHighlight | Boolean, if defined, up-left corner cell will be wrapped by a TouchableOpacity component to enable to tapped event which trigers all cells' highlighting |
| style | Define style for the Table component |
| fillBlank | Boolean, if defined, when cell (data counts)%(columnTitle count)is not zero, the remained data cell will not expand(default behavior) but stay tight as other cells do. At this time you need to define a BlankComponent to tell which component to be used to fill the blank places, please see below example |
| BlankComponent | Component to be used to fill the blank places(sure you can use your own component), please see below example |
####Components
- Table : the main component to be used
- SimpleCell : a simple Text component wrapped by View to render text
- BlankCell : a blank placeholder component to be used to fill the blank spaces
##Example: ####default behavior: expand
import Table, { SimpleCell } from 'react-native-easy-table'
const MyComponent = (props) => {
return(
<View style={styles.container}>
<Table rowTitle={['A','B','C','D','E']}
columnTitle={['a','b','c','d','e']}
rowComponent={{com:SimpleCell, style:{height:30, backgroundColor: 'lightgreen'}}}
columnComponent={{com:SimpleCell, style:{backgroundColor: 'lightblue'}}}
crossComponent={{com:SimpleCell}}
crossData={'X'}
cellData={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]}
cellComponent={{com:SimpleCell, style:[{height:30},{backgroundColor: 'orange'}]}}
highlightAndColor={{color:'red'}}
crossHighlight
style={[styles.topBorder, styles.bottomBorder]}
/>
</View>
)
}
####use fillBlank and BlankComponent to prevent expanding
import Table, { SimpleCell, BlankCell } from 'react-native-easy-table'
const MyComponent = (props) => {
return(
<View style={styles.container}>
<Table rowTitle={['A','B','C','D','E']}
columnTitle={['a','b','c','d','e']}
rowComponent={{com:SimpleCell, style:{height:30, backgroundColor: 'lightgreen'}}}
columnComponent={{com:SimpleCell, style:{backgroundColor: 'lightblue'}}}
crossComponent={{com:SimpleCell}}
crossData={'X'}
cellData={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]}
cellComponent={{com:SimpleCell, style:[{height:30},{backgroundColor: 'orange'}]}}
highlightAndColor={{color:'red'}}
crossHighlight
fillBlank
blankComponent={{com:BlankCell,style:{backgroundColor: 'grey'}}}
style={[styles.topBorder, styles.bottomBorder]}
/>
</View>
)
}