Hướng dẫn cơ bản về Table trong ReactJS
Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới của các bảng trong ReactJS. Với vai trò là người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng các bảng thực sự là những người hùng vô danh của phát triển web. Chúng có thể không nổi bật như các hiệu ứng动画 hoặc không时尚 như các thiết kế mobile-first, nhưng chúng thực sự rất hữu ích! Hãy cùng gấp tay áo lên và bắt đầu nào.
Hiểu về thành phần Table
Thành phần Table là gì?
Trong ReactJS, một thành phần Table là cách để hiển thị dữ liệu dưới dạng các hàng và cột. Hãy tưởng tượng nó như một bảng tính kỹ thuật số mà bạn có thể nhúng vào ứng dụng web của mình. Nó hoàn hảo cho việc trình bày thông tin có cấu trúc một cách rõ ràng và tổ chức.
Cấu trúc cơ bản của một Table trong React
Hãy bắt đầu với một ví dụ đơn giản:
import React from 'react';
function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>Tên</th>
<th Tuổi</th>
<th>Thành phố</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;Trong ví dụ này:
-
<table>là容器 chính của bảng. -
<thead>chứa hàng tiêu đề. -
<tbody>chứa các hàng dữ liệu. -
<tr>đại diện cho một hàng bảng. -
<th>được sử dụng cho các ô tiêu đề. -
<td>được sử dụng cho các ô dữ liệu.
Áp dụng thành phần Table
Bây giờ chúng ta đã hiểu được cơ bản, hãy tạo một bảng động hơn bằng cách sử dụng cấu trúc thành phần và props của 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;Thành phần này linh hoạt hơn:
- Nó nhận một prop
data, là một mảng các đối tượng. - Nó tự động tạo tiêu đề dựa trên các khóa của đối tượng dữ liệu đầu tiên.
- Nó tạo các hàng cho mỗi mục trong mảng dữ liệu.
Để sử dụng thành phần này:
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>Dữ liệu người dùng</h1>
<DynamicTable data={tableData} />
</div>
);
}
export default App;Thêm phiên bản tối và đường kẻ cột
Để làm cho bảng của chúng ta hấp dẫn hơn và dễ đọc hơn, hãy thêm một phiên bản tối và đường kẻ cột.
import React from 'react';
import './Table.css'; // Chúng ta sẽ tạo file này để 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;Bây giờ, hãy tạo một file CSS (Table.css) để style bảng của chúng ta:
.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 này cung cấp:
- Một phong cách bảng cơ bản với viền và padding.
- Màu nền alternativing cho các hàng để dễ đọc hơn.
- Một phiên bản tối của bảng.
Để sử dụng bảng này:
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>Dữ liệu người dùng (Chế độ sáng)</h1>
<EnhancedTable data={tableData} />
<h1>Dữ liệu người dùng (Chế độ tối)</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}
export default App;Kết luận
Và thế là chúng ta đã cùng nhau hành trình từ một bảng tĩnh cơ bản đến một bảng động, đẹp mắt và linh hoạt. Nhớ rằng, bảng như những con dao đa năng của phát triển web - chúng có thể trông đơn giản, nhưng chúng rất hữu ích khi sử dụng đúng cách.
Trong hành trình tiếp theo của bạn với React, hãy tiếp tục thử nghiệm các cách khác nhau để trình bày dữ liệu. Bảng chỉ là điểm khởi đầu! Ai biết được, có lẽ lần sau chúng ta sẽ xử lý việc sắp xếp, lọc hoặc thậm chí là bảng có thể chỉnh sửa. Các khả năng là vô tận!
Tiếp tục mã hóa, 保持好奇心, và nhớ rằng: trong thế giới lập trình, mỗi thông báo lỗi đều là một cơ hội học tập mới. Chúc bạn mã hóa vui vẻ!
Credits: Image by storyset