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.