react-native-editable-list
Editable Table Component with vertical scrolling in React native
Install
npm install react-native-editable-list --save
Usage
; { return <SafeAreaView style=stylescontainer> <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= { console; } onColumnChange= { console } customStyles= style=stylestable /> </SafeAreaView> ; } const styles = StyleSheet;
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 |