Автор оригинала: Tanner Linsley.
DataGrids и таблицы являются скоплей и были в интерфейне веб-разработки с … навсегда. На Nopple.io Я использую их каждый день, и поэтому делаю наших клиентов. Таким образом, казалось бы, что что-то такое стандартное и жизненно важное для пользовательского опыта необходимо будет работать чрезвычайно эффективно, предложить только правильное количество энергии, не жертвуя простотой использования, и, очевидно, соответствует высокой баре в рамках фронтальной связи и его экосистемы. компонентов.
Я ожидал, что при перемещении от угловых, чтобы реагировать, что нахождение приличного столового компонента было бы чинить. Я был так неправ.
Я приехал из угловых углов, где дейтагриды были в изобилии, а функции были полноценными, но даже в этой среде было трудно найти что-то, что просто уйдет с моего пути и позволит мне кодировать столик, как я хотел.
Честно говоря, Единственное, что я действительно хочу С таблицы:
- Хорошая визуальная и архитектурная структура. Чистая и минимальная разметка с соответствующими классами, где мне нужно, и достаточно стиль, чтобы помочь функции сетки, но не так много нужно было переопределить их.
- Сортировка на стороне клиента и пагинация. Тонны модулей из-за того, что там оставляет их способность удовлетворить серверный стол (и это дано для поддержки), но во многих сценариях Это был последний пункт, чтобы проверить мой список, и сетка не было этого Отказ Я просто хотел поставить массив объектов уже в моем распоряжении, и иметь сортировку/страницу просто работать прямо из коробки.
- Обратные вызовы, обратные вызовы, обратные вызовы !!! Слишком много раз я выкопал сетку и начну ее любить, только чтобы найти, что почти ничего не поддерживала функциональную настройку. Не все время точно знают, как нужно в стиле ячейки, или какой значок должен идти рядом со значением. Обратные вызовы являются ключом к настройке, а не сотни глобальных вариантов, которые принимают строки и логики. Да брось!
- Мощная шаблон. Да, почти каждая сетка защитит, что они делают это, но они этого не делают. В любой момент (похоже на обратные вызовы) вы можете переопределить отображение любой ячейки на сетке. Это должно быть самая простая процедура доступна. В отличие от угловых, реагирование делает это удивительно простым … Если вы поддержите это Отказ JSX, компоненты без природы, ванильные JS или даже полностью подключенный класс React Readux-формы должны быть поддерживаться параметры при использовании таблицы. Если нет, то вы уже не потерпели неудачу.
- Группированные заголовки. Серьезно, вы будете удивлены отсутствием чего-то так просто.
- Этот список может продолжаться некоторое время, но я думаю, что вы получите идею. Есть еще много функций, которые я также ищу в DataGrid, но это будет достаточно для этого разговора.
Прежде чем я перейду к решению этого беспорядка, я должен передать его на AG-GRID Отказ Многие мои ожидания, которые я когда-либо имел от DataGrid, вырезанного от использования решения Nialls, и он сделал действительно, сделал отличную работу при заработке многих людей довольны несколькими каркасами JS. Мои рассуждения от переезда от аг-сетки пришли из нехватки страницы на стороне клиента, а также головная боль, которую я получил каждый раз, когда я хотел изменить то, как ячейка оказывается или посмотрела (давайте просто скажем, что это не правда, и не работает T хорошо играть вообще с реактивным контекстом или реагированием реагирования в реакцию).
Теперь решение …
Логотип реагирования
Скриншот простого демо
Я уверен, что приведенные выше картинки не извлеките никаких слышимых «WOW» от вас, но помните, я Это под капотом, что имеет значение.
Вот несколько основных функций React-таблицы:
- Легкий в 3 КБ (и просто 2 КБ больше для стилей)
- Управляемое определение столбца. Никакая композиция не требуется.
- Использует настраиваемые JSX и обратные вызовы везде возможно
- Пагирование на стороне клиента и сортировка из коробки
- Минимальный дизайн и легко тематический
Как будто вы ожидаете, React-Table удовлетворяет список желаний, которые я изложил выше и намного больше. Первая версия, которую я реализовал в сопле, занял всего несколько часов, чтобы развернуть. Легкость этого развития было для меня чем-то неожиданностью, но оказалось рассчитанным отвращением общих подводных камней, с которыми столы обернуты.
- Нет поддержки бесконечной прокрутки. Или любая прокрутка для этого вопроса. Почти каждая таблица я проверила, оказалась беспорядком на мобильных устройствах. После того, как умирал их так долго, я наконец понял, что единственный способ сделать столик на мобильном, должен был удалить ловушки прокрутки. Я был настолько удивлен, в конце концов, что особенность, которая так много столов разрядится как их ключевой камень (бесконечная или виртуализированная прокрутка), была причиной многих проблем в вопросах развития и опыта пользователей. Удаление его из уравнения делает работу с реагированным столом радостью на мобильном и даже на рабочем столе. Pagination также является основой для запросов на данные серверов и открывает столько больших навигационных возможностей, которые вы не получаете с прокруткой.
- Там нет сочинения вовлеченного. Многие из реагированных таблиц там заставляют вас структурировать свой стол, используя свои собственные замены для
Таблица
,TH
,TD
etc …, но оказывается, это делает его намного сложнее, если вы планируете включить сортировку, группирование, перетаскивание столбцов или в значительной степени любую другую функцию, которая может потребоваться изменить основную структуру DOM вашей таблицы. Придерживаясь одного компонента реагирования, контролируемой и самоуправляемой структурой DOM и полагаясь на определения колонны, чтобы сделать тяжелый подъем, он стал очень предсказуемым и стабильным без каких-либо дополнительных усилий. - Стайлинг на 99% необязательно. Единственный оставшийся процент должен быть для функциональности, как показывая/скрывая колонны, и показывая сортизаторы. Слишком много раз я нахожусь бороться с CSS
! Важный
На стилях, которые никогда не должны были быть там в первую очередь. Стили реагирования таблицы минимальны и предназначены для переопределения. Черт возьми, большую часть времени вы можете просто упасть в компонент без какого-либо стиля вообще. Мы думаем, что это здорово.
Есть еще много работы, которая будет сделана на React Table. Это всего несколько месяцев. В ближайшие месяцы я планирую реализовать новые функции, такие как:
- Ряд группировка и агрегация
- Многовигация
- Столбец переупорядочить
- Фиксированные столбцы
- Прыжки страницы
Если вы хотите попробовать реагировать таблицу, отправляйтесь на Страница GitHub raction-table , или начните с помощью с помощью Демо Отказ Это не включено и проверяется с реагированными инструментами, если вы действительно хотите копать
Если у вас есть больше вопросов, хотите внести свой вклад, или просто нужна помощь, затем отправляйтесь на Реагнистон-таблицы Slack Channel Отказ Я буду там лично, чтобы ответить на любые вопросы!
До следующего раза.