react-native-table-element

React Native Table Element is a library that provides a customizable Table component for React Native applications. This library simplifies the process of creating table and provides a variety of options to customize the table

Getting started

npm install react-native-table-element

or

yarn add react-native-table-element

Table Props

| # | Prop | Params | isRequired | Description | | --- | --------------- | -------------------------- | ---------- | ------------------------------------------------------------------- | | 1 | data | Array[][] | true | | | 3 | header | Array[] | true | Header label for this table | | 4 | columnsWidth | Array[] | true | Define width for each columns in table | | 5 | columnsAlign | Array[] | no | Define text align for each columns in table (header is auto center) | | 6 | borderColor | String | no | Default #333 | | 7 | borderWidth | number | no | Default 1 | | 8 | containerStyle | ViewStyle | no | Styling for container Table wrapper | | 9 | headerStyle | ViewStyle | no | Styling for table header | | 10 | headerTextStyle | TextStyle | no | Styling for header text | | 11 | textStyle | TextStyle | no | Styling for text in all cell of table | | 12 | onRowPressed | (rowIndex: number) => void | no | Event for row pressed |

Table Example

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import Table from 'react-native-table-element';

export default function App() {
  return (
    <View style={styles.container}>
      <Table
        containerStyle={{ margin: 10 }}
        header={['#', 'Song', 'Artist', 'Year']}
        columnsWidth={[30, 160, 150, 50]}
        columnsAlign={['center', 'left', 'left', 'right']}
        data={[
          [
            1,
            'The Sliding Mr. Bones (Next Stop, Pottersville)',
            'Malcolm Lockyer',
            1961,
          ],
          [2, 'Witchy Woman', 'The Eagles', 1972],
          [2, 'Shining Star', 'Earth, Wind, and Fire', 1975],
        ]}
        borderColor="#000"
        borderWidth={1}
        headerStyle={{
          backgroundColor: '#2168db',
        }}
        headerTextStyle={{
          fontWeight: 'bold',
          color: '#fff',
        }}
        textStyle={{
          color: '#333',
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Table Horizontal scroll Example

<ScrollView horizontal>
  <View>
    <Table
      containerStyle={{ margin: 10 }}
      header={['#', 'Song', 'Artist', 'Year']}
      columnsWidth={[30, 200, 150, 50]}
      columnsAlign={['center', 'left', 'left', 'right']}
      data={[
        [
          1,
          'The Sliding Mr. Bones (Next Stop, Pottersville)',
          'Malcolm Lockyer',
          1961,
        ],
        [2, 'Witchy Woman', 'The Eagles', 1972],
        [2, 'Shining Star', 'Earth, Wind, and Fire', 1975],
      ]}
      borderColor="#000"
      borderWidth={1}
      headerStyle={{
        backgroundColor: '#2168db',
      }}
      headerTextStyle={{
        fontWeight: 'bold',
        color: '#fff',
      }}
      textStyle={{
        color: '#333',
      }}
    />
  </View>
</ScrollView>