/table-component-sample

Пример использования TableComposition компонента из Web-клиента.

Primary LanguageTypeScript

Пример использования TableComposition

В данном репозитории приведен пример расширения Web-клиента, демонстрирующий работу с компонентами Composition и TableComposition из docsvision.web. В частности, приведены примеры:

  • Отображения простого тега button при помощи компонента Composition и плагинов, демонстрирующий работу плагинов (папка SimpleComposition)
  • Отображения статических и динамически загружаемых данных данных при помощи TableComposition (SampleTable)
  • Расширения TableComposition при помощи плагинов (DemoCellContentPlugins, DemoRowDecoratorPlugins, OrderingPlugins, DemoCellWrapperPlugins)
  • Интеграции TableComposition в страницу карточки при помощи выделения скрол-контейнера вне самой таблицы (TableScrollBlock)
  • Добавление плагинов в таблицу карточек папки в Web-клиенте (SampleGridPluginFactory)

Сборка и установка

Для сборки необходимо иметь NodeJS v14.17.5+. Порядок сборки и установки:

  1. Открыть консоль в папке TableWebExtension
  2. Выполнить npm run build
  3. Скопировать папку Dist/Site/Content/Modules/TableWebExtension в папку Site/Content/Modules в установке Web-клиента
  4. Скопировать TableControlDescription.xml в папку Plugins в установке в Web-клиента

Настройка разметок

Простая композиция
  • Добавить на разметку контрол Simple composition
Таблица вариант 1 - статичная таблица
  • Добавить на разметку контрол Sample table с опцией UseOwnScroll - true, UseStaticData - true
Таблица вариант 2 - с динамически загружаемыми данными с известным размером модели
  • Добавить на разметку контрол Sample table с опцией UseOwnScroll - true, UseStaticData - false, KnownModelSize = true
Таблица вариант 3 - с динамически загружаемыми данными с неизвестным размером модели
  • Добавить на разметку контрол Sample table с опцией UseOwnScroll - true, UseStaticData - false, KnownModelSize = false
Таблица вариант 4 - с внешним скоролом
  • Добавить на разметку контрол Table scroll block, добавить в него произвольное содержимое
  • Добавить внутрь Table scroll block контрол Sample table с опцией UseOwnScroll - false.
  • Убедиться, что между Table scroll block и Sample table нет промежуточных родителей с position: relative/absolute/fixed/sticky, и overflow: auto/scroll
  • Убедиться, что родительский элемент Table scroll block ограничен по высоте
Плагин в таблице карточек папки

Открыть папку Входящие (5bf0fb94-23fa-4212-80c3-c598e9859901) в Web-клиенте, выставить настройку переноса строк "Переносятся"