React - Jak stworzyć własną dynamiczną tabelę z dynamicznym nagłówkiem

W tym artykule chcielibyśmy pokazać, jak stworzyć dynamiczną tabelę w React.

W poniższym przykładzie użyłem następującej koncepcji:

• tabela jest opisana kolumnami i właściwościami danych,
• tabela składa się z nagłówka i kilku rekordów danych,
• tablica columns pozwala nam zdecydować, które nazwy kolumn chcemy wyświetlić w wierszach danych, 
• wykorzystując funkcję map() zmniejszamy ilość kodu - kolumny i tablice danych są mapowane na komponenty Reacta.

Uwaga:

Pamiętaj, że każdy element powinien posiadać unikalny klucz - pomaga to Reactowi optymalnie zarządzać zmianami w drzewie DOM. Takim kluczem może być na przykład identyfikator path przypisany do każdego z elementów tablicy.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.
// 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 = ({ id, columns, data }) => (
  <table style={tableStyle}>
    <tbody>
      <tr>
        {columns.map(({ path, name }) => (
          <th style={tdStyle} key={path}>{name}</th>
        ))}
      </tr>
      {data.map((rowData) => (
        <tr key={rowData[id]}>
          {columns.map(({ path }) => (
            <td style={tdStyle} key={path}>
              {rowData[path]}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

// Przykład użycia  --------------------

const App = () => {
  const columns = [
    { path: "id",   name: "ID" },
    { path: "name", name: "Imię" },
    { path: "age",  name: "Wiek" },
  ];

  const data = [
    { id: 1, name: 'Kasia',  age: 25, favFruit: '🍏' },
    { id: 2, name: 'Tomek',   age: 23, favFruit: '🍌' },
    { id: 3, name: 'Anna',   age: 26, favFruit: '🍊' },
    { id: 4, name: 'Jacek',  age: 21, favFruit: '🍒' }
  ];

  return (
    <div>
      <Table id="id" columns={columns} data={data} />
    </div>
  );
};

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

Zobacz również

• Array.prototype.map () - MDN Web Docs

• Jak stworzyć niestandardową dynamiczną tabelę z dynamicznym nagłówkiem w React