Editable Table Component with vertical scrolling in React native
npm install react-native-editable-list --save |  |
|---|
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}, {value: 'Col 2', input: 'c2', width: 20}, {value: 'Col 3', input: 'c3', width: 30}, {value: 'Col 4', input: 'c4', width: 30}, ]} values={[ [10, 'test', 23, ':)'], [20, {value: 'Edit Me', editable: true}, {value: 45}, 'haha'], [30, {value: 'Span Me', 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
| 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 |