Busco mis datos json, quiero mostrarlos con una tabla de datos. El problema es que mi componente FlatList crea una nueva tabla de datos para cada elemento, pero quiero una DataTable para todos mis elementos.
No encontré como solucionarlo. Comparto todo el código aquí. Usted me podría ayudar por favor ? Gracias
import React, { Component } from 'react'; import { StyleSheet, Text, View, FlatList, Dimensions, ActivityIndicator } from 'react-native'; import { DataTable } from 'react-native-paper'; export default class Bien extends Component { constructor(props) { super(props); this.state = { data: [], isLoading: true }; } async getAll() { try { const response = await fetch('myJsonData'); const json = await response.json(); this.setState({ data: json.table }); } catch (error) { console.log(error); } finally { this.setState({ isLoading: false }); } } componentDidMount() { this.getAll(); } renderItem = ({ item, index }) => { return ( <View> <DataTable> <DataTable.Header> <DataTable.Title>Type</DataTable.Title> <DataTable.Title>Ville</DataTable.Title> <DataTable.Title numeric>Prix</DataTable.Title> </DataTable.Header> <DataTable.Row> <DataTable.Cell>{item.Category}</DataTable.Cell> <DataTable.Cell>{item.Ville}</DataTable.Cell> <DataTable.Cell numeric>{item.Prix}</DataTable.Cell> </DataTable.Row> </DataTable> </View> ); }; render() { const { data, isLoading } = this.state; return ( <FlatList data={data} renderItem={this.renderItem} /> ); } };
Su FlatList está recorriendo cada elemento y creando una DataTable. En su lugar, puede envolver los elementos Data.Row dentro de una FlatList.
<DataTable> <DataTable.Header> <DataTable.Title>Dessert</DataTable.Title> <DataTable.Title numeric>Calories</DataTable.Title> <DataTable.Title numeric>Fat</DataTable.Title> </DataTable.Header> <FlatList data={data} renderItem={_renderItem} /> </DataTable>
Ejemplo de trabajo completo: https://snack.expo.dev/@tnr_c/scrollable-datatable