Cách tích hợp Material

Ngày 6 tháng 1 năm 2022/#dữ liệu

Bởi Deji Adesoga

Data Grid của Material UI là một bảng dữ liệu mạnh mẽ và linh hoạt. Nó giúp bạn dễ dàng hiển thị dữ liệu và thực hiện các chức năng sẵn có như chỉnh sửa, sắp xếp, lọc, phân trang và nhiều chức năng khác.

Trong bài viết này, chúng tôi sẽ thảo luận về lý do tại sao bạn nên sử dụng Data Grid trong Material UI trong dự án của mình. Sau đó, chúng tôi cũng sẽ hướng dẫn cách cài đặt và thiết lập Data Grid, sử dụng và tích hợp RESTful API, cũng như bật phân trang cũng như sắp xếp và lọc.

Mục lục

• Giới thiệu về Lưới dữ liệu
• Tại sao nên sử dụng Lưới dữ liệu Material UI
• Cài đặt và thiết lập React và Material UI Data Grid
• Tích hợp và sử dụng API
• Hiển thị kết quả API trong lưới dữ liệu Material UI
• Phần kết luận

Xem phiên bản video của bài viết này bên dưới hoặc trên kênh YouTube của tôi :

Giới thiệu về Data Grid

Theo tài liệu Material UI, Data Grid là một

" Bảng dữ liệu React và lưới dữ liệu React nhanh và có thể mở rộng. Đây là thành phần giàu tính năng có trong phiên bản MIT hoặc Thương mại ".

Về cơ bản, Data Grid trong Material UI đi kèm một số tính năng như chỉnh sửa, sắp xếp, lọc, cập nhật, phân trang, xuất dữ liệu, v.v. theo mặc định.

Nhóm cũng có kế hoạch trong tương lai triển khai các tính năng bổ sung như xuất Excel, chọn Phạm vi, Nhóm, Trục, Tổng hợp.

Đối với mục đích của hướng dẫn này, chúng tôi sẽ triển khai một số tính năng của Data Grid với REST API công khai có tên là JSONPlaceholder

Tại sao nên sử dụng Lưới dữ liệu Material UI

Có một số lý do quan trọng khiến bạn muốn sử dụng Lưới dữ liệu Material UI:

• Khả năng tiếp cận
• Tương tác của người dùng
• Trình bày dữ liệu

Khả năng tiếp cận

Data Grid cung cấp các tính năng trợ năng như tô sáng ô. Nghĩa là, mọi ô đều có thể truy cập bằng bàn phím.

Nó cũng cung cấp các tính năng bổ sung như điều hướng bàn phím bằng cách sử dụng các phím nhất định trên bàn phím để thay đổi tiêu điểm của các ô trong bảng, cùng với các thuộc tính mật độ để xác định chiều cao của hàng và cột trên bảng.

Tương tác của người dùng

Về mặt tương tác, Data Grid cung cấp một tính năng tích hợp như chọn hàng theo mặc định. Tính năng này cho phép người dùng chọn một số hàng nhất định khi nhấp chuột hoặc sử dụng một số phím tắt nhất định.

Lưới dữ liệu trong Material UI hỗ trợ chọn một hoặc nhiều hàng, khả năng vô hiệu hóa việc chọn một số hàng nhất định hoặc tất cả các hàng, chọn hộp kiểm và nhiều tính năng khác.

Trình bày dữ liệu

Lưới dữ liệu cung cấp tính năng tích hợp cho phép xuất dữ liệu sang định dạng CSV.

Ngoài ra, dữ liệu có thể được thao tác bằng cách nhấp vào tiêu đề cột. Thao tác này sẽ kích hoạt chức năng sắp xếp và lọc.

Một tính năng cơ bản khác có sẵn theo mặc định là cuộn, tính năng này mặc định không xuất hiện trong bảng thông thường.

Cách cài đặt và thiết lập React và Material UI Data Grid

Để tạo một dự án mới trong React, bạn cần cài đặt Node.js. Điều này sẽ cho phép chúng ta truy cập vào npm trong terminal của mình. Sau đó, chúng ta có thể cài đặt và sử dụng Create React App bằng npm để tạo dự án của mình, bằng cách chạy lệnh bên dưới:

npm i create-react-app

Bước tiếp theo là tạo một dự án React mới từ terminal bằng cách chạy lệnh bên dưới:

npx create-react-app data-grid 
cd data-grid 
npm start

Ở trên chúng ta đã tạo một dự án mới có tên là data-grid. Sau đó chúng ta điều hướng đến thư mục dự án mới tạo và bắt đầu dự án bằng npm.

Theo mặc định, dự án của chúng tôi sẽ chạy trên localhost:3000 trong trình duyệt.

Cuối cùng, chúng ta cần cài đặt hai gói là Material UI và Data Grid bằng lệnh bên dưới:

npm install @mui/x-data-grid @mui/material

Tích hợp và sử dụng API

Để tích hợp API của chúng ta, chúng ta cần tạo một tệp và thư mục mới trong thư mục src được tạo cho chúng ta khi chúng ta tạo dự án với Create-React-App. Chúng ta sẽ gọi thư mục mới này là Table và tệp sẽ được gọi là DataGrid.js .

Cuối cùng, cấu trúc thư mục của chúng ta sẽ trông giống như thế này:

> src 
    > Table 
        > DataGrid.js 
.gitignore 
package-lock.json 
package.json 
README

Trong tệp DataGrid.js, chúng ta sẽ sử dụng một thành phần chức năng. Trong thành phần chức năng này, chúng ta sẽ triển khai một số tính năng mặc định sau trong React:

