Languages
[Edit]
PL

Jak stworzy─ç w┼éasn─ů tabel─Ö dynamiczn─ů w React

3 points
Created by:
Dirask Community
5850

Cze┼Ť─ç wszystkim!┬á👋┬á😊

W zesz┼éym tygodniu mia┼éem problem z utworzeniem dynamicznej tabeli w React i┬ápomy┼Ťla┼éem, ┼╝e mo┼╝e komu┼Ť przyda si─Ö takie┬ározwi─ůzanie.

Efekt ko┼äcowy tego rozwi─ůzania:

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

Poniższy przykład składa się z kilku kroków:

  1. Stworzy┼éem┬ádynamiczn─ů┬átabel─Ö┬ána podstawie tablicy,
  2. Każda tabela składa się z nagłówka i rekordów danych,
  3. Nag┼é├│wek jest sta┼éy i zachowuje zawsze t─Ö sam─ů liczb─Ö kolumn,
  4. Podczas tworzenia rekordów użyłem funkcji map() do konwersji elementów tablicy na elementy Reacta.

Pami─Ötaj, ┼╝e ka┼╝dy element powinien mie─ç unikalny klucz 🗝´ŞĆ, poniewa┼╝ pomaga to Reactowi optymalnie zarz─ůdza─ç zmianami w drzewie DOM. Takim kluczem mo┼╝e by─ç na przyk┼éad identyfikator id przypisany do ka┼╝dego elementu 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',
    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 App = () => {
  	const students = [
        { id: 1, name: 'Tomek', age: 25, favFruit: '🍏' },
        { id: 2, name: 'Adam', age: 43, favFruit: '🍌' },
        { id: 3, name: 'Marek', age: 16, favFruit: '🍊' },
        { id: 4, name: 'Jacek', age: 29, favFruit: '🍒' }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={thStyle}>Id</th>
              <th style={thStyle}>Imie</th>
              <th style={thStyle}>Wiek</th>
              <th style={thStyle}>Ulubiony owoc</th>
            </tr>
            {students.map(({ id, name, age, favFruit }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
                <td style={tdStyle}>{favFruit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

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

Uwaga:

Je┼Ťli chcesz dowiedzie─ç si─Ö wi─Öcej o tabelach dynamicznych, przeczytaj ten artyku┼é. 😊

Zobacz te┼╝

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