Editable Table Component with vertical scrolling in React native

react-native-editable-list

Editable Table Component with vertical scrolling in React native.

Install

npm install react-native-editable-list --save

Usage

import EditableTable from 'react-native-editable-table';

class editabletable extends Component{

  render(){
    return (
      <SafeAreaView style={styles.container}>
        <EditableTable
          columns={[
            {value: 'Col 1', input: 'c1', width: 20, sortable: true, defaultSort: 'ASC', reorder: 				true},
            {value: 'Col 2', input: 'c2', width: 20, sortable: false, editable: true, reorder: 					true},
            {value: 'Col 3', input: 'c3', width: 30, sortable: false, editable: true},
            {value: 'Col 4', input: 'c4', width: 30, sortable: true},
          ]}
          values={[
            [10, 'test', 23, ':)'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [30, {value: 'Extra Editable Rows', span: 2}, 'Dang'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)'],
            [10, 'test', 23, ':)']
          ]}
          emptyRows={2}
          onCellChange={(value, column, row, unique_id) => {
            console.log(`Cell Change on Column: ${column} Row: ${row}
                        and unique_id: ${unique_id}`);
          }}
          onColumnChange={(value, oldVal, newVal) => {
            console.log(`Column Change. Old Value: ${oldVal} New Value: ${newVal}`)
          }}
          customStyles={{

          }}
          style={styles.table}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  table: {
    flex: 1,
    marginBottom: 30
  }
});

Check out index.js

Properties

Prop Default Type Description
Style - object Specify the style of the Table, eg. width, height...
columns - array Specify your table headers. Example: {value: 'Col 4', input: 'c4', width: 30, editable: true}. Properties: Value, Input name if editable, width in %, editable
values [] Array The values of your table. Each object represents a row. Example: [20, {value: 'Edit Me', editable: true}, {value: 45}, 'foo']. Properties: Value, Editable
emptyRows 1 number Specify the amount of extra rows you want at the end of the table
cellHeight 40 number The height of the cells
onCellChange - function The callback when a cell changes values if it is editable. Return values are: value, column, row, unique_id. The unique_id is the column input name-rowIndex-columnIndex
onColumnChange - function The callback when a header column is changed. Return values are: value, old value, new value
customStyles - object Custom styles to override. See style.js
borders false bool If you want borders on the table body or not
headerBorders false bool if you want borders on the table headers or not

GitHub