• móc useState
• móc useEffect
• API Lấy

Móc useState

Hook useState trong React là một hàm tích hợp giúp chúng ta theo dõi trạng thái trong một thành phần chức năng.

Móc useEffect

Hook useEffect cho phép chúng ta xử lý các tác dụng phụ trong thành phần chức năng của mình. Một số tác dụng phụ này có thể bao gồm những thứ như cập nhật DOM, lấy dữ liệu từ API RESTful, sự kiện hẹn giờ, v.v.

API Lấy

Fetch API trong JavaScript cho phép trình duyệt web thực hiện các yêu cầu HTTP đến máy chủ web. Yêu cầu có thể là bất kỳ API nào gửi và nhận dữ liệu ở định dạng JSON hoặc XML.

Bây giờ chúng ta đã khám phá khái niệm về hook và Fetch API, hãy tạo một thành phần chức năng mẫu trong tệp DataGrid.js của chúng ta:

import React from 'react'

const DataGrid= () => {
  return (
    <div>

    </div>
  )
}

export default DataGrid

Bước tiếp theo là sử dụng REST API từ chỗ giữ chỗ JSON .

Để thực hiện điều đó, điều đầu tiên chúng ta cần làm là nhập các hook useState và useEffect:

import React, { useState, useEffect } from 'react'

Sau đó, chúng ta tạo một biến bằng cách sử dụng hook useState:

const [tableData, setTableData] = useState([])

tableData ở trên đóng vai trò là phương thức lấy dữ liệu, trong khi setTableData đóng vai trò là phương thức đặt dữ liệu.

Cuối cùng, để truy cập dữ liệu, chúng ta sẽ sử dụng hook useEffect và Fetch API:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
}, [])
 console.log(tableData)

Ở trên, chúng ta có thể thấy rằng bên trong hook useEffect, chúng ta đã thực hiện ba điều:

• Đầu tiên, bên trong hook useEffect, chúng tôi đã sử dụng Fetch để sử dụng REST API giữ chỗ JSON
• Sau đó chúng tôi chuyển đổi phản hồi nhận được sang định dạng JSON
• Cuối cùng, chúng tôi đã truyền dữ liệu từ phản hồi của mình đến trình thiết lập mà chúng tôi đã tạo trước đó có tên là setTableData

Để chắc chắn rằng chúng tôi nhận được phản hồi đúng, chúng tôi đã ghi dữ liệu chúng tôi nhận được vào bảng điều khiển. Để xem kết quả trong bảng điều khiển, chúng tôi cần nhập DataGrid.js của mình vào tệp App.js :

import './App.css';
import DataGrid from './Table/DataGrid';

function App() {
  return (
    <div className="App">
      <DataGrid />
    </div>
  );
}

export default App;

Sau đó, chúng ta có được kết quả bên dưới, bao gồm danh sách 100 đối tượng trong một mảng:

Dữ liệu JSON trong Bảng điều khiển

Cách hiển thị kết quả API trong lưới dữ liệu UI Material

Để hiển thị kết quả API của chúng tôi trong Lưới dữ liệu Material UI, chúng tôi cần nhập gói Lưới dữ liệu vào tệp DataGrid.js:

import { DataGrid } from '@mui/x-data-grid'

Sau đó, chúng tôi thiết lập cấu hình cho phần tiêu đề của bảng Data Grid:

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

Như bạn có thể thấy ở trên, nó nằm trong một mảng các đối tượng và chứa id , title và body, phù hợp với kết quả chúng ta nhận được từ REST API.

Cuối cùng, chúng ta đưa thành phần DataGrid vào câu lệnh return:

<div style={{ height: 700, width: '100%' }}>
     <DataGrid
       rows={tableData}
       columns={columns}
       pageSize={12}
     />
   </div>

Ở trên, chúng ta có ba thuộc tính bên trong thành phần DataGrid:

• Đầu tiên là thuộc tính rows . Những gì chúng ta đã làm với thuộc tính row là truyền vào kết quả chúng ta nhận được từ REST API, được chứa trong getter có tên là tableData
• Thuộc tính thứ hai được gọi là columns . Đây là mảng các đối tượng chứa tiêu đề của DataGrid bao gồm id, title và body.
• Thuộc tính cuối cùng là pageSize. Thuộc tính này giúp chúng ta đặt giới hạn cho lượng dữ liệu có thể hiển thị cùng một lúc. Như bạn thấy, chúng ta đặt thành 12 – phần còn lại của kết quả sau đó được phân trang theo mặc định.

Cuối cùng, tệp DataGrid.js của chúng ta sẽ trông giống như thế này:

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

const DataGrid = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  console.log(tableData)

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      />
    </div>
  )
}

export default DataGrid

Kết quả trong trình duyệt cũng sẽ giống như hình ảnh bên dưới:

Kết quả bảng lưới dữ liệu

Một điều tuyệt vời cần lưu ý trong kết quả hình ảnh ở trên là chúng ta có chức năng sắp xếp và lọc ngay khi nhấp vào phần tiêu đề ( id, title, body ) của bảng dữ liệu.

Phần kết luận

Trong bài viết này, chúng ta đã tìm hiểu về DataGrid trong Material UI, React Hooks, cách sử dụng REST API và nhiều nội dung khác.

Ngoài ra, liên kết tới mã của bài viết này có thể được tìm thấy trên GitHub .

Nếu bạn thích bài viết này, hãy ủng hộ tôi bằng cách đăng ký kênh YouTube của tôi , nơi tôi tạo ra các hướng dẫn tuyệt vời về các công nghệ phát triển web như JavaScript, React, Angular, Node.js, v.v.