Salah satu cara paling mudah untuk memisahkan data dari dokumen HTML Anda adalah dengan menyimpannya di JSON. JSON populer dan mudah digunakan, terutama dalam JavaScript.
Di React, masuk akal untuk menyajikan data JSON melalui tabel menggunakan komponen. Komponen itu akan dapat menghasilkan tabel yang diskalakan dengan data JSON. Tabel yang dihasilkan dapat memiliki baris sebanyak yang dibutuhkan karena data tidak dikodekan secara keras.
Apa yang Anda Butuhkan
Anda perlu menginstal Node.js di mesin Anda untuk mengikuti tutorial ini dan pemahaman dasar tentang cara kerja React.
Sebelum membuat tabel, Anda harus buat proyek Bereaksi baru jika Anda tidak memilikinya.
Membuat Data JSON
Tabel akan menggunakan data yang disimpan dalam file JSON. Anda mungkin ambil data ini dari titik akhir API dalam aplikasi kehidupan nyata.
Di folder src, buat file baru bernama data.json dan tambahkan yang berikut ini:
[{
"Indo": 1,
"nama depan": "Ethelred",
"nama keluarga": "Perlahan-lahan",
"surel": "[email protected]
"
},{
"Indo": 2,
"nama depan": "Reta",
"nama keluarga": "wolmer",
"surel": "[email protected]"
},{
"Indo": 3,
"nama depan": "arabel",
"nama keluarga": "mengganggu",
"surel": "[email protected]"
}]
Ini adalah file JSON sederhana yang berisi tiga objek.
Kunci objek—id, nama depan, nama belakang, dan email—adalah judul, sedangkan properti terkaitnya membentuk badan tabel.
Membuat Komponen Tabel
Buat file baru bernama Tabel.js di folder src dan tambahkan kode berikut.
eksporbawaanfungsiMeja({theadData, tbodyData}) {
kembali (
<meja>
<kepala>
<tr>
// baris judul
</tr>
</thead>
<tubuh>
//data tubuh
</tbody>
</table>
);
}
Komponen ini menggunakan theadData dan tBodyData sebagai props. theadData berisi data yang akan Anda tampilkan di baris header. Aplikasi akan mengambil data ini dari file JSON dan menyerahkannya ke komponen Tabel.
Buat fungsi di aplikasi.js disebut getHeadings() dan tambahkan yang berikut ini.
konstan getHeadings = () => {
kembaliObyek.keys (data[0]);
}Karena kunci untuk setiap objek dalam file JSON serupa, Anda cukup menggunakan kunci dari objek pertama.
Ingatlah untuk mengimpor data.json di App.js.
impor data dari "./data.json"
Saat Anda merender komponen Tabel, teruskan heading dan data JSON sebagai props.
<Tabel theadData={getHeadings()} tbodyData={data}/>Membuat Baris Header
Pada langkah ini, Anda akan membuat komponen untuk merender item di baris header. Komponen ini akan mengulangi judul menggunakan metode map().
Di Table.js, tambahkan kode untuk mengulangi judul di dalam tag thead.
<tr>
{theadData.map (judul => {
kembali <th kunci={judul}>{menuju}</th>
})}
</tr>Selanjutnya, Anda akan mengisi badan tabel.
Membuat Baris Tubuh
Badan tabel merender data baris. Karena Table.js menerima data sebagai array objek, Anda perlu mengulanginya terlebih dahulu untuk mendapatkan setiap objek yang mewakili baris.
Jadi, di Table.js, ulangi prop tBodyData seperti ini:
<tubuh>
{tbodyData.map((baris, indeks) => {
kembali <kunci tr={indeks}>
//data baris
</tr>;
})}
</tbody>
Setiap objek baris akan mirip dengan contoh objek di bawah ini.
konstan baris = {
"Indo": 1,
"nama depan": "Ethelred",
"nama keluarga": "Perlahan-lahan",
"surel": "[email protected]"
}
Untuk menampilkan masing-masing item ini, Anda perlu mengulangi kunci objek. Di setiap iterasi, Anda akan mengambil properti yang cocok dengan kunci itu di objek baris. Karena kunci ini sama dengan judul, gunakan nilai dari prop theadData.
Ubah tag tr untuk menampilkan data baris seperti gambar di bawah ini.
<kunci tr={indeks}>
// theadData berisi kunci
{theadData.map((kunci, indeks) => {
kembali <kunci td={baris[kunci]}>{baris[kunci]}</td>
})}
</tr>;
Menyatukan semuanya, komponen Tabel akan terlihat seperti ini:
eksporbawaanfungsiMeja({theadData, tbodyData}) {
kembali (
<meja>
<kepala>
<tr>
{theadData.map (judul => {
kembali <th kunci={judul}>{menuju}</th>
})}
</tr>
</thead>
<tubuh>
{tbodyData.map((baris, indeks) => {
kembali <kunci tr={indeks}>
{theadData.map((kunci, indeks) => {
kembali <kunci td={baris[kunci]}>{baris[kunci]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
Dalam
elemen, komponen mengulangi array data dan mengembalikan baris tabel untuk setiap objek.Menggunakan Komponen Tabel
Impor Tabel di App.js dan render seperti yang ditunjukkan di bawah ini:
impor Meja dari './Meja';
impor data dari "./data.json"
fungsiAplikasi() {
konstan getHeadings = () => {
kembaliObyek.keys (data[0]);
}
kembali (
<div namakelas="wadah">
<Tabel theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
eksporbawaan Aplikasi;
Komponen tabel mengambil theadData dan tbodyData sebagai props. theadData berisi judul yang dihasilkan dari kunci item pertama dalam data JSON, dan tbodyData berisi seluruh file JSON.
Styling Dengan Modul CSS
Anda membuat komponen tabel React dari file JSON dalam tutorial ini. Anda juga mempelajari cara memanipulasi data JSON agar sesuai dengan kebutuhan Anda. Anda dapat meningkatkan tampilan tabel Anda dengan menambahkan beberapa CSS ke dalamnya. Untuk membuat gaya CSS cakupan lokal, pertimbangkan untuk menggunakan modul CSS. Mudah digunakan dan mudah untuk memulai jika Anda menggunakan aplikasi create-react-app.