Languages
[Edit]
PL

React - Jak stworzy─ç w┼éasn─ů dynamiczn─ů tabel─Ö z dynamicznym nag┼éówkiem

0 points
Created by:
Zayyan-Todd
710

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