В этом руководстве мы покажем, как создать таблицу данных разбивки на страницы с помощью React, используя react-data-table-component и внешний API от MeCallAPI.com.

Вы можете попробовать вызвать API, просто запросив его по URL-адресу: https://www.mecallapi.com/api/attractions?page=1&per_page=10.

Установка программы

Давай начнем!

Создайте первоначальный проект React:

npx create-react-app react-datatable
cd react-datatable

Установите React-Data-Table-Component:

npm install react-data-table-component

Запустите приложение React:

npm start

Откройте https://localhost:3000 в веб-браузере, чтобы увидеть результат:

Изменить App.js

Позвольте мне немного объяснить Кодекс:

  • columns (строки 4–36) — это массив, определенный как столбец для таблицы данных.
  • Определите State (строка 42) items и функцию setItems для установки значения items. Мы вызовем API и сохраним данные ответа в элементах.
  • Определите States (строки 43 и 44) totalRows для хранения количества строк/данных из API и perPageдля хранения количества строк, отображаемых на страница.
  • Определите функцию useEffect (строки 46–48) как Effect Hook, которая будет вызываться при загрузке компонента. Мы также включили perPage в качестве зависимости для React Hook useEffect, который будет вызываться при изменении значения perPage. В нашем случае будет вызвана функция fetchData.
  • Определите функцию fetchData(строки 50–64)для вызова API, например: https://www.mecallapi.com/api/attractions?page=1&per_page =10, чтобы получить список достопримечательностей, хранящихся в состоянии элементов в React.
  • Определите функцию handlePageChange (строки 66–68), которая будет выполняться при изменении страницы в таблице данных.
  • Определите функцию handlePerRowsChange (строки 70–72), которая будет выполняться при изменении количества строк на странице в таблице данных.
  • Компонент DataTable отображается в строке 80–89 с параметрами для включения удаленной нумерации страниц (paginationServer).

Результат:

Заключение

Вот и все. Надеюсь, это поможет вам понять основы React и то, как использовать таблицу данных с API. Увидимся в следующей статье!

Статья Карна Йонгсиривита, доктора философии. Колледж цифровых инновационных технологий Университета Рангсит

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.