pandafeeder / react-native-easy-table

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