Upraviteľný komponent tabuľky s vertikálnym posúvaním v natívnom formáte React

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Upraviteľný komponent tabuľky s vertikálnym posúvaním v natívnom formáte React

Upraviteľný komponent tabuľky s vertikálnym posúvaním v natívnom formáte React. reagovat-nativne-upravitelny-zoznam

vytvoriť blog pomocou node.js

Inštalácia

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

Použitie

import EditableTable from 'react-native-editable-table'; class editabletable extends Component{ render(){ return ( { 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} /> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: '#F5FCFF' }, table: { flex: 1, marginBottom: 30 } });

Odhlásiť sa index.js

Vlastnosti

Prop Predvolené Napíšte Popis
Štýl - object Špecifikujte štýl tabuľky, napr. šírka výška…
stĺpce - array Zadajte hlavičky tabuliek. Príklad: | _+_ |. Vlastnosti: Hodnota, Vstupný názov, ak ho je možné upravovať, šírka v %, upraviteľný
hodnoty [] {value: 'Col 4', input: 'c4', width: 30, editable: true} Hodnoty vašej tabuľky. Každý objekt predstavuje riadok. Príklad: | _+_ |. Vlastnosti: Hodnota, Upraviteľné
emptyRows 1 Array Na konci tabuľky zadajte požadovaný počet ďalších riadkov
výška bunky 40 [20, {value: 'Edit Me', editable: true}, {value: 45}, 'foo'] Výška buniek
onCellChange - number Spätné volanie, keď bunka zmení hodnoty, ak je možné ju upraviť. Návratové hodnoty sú: hodnota, stĺpec, riadok, jedinečné_id. Unikátny_id je vstupný názov stĺpca-riadkovýIndex-stĺpcovýIndex
onColumnChange - number Spätné volanie pri zmene stĺpca hlavičky. Návratové hodnoty sú: hodnota, stará hodnota, nová hodnota
customStyles - function Vlastné štýly na prepísanie. Pozrite sa na style.js
hranice falošný function Ak chcete okraje tela stola alebo nie
hlavičkaHranice falošný object či chcete mať na záhlaví tabuľky okraje alebo nie

Podrobnosti na stiahnutie:

Autor: Jacob-Hyde



GitHub: https://github.com/jacob-hyde/react-native-editable-table

#reagujte natívne #programovanie #react

Pozri Tiež:

Nové Položky

Najpritibilnejšie

Redakcia Choice