ReactJS

Sử dụng table trong React

Posted on by Dục Đoàn Trình
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.

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.

Hướng dẫn khác:

  1. State và Props trong react
  2. Routing trong React
  3. Component trong React: những điều cần biết
  4. Sử dụng context trong React
  5. Higher-Order Component trong React
  6. ReactJS là gì? cách cài đặt ReactJS
  7. Bootstrap trong React
  8. Các stateful component và stateless trong react
  9. Hướng dẫn Component API trong React
  10. Refs(tham chiếu) trong React

Giới thiệu Table trong React

Table là một thành phần quan trọng trong phát triển ứng dụng web, và React cung cấp các công cụ và thư viện mạnh mẽ để xây dựng và tương tác với các bảng trong ứng dụng của bạn. Bảng trong React giúp bạn hiển thị dữ liệu theo dạng bảng có cấu trúc và linh hoạt.

Trên cơ sở React, bạn có thể tạo và tùy chỉnh các bảng dễ dàng bằng cách sử dụng các thành phần và các thư viện phổ biến như React-Table, Material-UI và Ant Design. Dưới đây là một số khái niệm quan trọng liên quan đến bảng trong React:

  1. Component Table: Trước tiên, bạn cần tạo một component riêng để định nghĩa bảng trong React. Component này sẽ chịu trách nhiệm xây dựng và hiển thị bảng, cũng như xử lý dữ liệu và các tương tác.
  2. Data Binding: Trong React, bạn có thể liên kết dữ liệu với bảng bằng cách sử dụng state hoặc props. Bằng cách cập nhật dữ liệu, bạn có thể tự động cập nhật nội dung của bảng mà không cần thao tác trực tiếp với DOM.
  3. Render Rows và Columns: Bạn cần xác định cách render các hàng (rows) và cột (columns) trong bảng. Trong React, bạn có thể sử dụng các vòng lặp hoặc các phương thức như map() để lặp qua dữ liệu và tạo các thành phần UI tương ứng.
  4. Sorting và Filtering: Một tính năng quan trọng trong bảng là khả năng sắp xếp (sorting) và lọc (filtering) dữ liệu. Bạn có thể xây dựng các chức năng này bằng cách thêm các công cụ và phương thức xử lý trong React hoặc sử dụng các thư viện đã có sẵn.
  5. Tích hợp Thư viện Bảng: Ngoài việc tự xây dựng, bạn cũng có thể sử dụng các thư viện và giao diện người dùng có sẵn như React-Table, Material-UI và Ant Design để tăng cường khả năng xử lý và trình bày của bảng trong ứng dụng React.

Khi giới thiệu Table trong React, hãy đảm bảo bạn giới thiệu cách tạo, tùy chỉnh và tương tác với bảng trong React, cũng như nhấn mạnh tính linh hoạt và khả năng tương tác của nó trong việc hiển thị dữ liệu cho người dùng.

Tạo một table đơn giản trong React

Để tạo một bảng đơn giản trong React, bạn có thể làm theo các bước sau:

  1. Tạo một component mới để định nghĩa bảng. Ví dụ, bạn có thể tạo một file có tên SimpleTable.js.
  2. Trong component SimpleTable, import các module cần thiết từ thư viện React:
import React from 'react';
  1. Định nghĩa component SimpleTable và trả về JSX để hiển thị bảng:
function SimpleTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>25</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>30</td>
          <td>London</td>
        </tr>
        <tr>
          <td>Bob Johnson</td>
          <td>35</td>
          <td>Sydney</td>
        </tr>
      </tbody>
    </table>
  );
}
  1. Export component SimpleTable để có thể sử dụng nó ở các file khác:
export default SimpleTable;
  1. Bạn có thể sử dụng component SimpleTable trong component cha hoặc trong file chính của ứng dụng React:
import React from 'react';
import SimpleTable from './SimpleTable';

function App() {
  return (
    <div>
      <h1>My Simple Table</h1>
      <SimpleTable />
    </div>
  );
}

export default App;

Trên đây là một ví dụ về việc tạo một bảng đơn giản trong React. Bạn có thể tùy chỉnh nội dung, số lượng cột và hàng, cũng như thêm các thuộc tính và CSS để tùy chỉnh giao diện bảng theo ý muốn.

Xem thêm Tự học html: table

Tùy chỉnh table trong React

Để tùy chỉnh bảng trong React, bạn có thể sử dụng các thuộc tính và CSS để điều chỉnh giao diện và hiệu ứng của bảng. Dưới đây là một số cách tùy chỉnh bảng trong React:

  1. Sử dụng thuộc tính HTML: Bạn có thể sử dụng các thuộc tính HTML như class, id, style để tùy chỉnh giao diện của bảng. Ví dụ:
<table className="custom-table" id="my-table" style={{ backgroundColor: 'lightgray' }}>
  1. Tạo CSS riêng: Bạn có thể tạo một tệp CSS riêng để tùy chỉnh giao diện của bảng. Ví dụ:
// styles.css
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

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

