4 шага по созданию таблицы с параметрами поиска и фильтрации.
Как разработчики, мы всегда ищем методы для структурированного представления данных приложения. Чаще для этого используются таблицы. Однако в большинстве случаев нам нужны такие функции, как поиск, фильтрация, сортировка с помощью таблиц.
Вот где мы можем использовать библиотеки, такие как React Table, что экономит время при разработке.
Выбор библиотеки таблиц React
React Table - это набор хуков для создания надежных таблиц и Datagrid.
Будучи одной из самых известных библиотек таблиц для React, она предлагает множество функций, которые заставят вас влюбиться в нее.
- React Table - это автономная утилита, что означает, что она не отображает и не предоставляет никаких элементов пользовательского интерфейса, разметки или стилей и позволяет вам иметь 100% контроль над разметкой и стилями.
- Это набор крючков, и эти крючки компактны, легки и легко растягиваются.
- Он обеспечивает бескомпромиссный пользовательский интерфейс и пользовательский интерфейс.
- Внутри таблицы есть легко понятная типографика и настраиваемые элементы.
- Это облегчает поиск параметров в таблице или определенных столбцах, обеспечивая фильтрацию или сортировку данных.
- React Table является очень прочным и декларативным в том смысле, что помогает разбивать на страницы и позволяет отображать скрытые столбцы, встроенное редактирование данных, изменение размера столбца для соответствия длинным точкам данных и поддержку горизонтальной и вертикальной прокрутки.
- Модальную панель / панель сведений можно использовать для редактирования всей строки данных.
- Его поддержка нескольких устройств с фиксированными заголовками и столбцами для быстрого просмотра данных позволяет повысить скорость отклика.
Как видите, React Table покрывает для нас большую часть функциональных возможностей таблиц, поэтому я предпочитаю ее другим библиотекам.
Создание таблицы с помощью React-Table
Я создал базовую таблицу с помощью React Table и поделился ею с Bit.dev. Изучите его или импортируйте (клонируйте) в рабочее пространство Bit и попробуйте.
Теперь давайте посмотрим, как создать простой пользовательский интерфейс таблицы с основными функциями фильтрации и сортировки.
Шаг 1 - Настройка проекта
Во-первых, вам нужно создать приложение React и интегрировать соответствующие API-интерфейсы для получения данных для ваших таблиц.
В этом примере я буду использовать Сведения о пользователе из Фальшивого API без заполнителей JSON. Кроме того, я буду использовать Axios для вызовов API.
Когда вы думаете о структуре таблицы, вы обычно думаете о строках и столбцах. С вложенными столбцами, вложенными строками и другими элементами конфигурации таблиц могут стать еще более сложными.
Здесь я создал простую структуру таблицы с именем tabledata и включил два заголовка и группы столбцов. Также есть accessor для каждого столбца, который является данными в data object.
Примечание.
React.useMemoиспользуется для создания структуры таблицы, чтобы гарантировать, что данные не воссоздаются при каждом рендеринге.
Шаг 2. Создание компонента таблицы.
Затем нам нужно добавить в приложение React Table. Для этого создадим отдельный компонент. Вы можете установить его с помощью NPM или Yarn.
npm install react-table or yarn add react-table
Как я уже упоминал ранее, React Table состоит из множества хуков. В этом примере я буду использовать userTable hook. Здесь компонент таблицы принимает два свойства с именами data и columns для создания заголовка и ячеек таблицы.
Исходный table.js файл будет выглядеть следующим образом, и вам нужно импортировать этот файл в App.js
Приведенный выше код сгенерирует базовое табличное представление, подобное этому:
На высоком уровне эта таблица удовлетворительна. Но что, если вам нужны уникальные стили? На этом этапе вы можете создавать собственные стили для каждой ячейки с помощью React Table.
Шаг 3 - Добавьте функцию поиска / фильтрации
Теперь я покажу вам шаги по добавлению функции поиска в вашу таблицу React Table.
Во-первых, нам нужно иметь поисковый ввод в нашем table.js.. А затем мы можем использовать useFilters хук, предоставленный React Table, для фильтрации результатов.
Я реализовал опцию фильтрации только для атрибута name. Когда пользователь изменяет значение ввода в строке поиска, отображаются только совпадающие строки.
Шаг 4 - Добавьте функцию сортировки
Чтобы добавить опцию сортировки в нашу таблицу, нам нужно включить хук плагина useSortBy, предоставляемый React Table. Он будет динамически сортировать по возрастанию и убыванию. Это так просто.
Вы можете решить, включать ли этот параметр для всех столбцов или только для определенных столбцов; все зависит от вас. Этим можно управлять, применив параметр disableSortBy к столбцу, чтобы отключить сортировку.
Чтобы включить сортировку для всех столбцов, отредактируйте table.js, добавив следующее.
После всех этих настроек ваши App.js и table.js в конечном итоге будут выглядеть так, как показано ниже.
Когда и где использовать React-Table?
Хотя React Table богат функциями, важно понимать, где он хорошо подходит, а где нет.
Где хорошо вписывается
- Пользовательский интерфейс вашей таблицы требует основных функций, таких как сортировка, фильтрация и разбиение на страницы. React Table будет хорошим выбором.
- Ваш стол действует исключительно как витрина, но должен быть очень легким и эффективным; вы можете перейти на React Table.
Где это не будет
- Если вам нужна расширенная поддержка горизонтальной и вертикальной прокрутки, React Table может не подойти вам.
- Если вам нужно облегчить встроенное редактирование с помощью React Table, вы должны полагаться на плагины, чтобы добавить такую функциональность.
- При работе с бесконечно длинными таблицами лучше выбрать альтернативу, чем придерживаться React Table.
Последние мысли
React Table - самая известная библиотека таблиц для React. Это был бы лучший выбор для пользовательских интерфейсов таблиц с ограниченными данными, настраиваемыми стилями и базовыми функциями, такими как сортировка и фильтрация.
Однако в зависимости от требований проекта могут существовать различные альтернативы.
Итак, я приглашаю вас использовать React Table Library и делиться своими мыслями в разделе комментариев.
Спасибо за чтение..!!!
Создавайте отличные дизайнерские системы и микро-интерфейсы
Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.
