Dobrý den! 👋😊
V sekci komentářů pod mým předchozím příspěvkem byla docela diskuse o vytvoření dynamičtějšího řešení pro dynamické tabulky v Reactu, takže jsme tady! 🚀
Než začneme , velmi bych vám doporučil, abyste si prohlédli spustitelné příklady pro řešení na našem webu:
Jak vytvořit přizpůsobenou dynamickou tabulku v Reactu (s dynamickou hlavičkou)
Konečný efekt tohoto příspěvku:
V níže uvedeném příkladu jsem použil následující koncept:
- tabulka je popsána sloupci a vlastnostmi dat,
- tabulka se skládá ze záhlaví a některých datových záznamů,
column
pole nám umožňuje rozhodnout, které názvy sloupců chceme zobrazit v datových řádcích,- pomocí
map()
jsme schopni snížit množství kódu – sloupce a datová pole jsou mapována do komponent React.
Pamatujte, že každý záznam by měl mít jedinečný klíč 🗝️ - pomáhá Reactu optimálně řídit změny v DOM. Takový klíč může být například path
přiřazené ke každému prvku tabulky.
Praktický příklad:
import React from 'react';
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>
);
// Example use --------------------
const App = () => {
const columns = [
{ path: "id", name: "ID" },
{ path: "name", name: "Name" },
{ path: "age", name: "Age" },
{ path: "favFruit", name: "Favourite Fruit" },
];
const data = [
{ id: 1, name: 'Kate', age: 25, favFruit: '🍏' },
{ id: 2, name: 'Tom', age: 23, favFruit: '🍌' },
{ id: 3, name: 'Ann', age: 26, favFruit: '🍊' },
{ id: 4, name: 'Jack', age: 21, favFruit: '🍒' }
];
return (
<div>
<Table id="id" columns={columns} data={data} />
</div>
);
};
export default App;
Tento příklad můžete spustit zde
Pokud jste našli toto řešení užitečné, můžete reagovat na tento příspěvek nebo zanechat komentář a dát mi vědět, co si myslíte. 💬
Díky za váš čas! 😊
Napište nám! ✉
Pokud máte nějaký problém k vyřešení nebo otázky, na které nikdo nedokáže odpovědět v souvislosti s tématem React nebo JavaScript, nebo hledáte mentoring, napište nám na dirask.com -> Otázky