Зачем писать свой Grid в 2019?

Предыстория

В далеком 2016 году, когда мы только приступили к разработке веб-клиента для DirectumRX, нам потребовался грид. Назначение грида — показывать справочники, списки документов, результаты поисков и прочие объекты системы в табличном представлении. Причем, списки могут быть как маленькие (10 сотрудников нашей организации), так и очень большие (50 000 контрагентов).

Списки в DirectumRX

Конечно же, захотелось найти готовую библиотеку для отображения грида, которая умеет делать все, что нам надо: сортировать и группировать записи, перетаскивать и растягивать колонки, работать с множественным выделением, фильтровать и подсчитывать итоги по колонкам, порционно загружать данные с сервера и отображать десятки тысяч записей.

Поясню последнее требование «отображать десятки тысяч записей». В гридах это требование реализуется несколькими способами: paging, infinity scrolling, virtual scrolling.

Подходы paging и infinity scrolling распространены на веб сайтах, вы ими пользуетесь каждый день. Например, paging в Гугле:

Или infinity scrolling в том же Гугле по картинкам, где следующая порция картинок загружается, когда пролистаешь до конца первую порцию:

А вот virtual scrolling (далее буду называть виртуальный скроллинг) используется в вебе редко, его основное отличие от infinity scrolling — это возможность проскролить в любое место очень больших списков. При этом будут загружены и отображены только видимые пользователю данные.

Скроллинг в большом списке

Для веб-клиента DirectumRX очень хотелось использовать виртуальный скроллинг. Соглашусь, что скроллинг в любое место в списке из 10.000 записей — кейс скорее выдуманный. Однако, произвольный скроллинг в пределах 500–1000 записей — кейс живой.

Когда реализуют виртуальный скроллинг, часто реализуют и АПИ управления этим скроллингом. Это очень важная фича. Программный скроллинг используется, например, для скроллинга к выделенной записи при открытии справочника:

Вернемся к требованиям. Что еще нам было нужно:

  • АПИ управления виртуальным скроллингом
  • Кастомизация внешнего вида грида (строк, колонок, контекстного меню), чтобы грид не выглядел инородно в нашем приложении.
  • Поддержка используемых нами технологий: React, Redux и FlexBox.
  • Чтобы грид работал в IE11 (для веб-клиента DirectumRX есть такое требование).

В общем, требований было много. 
Продолжение на Medium

 

Связаться с нами