Почта России — корпоративный портал для государственных почтовых отправлений

Задача

Внутренний портал Почты России — которым пользуются десятки тысяч сотрудников — годами разрастался органически. Каждый модуль работал с табличными данными по-своему: своя логика пагинации, свои паттерны фильтрации, свои режимы редактирования. Итогом стал непоследовательный UX и растущая стоимость поддержки при каждом новом экране с данными.

Вдобавок работа велась в строгих корпоративных ограничениях: многоуровневое согласование изменений, версионирование SharePoint API и политики безопасности, исключавшие большинство сторонних SaaS-инструментов.

Исследование

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

Рассмотренные варианты

1. Использовать Kendo Grid напрямую везде — отклонено. Каждая команда интегрировала его по-своему, что закрепляло несогласованность.
2. Построить собственную таблицу с нуля — отклонено. Слишком рискованно с учётом корпоративных сроков и широты требуемых возможностей.
3. Стандартизированная обёртка над Kendo Grid — выбрано. Инкапсулировать всё общее поведение за единым типизированным API, оставить Kendo как движок и обеспечить согласованность через слой абстракции.

Решение

Подход с обёрткой дал лучшее соотношение контроля и риска. Kendo отвечал за рендеринг и виртуализацию; обёртка владела контрактом API: метаданные полей, режимы серверной/клиентской пагинации, приведение типов, кастомные рендереры ячеек и колонки статусов. Поверх был добавлен отдельный слой-адаптер для Redux (CustomGridRedux) для экранов, которым нужно было хранить состояние таблицы (выбор, пагинацию, сортировку) в сторе — при этом он оставался обратно совместимым с таблицами, которым это было не нужно.

Реализация

CustomGrid принимает поля с метаданными, массив данных и метод загрузки. Он поддерживает два режима пагинации — серверный (общее число приходит из API, таблица оркестрирует загрузку) и клиентский (dataQuery Kendo обрабатывает всё локально) — плюс комбинированный режим для добавления локальных изменений к серверным данным. Приведение типов из серверных структур к типам JS происходит автоматически через маппинги полей, избавляя от повторяющегося кода преобразований на каждом экране.

useCustomGridFilters — это мемоизированный хук, который оборачивает набор именованных определений фильтров и рендерит тулбар Kendo с живым счётчиком элементов по каждой вкладке. Переключение вкладок меняет набор данных, подаваемый в таблицу, без перезагрузки страницы и дополнительных запросов.

CustomGridRedux — это тонкий адаптер, который оборачивает CustomGrid и зеркалит выбор, пагинацию, сортировку, фильтр, режим редактирования и состояние полей в Redux — через выделенные экшены, редьюсеры и reselect-селекторы — оставаясь при этом полностью обратно совместимым с существующими использованиями.

Обзор компонента

Результат

Теперь каждый экран с данными в портале использует один и тот же компонент с одним и тем же API. Добавление нового табличного представления превратилось из многодневной задачи интеграции в передачу конфигурации полей и функции загрузки. Роль Scrum-мастера параллельно с технической работой держала скорость поставки стабильной при постоянных блокерах со стороны корпорации — церемонии оставались лёгкими, а препятствия устранялись до того, как тормозили спринты.