Датагриды и таблицы являются основным продуктом и находятся в интерфейсной веб-разработке с ... вечности. В Nozzle.io я использую их каждый день, как и наши клиенты. Таким образом, может показаться, что что-то настолько стандартное и жизненно важное для пользовательского опыта должно работать чрезвычайно эффективно, предлагать необходимое количество мощности, не жертвуя простотой использования, и, очевидно, соответствовать высокой планке интерфейсной структуры и ее экосистемы. компонентов.

При переходе от Angular к React я ожидал, что найти достойный компонент таблицы будет несложно. Я был так неправ.

Я пришел из Angular, где датагридов было много, а функции были полноценными, но даже в этой среде было сложно найти что-то, что просто убралось бы с моего пути и позволило бы мне кодировать таблицу так, как я хотел.

Честно говоря, единственное, что я действительно хочу от стола:

  • Хорошая визуальная и архитектурная структура. Чистая и минимальная разметка с соответствующими классами там, где они мне нужны, и достаточным стилем, чтобы помочь функции сетки, но не настолько, чтобы мне нужно было их переопределить.
  • Сортировка на стороне клиента и разбивка на страницы. Тонны модулей выставляют напоказ свою способность соответствовать таблице, привязанной к серверу (и это необходимо для поддержки), но во многих сценариях это был последний элемент, который нужно вычеркнуть из моего списка, а сетка не была нет. Я просто хотел предоставить массив объектов, уже имеющихся в моем распоряжении, и чтобы сортировка / разбивка на страницы работали прямо из коробки.
  • Обратные вызовы, обратные вызовы, обратные вызовы !!! Слишком много раз я копался в сетке и начинал любить ее, но обнаруживал, что почти ничто не поддерживает функциональную настройку. Не всегда точно известно, как нужно стилизовать ячейку или какой значок должен располагаться рядом со значением. Обратные вызовы - это ключ к настройке, а не сотня глобальных опций, которые принимают строки и логические значения. Да ладно!
  • Мощные шаблоны. Да, почти каждая сетка будет защищать это, но они этого не делают. В любой момент (аналогично обратным вызовам) вы можете захотеть переопределить отображение любой ячейки в сетке. Это должна быть самая простая доступная процедура. В отличие от angular, React делает это удивительно простым… если вы его поддерживаете. При использовании таблицы должны поддерживаться параметры JSX, компонентов без состояния, ванильного JS или даже полностью подключенного класса реакции с функцией redux-form. Если нет, значит, вы уже подвели нас, разработчиков.
  • Сгруппированные заголовки. Серьезно, вы были бы удивлены отсутствием чего-то настолько простого.
  • Этот список можно продолжать некоторое время, но я думаю, вы уловили идею. Я также ищу много других функций в сетке данных, но этого будет достаточно для этого разговора.

Прежде чем перейти к решению этой проблемы, я должен передать его в ag-Grid. Многое из моих ожиданий я когда-либо ожидал от datagrid, созданного с помощью решения Nialls, и он проделал огромную работу, чтобы осчастливить многих людей с помощью нескольких JS-фреймворков. Мои аргументы в пользу отказа от ag-Grid исходили из отсутствия нумерации страниц на стороне клиента, а также из-за головной боли, которую я испытывал каждый раз, когда хотел изменить способ отображения или отображения ячейки (давайте просто скажем, что это не настоящая реакция, и это не так '' t вообще хорошо работают с response-context или react-instance-кодами response-dom).

Теперь решение…

Я уверен, что приведенные выше картинки не извлекут из вас слышимого «Вау», но помните, что мне важно то, что скрывается под капотом.

Вот несколько основных функций React-Table:

  • Легкий - 3 КБ (и всего на 2 КБ больше для стилей)
  • На основе определения столбца. Композиция не требуется.
  • Использует настраиваемый JSX и обратные вызовы везде, где это возможно
  • Пагинация на стороне клиента и сортировка из коробки
  • Минималистичный дизайн и легко настраиваемая тема

Как и следовало ожидать, React-Table удовлетворяет список желаний, который я изложил выше, и многое другое. Первая версия, которую я реализовал в Nozzle, развернулась всего за несколько часов. Легкость его разработки была для меня чем-то неожиданным, но оказалась расчетливым неприятием распространенных ошибок, с которыми сталкиваются таблицы.

  • Нет поддержки бесконечной прокрутки. Или любой прокрутки в этом отношении. Практически каждая таблица, которую я тестировал, показывала беспорядок на мобильных устройствах. Я так долго возился с ними, и наконец понял, что единственный способ сделать стол отличным на мобильном телефоне - это убрать ловушки прокрутки. В конце концов, я был так удивлен, что особенность, которую так много таблиц рекламируют в качестве своего основного принципа (бесконечная или виртуализированная прокрутка), стала причиной стольких проблем при разработке и взаимодействии с пользователем. Удаление его из уравнения делает работу с React-Table радостью на мобильных устройствах и даже на настольных компьютерах. Разбиение на страницы также является основой для запросов данных на стороне сервера и открывает гораздо больше возможностей навигации, которых вы не получите при прокрутке.
  • Здесь нет никакой композиции. Многие таблицы React заставляют вас структурировать свою таблицу, используя собственные замены для table, th, td и т. д., но оказывается, что это значительно усложняет задачу, если вы планируете включить сортировку, группировку, перетаскивание столбца или почти любую другую функцию, которая может потребоваться для изменения базовой структуры DOM вашей таблицы. Придерживаясь одного компонента React, контролируемой и самоуверенной структуры DOM и полагаясь на определения столбцов для выполнения тяжелой работы, он стал очень предсказуемым и стабильным без каких-либо дополнительных усилий.
  • Стилизация на 99% необязательна. Единственный оставшийся процент должен использоваться для таких функций, как отображение / скрытие столбцов и отображение индикаторов сортировки. Слишком много раз я обнаруживал, что сражаюсь с CSS !important по стилям, которых вообще не должно было быть. Стили React Table минимальны и предназначены для переопределения. Черт возьми, в большинстве случаев вы можете просто вставить компонент без какого-либо стиля. Мы думаем, что это здорово.

Над React Table еще предстоит проделать большую работу. Ему всего несколько месяцев. В ближайшие месяцы я планирую реализовать новые функции, такие как:

  • Группировка и агрегирование строк
  • Мульти-поворот
  • Изменение порядка столбцов
  • Фиксированные столбцы
  • Переход по страницам

Если вы хотите попробовать React Table, перейдите на страницу React-Table на Github или начните с демонстрации. Он не минимизирован и доступен для проверки с помощью инструментов реагирования, если вам действительно захочется вникнуть :)

Если у вас есть еще вопросы, вы хотите внести свой вклад или вам просто нужна помощь, перейдите на Канал Slack React-Table. Я лично отвечу на любые вопросы!

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