Wie kann man eine benutzerdefinierte dynamische Tabelle in React erstellen?

Hallo, alle zusammen! 👋 😊

In der letzten Woche hatte ich ein Problem mit der Erstellung einer dynamischen Tabelle in React, und so dachte ich, dass jetzt vielleicht diese Lösung jemandem helfen kann.

Das Endergebnis dieser Lösung:

Das folgende Beispiel besteht aus mehreren Schritten:

1. Die dynamische Tabelle wurde auf Basis einer Array erstellt,
2. Jede Tabelle besteht aus einer Kopfzeile und Datenansätzen,
3. Die Kopfzeile ist fest und hat immer die gleiche Anzahl von Spalten,
4. Beim Erstellen der Datenansätze wurde die Funktion map() verwendet, um die Array-Elemente in React-Elemente zu konvertieren.

Vergiss nicht, dass jedes Element einen eigenen Schlüssel 🗝️ haben soll, weil es hilfreich in React ist, Änderungen am DOM-Baum optimal zu verwalten. So ein Schlüssel kann z.B. id sein, die jedem Element des Arrays zugeordnet ist.

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
// import React from 'react';
// import ReactDOM from 'react-dom';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
  	border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
  	border: '1px solid #3498DB',
    background: '#3498DB',
  	color: 'white',
    padding: '5px'
};

const App = () => {
  	const students = [
        { id: 1, name: 'Thomas', age: 25, favFruit: '🍏' },
        { id: 2, name: 'Adam', age: 43, favFruit: '🍌' },
        { id: 3, name: 'Markus', age: 16, favFruit: '🍊' },
        { id: 4, name: 'Jack', age: 29, favFruit: '🍒' }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={thStyle}>Id</th>
              <th style={thStyle}>Vorname</th>
              <th style={thStyle}>Alter</th>
              <th style={thStyle}>Lieblingsfrucht</th>
            </tr>
            {students.map(({ id, name, age, favFruit }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
                <td style={tdStyle}>{favFruit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Hinweis:

Falls du mehr über dynamischen Tabellen erfahren möchtest, klicke diesen Artikel. 😊

Siehe auch

• Wie kann man eine dynamische Tabelle in React erstellen?