1.0.0 • Published 4 years ago
react-native-comparison-table v1.0.0
react-native-comparison-table
Comparison table with fixed header for React Native
Getting started
yarn add react-native-comparison-table
or
npm install react-native-comparison-table --save
Usage
import {
ComparisonTable,
ComparisonTableSection,
ComparisonTableRow
} from 'react-native-comparison-table'; const phones = [
{
id: 1,
name: 'iPhone 11 Pro',
image: require('./images/iphone11_pro.jpg'),
screenSize: '5.8',
display: 'Super Retina XDR display',
height: '144.0',
width: '71.4',
depth: '8.1',
weight: '188',
videoPlayback: '18',
audioPlayback: '65'
},
{
id: 2,
name: 'iPhone 11',
image: require('./images/iphone11.jpg'),
screenSize: '6.1',
display: 'Liquid Retina HD display',
height: '150.9',
width: '75.7',
depth: '8.3',
weight: '194',
videoPlayback: '17',
audioPlayback: '65'
},
{
id: 3,
name: 'iPhone SE (2nd generation)',
image: require('./images/iphoneSE.jpg'),
screenSize: '4.7',
display: 'Retina HD display',
height: '138.4',
width: '67.3',
depth: '7.3',
weight: '148',
videoPlayback: '13',
audioPlayback: '40'
}
]
<ComparisonTable
height={600}
headerCellWidth={110}
cellWidth={200}
>
<ComparisonTableRow
fixed
headerCellContent="Model"
data={phones}
comparing="name"
rowStyle={styles.rowShadow}
/>
<ComparisonTableRow
headerCellContent=""
data={phones}
cellContent={({ item }) => (
<Image
source={item.image}
resizeMode="contain"
style={{
width: 80,
height: 120
}}
/>
)}
cellStyle={styles.alignCenter}
/>
<ComparisonTableSection title="Size and Weight">
<ComparisonTableRow
headerCellContent="Height"
data={phones}
comparing="height"
/>
<ComparisonTableRow
headerCellContent="Width"
data={phones}
comparing="width"
/>
<ComparisonTableRow
headerCellContent="Weight"
data={phones}
getBestBy="asc"
comparing="weight"
/>
</ComparisonTableSection>
</ComparisonTable>Check out the example project for more examples.
Props
<ComparisonTable />
| Prop name | Type | Description | Default |
|---|---|---|---|
| isHighlightBest | boolean | If false the cell with the best compared value won't be highlighted | true |
| headerCellWidth | number | Width of the header cell | 90 |
| cellWidth | number | Width of the body cell | 156 |
| height | number | The height of the table. It is required if the top ComparisonTableRow is fixed | 400 |
<ComparisonTableSection />
| Prop name | Type | Description | Default |
|---|---|---|---|
| title | string | The title of the section |
<ComparisonTableRow />
| Prop name | Type | Description | Default |
|---|---|---|---|
| data | array | Array of objects to compare. Data structure can refer to the example above. Required | |
| comparing | string/function | string: The key of the object to compare. function: need to return an array of data to compare, e.g. (data) => data.map(item => item.count). Required if the best value need to be highlighted | |
| getBestBy | string/function | string: asc or desc. The values will be sorted in specified order and the first item would be the best. function: custom compare function be passed to array.sort(). The first item will be the best. Required if the best value need to be highlighted | |
| fixed | boolean | Fixes the row position. Normally would apply to the first row | false |
| cellTextAlign | string | Setting the textAlign of the body cell text | left |
| headerCellContent | string/function | The content of the header cell. Use function to render custom content. You can pass empty string if you want the header cell to be empty | |
| headerCellStyle | object | The style of the header cell. | |
| cellContent | function | Customise the content of body cell. By default the body cell will display the comparing value ({ item, index, isBest, cellTextStyle, bestCellTextStyle }) => {} | |
| cellStyle | object | The style of the body cell. | |
| rowStyle | object | The style of the row. | |
| bestCellStyle | object | The style of the cell containing best value. Expected to apply to <View> | |
| bestCellTextStyle | object | The text style of the cell containing best value. Expected to apply to <Text> | |
| mergeCells | boolean | Merges the body cells. Combining with empty headerCellContent and custom cellContent, you can create a row with custom content | false |
Contributors
Issues and pull requests are welcomed. For issues, please attach a screenshot showing the bug along with code snippet.
License
The library is released under the MIT licence.
1.0.0
4 years ago