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 |