Эй, люди,
Надеюсь, у тебя все хорошо. На моем пути обучения реагированию я недавно изучил очень хороший пакет для отображения HTML-таблиц для реагирования.
Поскольку я работал в области цепочки поставок, системе необходимо надежное и масштабируемое решение для отображения таблиц, чтобы реагировать.
Было много параметров / функций, которые мы искали как решение. Некоторые из них перечислены ниже.
1. Обеспечьте динамическую привязку данных с разбивкой на страницы.
2. Сортировка и поиск записей в реальном времени и с мгновенными результатами.
3. Счетчик страниц - следующий и предыдущий элементы управления.
4. Возможность настраивать и тематически с подобранными цветами и дизайном.
Хочу сказать большое спасибо библиотеке не что иное, как React Table (https://www.npmjs.com/package/react-table).
Это легкая, быстрая и расширяемая сетка данных, созданная для React.
Он служит всем целям и предоставляет огромное количество функций, которые меня поразили.
Я подготовил небольшую демонстрацию вместе с кодовой базой, чтобы получить лучшее от плагина.
Демо-ссылка - https://react-table-extension.netlify.com/
Репозиторий кода Github - https://github.com/tarun-nagpal-github/react-table-extension
Я использовал этот плагин, а также расширил его, чтобы предоставить дополнительную функцию для отображения / скрытия столбцов, необходимых на лету.
Позвольте мне рассказать вам, как его использовать и воспользоваться этой привилегией в вашем следующем проекте React.
Шаг 1. Установите
// TODO
Шаг 2 - Импортируйте зависимости в свой компонент
// TODO
Шаг 3 - Добавьте столбцы для таблицы
// ЗАДАЧИ
Шаг 4 - Добавьте данные для таблицы
// TODO
Шаг 5 - Посмотрите результат в простом примере
// TODO
Шаг 6 (необязательно) - Расширьте, чтобы добавить фильтр динамических столбцов
// TODO
Это всего лишь мои выводы и то, что я исследовал