.custom-table td, .custom-table th {
  padding: 8px;
  border: 1px solid #ccc;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
// SimpleTable.js
import React from 'react';
import './styles.css'; // Import CSS file

function SimpleTable() {
  return (
    <table className="custom-table">
      {/* Table content */}
    </table>
  );
}

export default SimpleTable;
  1. Sử dụng thư viện UI: Bạn có thể sử dụng các thư viện UI như Material-UI, Ant Design để tạo các bảng tùy chỉnh với nhiều chức năng và giao diện đẹp hơn. Tham khảo tài liệu của từng thư viện để biết cách sử dụng và tùy chỉnh bảng trong React.
  2. Xử lý sự kiện và tương tác: Bạn có thể thêm các xử lý sự kiện và tương tác vào bảng trong React bằng cách sử dụng các phương thức và state của component. Ví dụ, bạn có thể thêm sắp xếp cột khi người dùng nhấp vào tiêu đề cột, hoặc thêm chức năng lọc dữ liệu.

Lưu ý rằng các cách tùy chỉnh bảng trong React có thể khác nhau tùy thuộc vào thư viện UI bạn sử dụng hoặc các yêu cầu cụ thể của dự án. Hãy tìm hiểu thêm về cách sử dụng các thư viện hoặc xem xét tài liệu và ví dụ của chúng để biết cách tùy chỉnh bảng một cách linh hoạt và phù hợp với nhu cầu của bạn.

Xem thêm Page table trong hệ điều hành

Tích hợp thư viện table trong React

Trong React, có nhiều thư viện table mạnh mẽ và phổ biến mà bạn có thể tích hợp vào dự án của mình để tạo và tùy chỉnh các bảng. Dưới đây là hai ví dụ về cách tích hợp hai thư viện table phổ biến là React-Table và Material-UI vào dự án React của bạn:

  1. Tích hợp React-Table: React-Table là một thư viện mạnh mẽ và linh hoạt cho việc tạo và quản lý các bảng trong React. Để tích hợp React-Table vào dự án của bạn, bạn có thể làm theo các bước sau:
  • Bước 1: Cài đặt thư viện React-Table thông qua npm hoặc yarn:
npm install react-table

hoặc

yarn add react-table
  • Bước 2: Import các thành phần và phương thức cần thiết từ thư viện React-Table vào component của bạn:
import React from 'react';
import { useTable } from 'react-table';
  • Bước 3: Định nghĩa và sử dụng các data và columns cho bảng:
function MyTable() {
  const data = [
    { name: 'John Doe', age: 25, location: 'New York' },
    { name: 'Jane Smith', age: 30, location: 'London' },
    { name: 'Bob Johnson', age: 35, location: 'Sydney' },
  ];

  const columns = [
    { Header: 'Name', accessor: 'name' },
    { Header: 'Age', accessor: 'age' },
    { Header: 'Location', accessor: 'location' },
  ];

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}
  • Bước 4: Sử dụng component MyTable trong component cha hoặc trong file chính của ứng dụng React:
import React from 'react';
import MyTable from './MyTable';

function App() {
  return (
    <div>
      <h1>My Table</h1>
      <MyTable />
    </div>
  );
}

export default App;
  1. Tích hợp Material-UI: Material-UI là một thư viện UI phổ biến trong React và cung cấp các thành phần giao diện người dùng đẹp và tương tác. Để tích hợp bảng từ Material-UI vào dự án của bạn, bạn có thể làm theo các bước sau:
  • Bước 1: Cài đặt thư viện Material-UI thông qua npm hoặc yarn:
npm install @mui/material

hoặc

yarn add @mui/material
  • Bước 2: Import các thành phần và phương thức cần thiết từ thư viện Material-UI vào component của bạn:
import React from 'react';
import { Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
  • Bước 3: Định nghĩa và sử dụng các data và columns cho bảng:
function MyTable() {
  const data = [
    { name: 'John Doe', age: 25, location: 'New York' },
    { name: 'Jane Smith', age: 30, location: 'London' },
    { name: 'Bob Johnson', age: 35, location: 'Sydney' },
  ];

  const columns = [
    { id: 'name', label: 'Name' },
    { id: 'age', label: 'Age' },
    { id: 'location', label: 'Location' },
  ];

  return (
    <Table>
      <TableHead>
        <TableRow>
          {columns.map(column => (
            <TableCell key={column.id}>{column.label}</TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map(row => (
          <TableRow key={row.name}>
            {columns.map(column => (
              <TableCell key={column.id}>{row[column.id]}</TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
  • Bước 4: Sử dụng component MyTable trong component cha hoặc trong file chính của ứng dụng React:
import React from 'react';
import MyTable from './MyTable';

function App() {
  return (
    <div>
      <h1>My Table</h1>
      <MyTable />
    </div>
  );
}

export default App;

Lưu ý rằng cách tích hợp thư viện table trong React có thể khác nhau tùy thuộc vào thư viện và yêu cầu của dự án. Hãy tìm hiểu thêm về cách sử dụng và tùy chỉnh các thư viện để tạo và tương tác với bảng trong React theo nhu cầu của bạn.

Xem thêm Dimensional Modeling là gì?

Ví dụ về React table

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.

Xem thêm GO Packages, import và visibility

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