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.