Почему я написал React-Table, и проблемы, которые он решил для сопла

Автор оригинала: 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 Отказ Я буду там лично, чтобы ответить на любые вопросы!

До следующего раза.