Languages
[Edit]
PL

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

0 points
Created by:
Zayyan-Todd
830

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ż

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - dynamiczna tabela z dynamicznym nagłówkiem
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