PL
Jak stworzyć niestandardową dynamiczną tabelę z dynamicznym nagłówkiem w React
0 points
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:
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
columnspozwala 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
pathprzypisany do każdego z elementów tablicy.
Practical example:
xxxxxxxxxx1
// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const tableStyle = {6
border: '1px solid black',7
borderCollapse: 'collapse',8
textAlign: 'center',9
width: '100%'10
}11
12
const tdStyle = {13
border: '1px solid #85C1E9',14
background: 'white',15
padding: '5px'16
};17
18
const thStyle = {19
border: '1px solid #3498DB',20
background: '#3498DB',21
color: 'white',22
padding: '5px'23
};24
25
const Table = ({ id, columns, data }) => (26
<table style={tableStyle}>27
<tbody>28
<tr>29
{columns.map(({ path, name }) => (30
<th style={thStyle} key={path}>{name}</th>31
))}32
</tr>33
{data.map((rowData) => (34
<tr key={rowData[id]}>35
{columns.map(({ path }) => (36
<td style={tdStyle} key={path}>37
{rowData[path]}38
</td>39
))}40
</tr>41
))}42
</tbody>43
</table>44
);45
46
// Przykład użycia --------------------47
48
const App = () => {49
const columns = [50
{ path: "id", name: "ID" },51
{ path: "name", name: "Imię" },52
{ path: "age", name: "Wiek" },53
{ path: "favFruit", name: "Ulubiony owoc" },54
];55
const data = [56
{ id: 1, name: 'Kasia', age: 25, favFruit: '🍏' },57
{ id: 2, name: 'Tomek', age: 23, favFruit: '🍌' },58
{ id: 3, name: 'Anna', age: 26, favFruit: '🍊' },59
{ id: 4, name: 'Jacek', age: 21, favFruit: '🍒' }60
];61
return (62
<div>63
<Table id="id" columns={columns} data={data} />64
</div>65
);66
};67
68
const root = document.querySelector('#root');69
ReactDOM.render(<App />, root );