Tabelle erstellen in React Native

React Native hat keine <table>-Entsprechung – tabellarische Daten bauen Sie selbst mit verschachtelten Views und Flexbox, üblicherweise kombiniert mit FlatList für die Zeilen.

1. Beschreibung

Eine Tabelle besteht aus einer Kopfzeile (feste Spaltenüberschriften) und mehreren Datenzeilen – jede Zeile ist eine horizontale View (flexDirection: 'row') mit mehreren Text-"Zellen", deren Breiten über flex-Werte im Verhältnis zueinander stehen.

2. Kurzes Beispiel

<View style={{ flexDirection: 'row' }}>
  <Text style={{ flex: 2 }}>Name</Text>
  <Text style={{ flex: 1 }}>Preis</Text>
</View>

3. Komplettes Projekt: Produkttabelle

npx create-expo-app table-demo
cd table-demo

App.js

import { View, Text, FlatList, StyleSheet } from 'react-native';

const PRODUKTE = [
  { id: '1', name: 'Wanderschuhe', kategorie: 'Schuhe', preis: 89.99 },
  { id: '2', name: 'Rucksack 30L', kategorie: 'Taschen', preis: 59.5 },
  { id: '3', name: 'Regenjacke', kategorie: 'Jacken', preis: 74.0 },
];

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[styles.zeile, styles.kopfzeile]}>
        <Text style={[styles.zelle, styles.kopfText, { flex: 2 }]}>Name</Text>
        <Text style={[styles.zelle, styles.kopfText, { flex: 1.5 }]}>Kategorie</Text>
        <Text style={[styles.zelle, styles.kopfText, { flex: 1, textAlign: 'right' }]}>Preis</Text>
      </View>
      <FlatList
        data={PRODUKTE}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => (
          <View style={[styles.zeile, index % 2 === 1 && styles.zeileGerade]}>
            <Text style={[styles.zelle, { flex: 2 }]}>{item.name}</Text>
            <Text style={[styles.zelle, { flex: 1.5 }]}>{item.kategorie}</Text>
            <Text style={[styles.zelle, { flex: 1, textAlign: 'right' }]}>
              {item.preis.toFixed(2)} €
            </Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  zeile: { flexDirection: 'row', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  kopfzeile: { borderBottomWidth: 2, borderBottomColor: '#111827' },
  kopfText: { fontWeight: 'bold' },
  zeileGerade: { backgroundColor: '#f9fafb' },
  zelle: { fontSize: 14 },
});

4. Erklärung

flex: 2 vs. flex: 1.5 vs. flex: 1 – bestimmt die relative Breite jeder Spalte zueinander (Name doppelt so breit wie Preis, Kategorie 1,5-mal so breit).
Kopfzeile und Datenzeilen verwenden EXAKT dieselben flex-Werte pro Spalte – nur so bleiben Spalten optisch ausgerichtet.
index % 2 === 1 && styles.zeileGerade – abwechselnde Zeilenfarben ("Zebra-Streifen"), ein gängiges Muster zur besseren Lesbarkeit langer Tabellen.
textAlign: 'right' auf der Preis-Zelle – Zahlenwerte werden konventionell rechtsbündig dargestellt.

5. Ausgaben

Ausgabe

Eine Tabelle mit fetter Kopfzeile ("Name", "Kategorie", "Preis") und drei Datenzeilen, abwechselnd weiß/hellgrau hinterlegt, Preise rechtsbündig ("89.99 €", "59.50 €", "74.00 €").