Languages
[Edit]
PL

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

0 points
Created by:
Lani-Skinner
438

Witam ponownie!┬á👋┬á┬á😊

W sekcji komentarzy pod moim┬ápoprzednim postem┬áby┼éa dyskusja na temat stworzenia bardziej dynamicznego rozwi─ůzania dla tabel dynamicznych w┬áReakcie, wi─Öc zaczynamy!┬á🚀

Dzi┼Ť chc─Ö wam pokaza─ç bardziej dynamiczne rozwi─ůzanie ni┼╝ poprzednie.┬á🔥

Efekt tego kr├│tkiego postu:

React - przykład niestandardowej dynamicznej tabeli
React - przykład niestandardowej dynamicznej tabeli

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.

Practical example:

// 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',
    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 Table = ({ id, columns, data }) => (
  <table style={tableStyle}>
    <tbody>
      <tr>
        {columns.map(({ path, name }) => (
          <th style={thStyle} 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" },
    { path: "favFruit",  name: "Ulubiony owoc" },
  ];
  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 );

Powi─ůzane posty

ReactJS - Artykuły

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