React - wie erstellt man eine dynamische Tabelle

In diesem Beitrag wird gezeigt, wie man eine dynamische Tabelle in React erstellen kann. 

Das folgende Beispiel besteht aus mehreren Schritten:

1. Das Erstellen einer dynamischen Tabelle aus Basis eines Arrays,
2. Jede Tabelle besteht aus einer Kopfzeile und Datenansätzen,
3. Die Kopfzeile ist meist fest und hat immer die gleiche Anzahl von Spalten,
4. Beim Erstellen von Datenansätze soll man die Funktion map() verwenden. Das ist ein guter Lösungsweg, um Array-Elemente in React-Elemente zu konvertieren.

Hinweis:

Man kann nicht vergessen, 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'
}

const tdStyle = {
  	border: '1px solid black',
};

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

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

In diesem Abschnitt wird gezeigt, wiem man eine Komponente erstellen kann, die Daten anzeigt, die sich beim Anklicken ändern.

// ONLINE-RUNNER:browser;

// Uwaga: 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'
}

const tdStyle = {
  border: '1px solid black',
};

const Table = ({students}) => (
<div>
  <table style={tableStyle}>
    <tbody>
      <tr>
        <th style={tdStyle}>Id</th>
        <th style={tdStyle}>Vorname</th>
        <th style={tdStyle}>Alter</th>
      </tr>
      {students.map(({ id, name, age }) => (
        <tr key={id}>
          <td style={tdStyle}>{id}</td>
          <td style={tdStyle}>{name}</td>
          <td style={tdStyle}>{age}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>
);

const GROUP_1 = [
  { id: 1, name: 'Thomas',  age: 22 },
  { id: 2, name: 'Adam', age: 43 },
  { id: 3, name: 'Markus', age: 16 },
  { id: 4, name: 'Jack', age: 29 }
];

const GROUP_2 = [
  { id: 1, name: 'Katrin', age: 23 },
  { id: 2, name: 'Anne',  age: 18 }
];

const App = () => {
  const [students, setStudents] = React.useState(GROUP_1);
  return (
    <div>
      <div>
        <button onClick={() => setStudents(GROUP_1)}>GRUPPE_1 anzeigen</button>
        <button onClick={() => setStudents(GROUP_2)}>GRUPPE_2 anzeigen</button>
      </div>
      <br />
      <Table students={students} />
    </div >
  );
};

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

Siehe auch

• Wie kann man eine benutzerdefinierte dynamische Tabelle in React erstellen?