Как создать DataTable с обработкой на стороне сервера, включая разбиение на страницы, сортировку и поиск, с помощью пользовательского интерфейса материалов в клиентском приложении React, поддерживаемом REST API.

В моей предыдущей статье Поддержка таблиц данных с помощью секционированного репозитория с Cosmos DB я рассказал, как поддерживать таблицы данных на стороне сервера с разбиением на страницы, сортировкой и поиском в REST API. В этой статье давайте рассмотрим, как создать DataTable во внешнем интерфейсе с помощью React. Так же, как при заказе суши, берите только то, что вам нужно!

Резюме — почему обработка на стороне сервера?

Хотя самый простой способ настроить DataTables — загрузить все данные в клиент, производительность становится серьезной проблемой при работе с большим объемом данных. Представьте, что у вас есть удивительный бизнес, и у вас есть 10 миллионов клиентов, вы, вероятно, не хотите загружать 10 миллионов записей в клиентское приложение при каждом запросе. Это когда вы захотите использовать обработку на стороне сервера, чтобы передавать только небольшое подмножество данных, которые вы на самом деле видите.

Шаг 1 — Установите необходимые пакеты.

Мы будем использовать тот, у которого больше всего звезд на GitHub и лучшая документация: material-table. Чтобы установить пакет таблицы материалов, выполните следующие команды:

  • пряжа добавить материал-таблица
  • пряжа добавить @material-ui/core

Шаг 2 — Создайте компонент DataTable.

Помимо необходимого импорта, несколько заметок на вынос:

  • Значки пользовательского интерфейса материалов отображаются с использованием константы tableIcons.
  • loadRemoteData() — это функция обратного вызова, которая должна возвращать обещание.

Шаг 3 — Используйте компонент DataTable на странице списка элементов Todo.

Это действительно просто, так как все, что он делает, это визуализирует компонент ToDoDataTable, который мы создали на предыдущем шаге. Вы можете добавить стили на эту страницу, которые мы пропустим для простоты.

Наконец, давайте посмотрим на серверную обработку в действии!

Обратите внимание, что когда я ищу по 9, а также сортирую по «Названию», полезные данные для конечной точки «/api/ToDoItem/Search» выглядят следующим образом:

И ответ поиска выглядит следующим образом. Примечание. Я удалил некоторые записи в массиве данных для экономии места. Но «totalRecords» и «номер страницы» используются для разбиения на страницы, а массив «data» используется для отображения строк в таблице.

Вот как выглядит наша DataTable в веб-приложении React.

Вывод

Поздравляем, теперь у вас есть таблица DataTable, способная обрабатывать большие объемы данных с помощью обработки на стороне сервера, включая разбиение на страницы, сортировку и поиск. Существуют и другие встроенные функции, такие как генерация PDF и экспорт данных в CSV, что делает пакет Material-Table очень ценным дополнением к проекту React!

Большое спасибо за чтение! Здоровья!

Пример кода в этой статье взят из стартового проекта GitHub. Исходный код веб-приложения React можно найти в папке клиентского приложения. Не стесняйтесь использовать весь стартовый проект или его часть, чтобы начать свое следующее захватывающее приключение!

Дополнительные ресурсы, относящиеся к проекту: