Rate this post

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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now