Table là một sự sắp xếp tổ chức thông tin thành các hàng và cột. Nó được sử dụng để lưu trữ và hiển thị dữ liệu ở định dạng có cấu trúc.
Các bài viết liên quan:
Table React là một công cụ nhẹ, nhanh, hoàn toàn có thể tùy chỉnh (JSX, các mẫu, trạng thái, kiểu, lệnh gọi lại) và Datagrid có thể mở rộng được xây dựng cho React. Nó hoàn toàn có thể điều khiển được thông qua các đạo cụ và lệnh gọi lại tùy chọn.
Đặc trưng
- Nó nhẹ ở mức 11kb (và chỉ cần thêm 2kb cho các kiểu).
- Nó hoàn toàn có thể tùy chỉnh (JSX, mẫu, trạng thái, kiểu, lệnh gọi lại).
- Nó hoàn toàn có thể điều khiển được thông qua các đạo cụ và lệnh gọi lại tùy chọn.
- Nó có phân trang phía máy khách & phía máy chủ.
- Nó có bộ lọc.
- Xoay vòng & Tổng hợp
- Thiết kế tối giản và có thể tạo chủ đề dễ dàng
Cài đặt
Hãy để chúng tôi tạo một ứng dụng React Table lệnh sau.
npx create-react-app myreactapp
Tiếp theo, chúng ta cần cài đặt react-table. Chúng ta có thể cài đặt Table React thông qua lệnh npm, được đưa ra bên dưới.
$ npm install react-table
Sau khi đã cài đặt Table React, chúng tôi cần nhập Table React vào thành phần React. Để thực hiện việc này, hãy mở tệp src / App.js và thêm đoạn mã sau.
import ReactTable from "react-table";
Giả sử chúng ta có dữ liệu cần được hiển thị Table cách sử dụng Table React.
const data = [{
name: 'Ayaan',
age: 26
},{
name: 'Ahana',
age: 22
},{
name: 'Peter',
age: 40
},{
name: 'Virat',
age: 30
},{
name: 'Rohit',
age: 32
},{
name: 'Dhoni',
age: 37
}]
Cùng với dữ liệu, chúng ta cũng cần chỉ định thông tin cột với các thuộc tính cột.
const columns = [{
Header: 'Name',
accessor: 'name'
},{
Header: 'Age',
accessor: 'age'
}]
Bên trong phương thức kết xuất, chúng ta cần liên kết dữ liệu này với Table React và sau đó trả về Table React.
return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize = {2}
pageSizeOptions = {[2,4, 6]}
/>
</div>
)
Bây giờ, tệp src / App.js của chúng ta trông giống như bên dưới.
import React, { Component } from 'react';
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends Component {
render() {
const data = [{
name: 'Ayaan',
age: 26
},{
name: 'Ahana',
age: 22
},{
name: 'Peter',
age: 40
},{
name: 'Virat',
age: 30
},{
name: 'Rohit',
age: 32
},{
name: 'Dhoni',
age: 37
}]
const columns = [{
Header: 'Name',
accessor: 'name'
},{
Header: 'Age',
accessor: 'age'
}]
return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize = {2}
pageSizeOptions = {[2,4, 6]}
/>
</div>
)
}
}
export default App; Output
Khi chúng ta thực thi ứng dụng React, chúng ta sẽ nhận được kết quả như bên dưới.
Bây giờ, thay đổi menu thả xuống các hàng, chúng ta sẽ nhận được kết quả như bên dưới.
