Skip to content

pandafeeder/react-native-easy-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

alt anm1 alt png1

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

alt png1

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

alt png1

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published