Languages
[Edit]
DE

Wie kann man eine benutzerdefinierte dynamische Tabelle in React erstellen?

3 points
Created by:
Nikki
10460

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:

React - Beispiel fĂŒr eine dynamische Tabelle
React - Beispiel fĂŒr eine dynamische Tabelle

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

ReactJS - Blog berichten (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join