Panduan Awal untuk Table dalam ReactJS

Hai, para pengembang yang sedang belajar! Hari ini, kita akan masuk ke dunia table dalam ReactJS. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa table adalah seperti pahlawan tak dikenal dunia pengembangan web. Mereka mungkin tidak seflashy seperti animasi atau se��rendy seperti desain pertama kali mobile, tapi waw, mereka sangat berguna! mari kita roll up lengan kita dan mulai.

Mengerti Komponen Table

Apa Itu Komponen Table?

Dalam ReactJS, komponen Table adalah cara untuk menampilkan data dalam baris dan kolom. Pikirkan itu seperti sebuah spreadsheet digital yang Anda bisa sematkan dalam aplikasi web Anda. Itu sempurna untuk menyajikan informasi terstruktur dalam cara yang jelas dan terorganisir.

Struktur Dasar Table React

mari kita mulai dengan contoh sederhana:

import React from 'react';

function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
);
}

export default SimpleTable;

Dalam contoh ini:

• <table> adalah wadah utama untuk table kita.
• <thead> mengandung baris header.
• <tbody> mengandung baris data.
• <tr> mewakili baris tabel.
• <th> digunakan untuk sel header.
• <td> digunakan untuk sel data.

Menggunakan Komponen Table

Sekarang kita sudah mengerti dasarnya, mari kita buat table yang lebih dinamis menggunakan struktur komponen dan props React.

import React from 'react';

function DynamicTable({ data }) {
return (
<table>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default DynamicTable;

Komponen ini lebih fleksibel:

• Itu mengambil prop data, yang adalah array dari objek.
• Itu secara dinamis menghasilkan header berdasarkan kunci objek pertama data.
• Itu membuat baris untuk setiap item dalam array data.

Untuk menggunakan komponen ini:

import React from 'react';
import DynamicTable from './DynamicTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>Data Pengguna</h1>
<DynamicTable data={tableData} />
</div>
);
}

export default App;

Menambah Variasi Mode Gelap dan Stripping Kolom

Untuk membuat table kita lebih menarik dan mudah dibaca, mari kita tambahkan varian mode gelap dan stripping kolom.

import React from 'react';
import './Table.css'; // Kita akan buat file ini untuk styling

function EnhancedTable({ data, darkMode = false }) {
const tableClass = darkMode ? 'table dark' : 'table';

return (
<table className={tableClass}>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index} className={index % 2 === 0 ? 'even' : 'odd'}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default EnhancedTable;

Sekarang, mari kita buat file CSS (Table.css) untuk style table kita:

.table {
border-collapse: collapse;
width: 100%;
}

.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.table th {
background-color: #f2f2f2;
font-weight: bold;
}

.table .even {
background-color: #f9f9f9;
}

.table.dark {
color: white;
background-color: #333;
}

.table.dark th {
background-color: #444;
}

.table.dark .even {
background-color: #2a2a2a;
}

.table.dark .odd {
background-color: #333;
}

CSS ini menyediakan:

• Gaya tabel dasar dengan border dan padding.
• Warna baris berubah-ubah untuk peningkatan keterbacaan.
• Versi mode gelap dari tabel.

Untuk menggunakan table ini:

import React from 'react';
import EnhancedTable from './EnhancedTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>Data Pengguna (Mode Terang)</h1>
<EnhancedTable data={tableData} />

<h1>Data Pengguna (Mode Gelap)</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}

export default App;

Kesimpulan

Dan begitu saja, teman-teman! Kita telah berjalan dari table statis dasar ke komponen table yang dinamis, menarik, dan fleksibel. Ingat, table adalah seperti pisau瑞士 Army knife dunia pengembangan web – mereka mungkin tampak sederhana, tapi mereka sangat beragam dan kuat saat digunakan dengan benar.

Saat Anda terus melanjutkan perjalanan React Anda, terus mencoba berbagai cara untuk menyajikan data. Table hanya permulaan! Siapa tahu? Mungkin kali berikutnya kita akan menangani pengurutan, penyaringan, atau bahkan table yang dapat diedit. Kesempatan tak terbatas!

Terus coding, tetap curiga, dan ingat: di dunia programming, setiap pesan kesalahan adalah kesempatan belajar baru yang disembunyikan. Selamat coding!

Credits: Image by storyset