examples/base.yaml - master - anbu/editable-table-docs

examples/base.yaml
243 строки11 KB
Aleksandr
обновлена таблица
08 авг 2025, 12:21
08 авг 2025, 12:213924e4d
docs:
  editable-table.base:
    location: 1. Базовое описание

    origin:
    # Может быть использовано любое JSONata выражение для получение данных из архитектурного озера
    # Для ознакомления с ожидаемой структурой данных выражение возращает готовые данные
      body: >
        ({
          "row_1": {
            "ID": 1,
            "name": "Иванов Иван Иванович",
            "age": 10,
            "ice_cream": "vanilla",
            "smile": true,
            "color": ["blue", "white"],
            "link": {
              "href": "/",
              "text": "Home"
            }
          },
          "row_2": {
            "ID": 2,
            "name": "Семенов Семен Семенович",
            "age": 20,
            "smile": false,
            "color": ["red"],
            "link": [
              {
                "href": "https://www.google.ru/",
                "text": "Google"
              },
              {
                "href": "https://ya.ru/",
                "text": "Яндекс"
              }
            ]
          },
          "row_3": {
            "ID": 3,
            "name": "Петров Петр Петрович",
            "age": 80,
            "ice_cream": "chocolate",
            "smile": true
          },
          "row_4": {
            "ID": 4,
            "name": "Александров Александр Александрович",
            "age": 30,
            "color": ["green"],
            "link": "https://www.google.ru/"
          }
        })
      color_options: >
        ([
          {"value": "red", "text": "Красный"},
          {"value": "green", "text": "Зеленый"},
          {"value": "blue", "text": "Синий"},
          {"value": "white", "text": "Белый"}
        ])
        

    type: editable-table
    # type - Тип документа
    page_size: 5
    # page_size - Количество строк на странице
    # Дефолтное значение:  20
    # Допустимые значения: положительные целый числа
    selection: false
    # selection - Отражение чекбоксов для выбора строк
    # Дефолтное значение:  false
    # Допустимые значения: false / true
    filtration: false
    # filtration - Флаг позволяющий глобально отключить отображение фильтров в каждой колонке
    # Дефолтное значение:  true
    # Допустимые значения: true / false
    direction: ltr
    # direction - Направление таблицы
    # Дефолтное значение:  ltr
    # Допустимые значения: ltr (left to right) / ttb (top to bottom)

    excel_export: true
    # excel_export - Возможность выгрузки таблицы в excel
    # Дефолтное значение:  true
    # Допустимые значения: true / false

    headers:
    # headers - Массив заголовков
    # Обязательное

      - value: ID
        # value - Идентификатор поля для вывода в колонке
        # Обязательное
        width: 100px
        # width - Ширина колонки (px)
        # Обязательное значение при указании "pinned: true"
        filterable: false
        # filterable - Флаг, позволяет отключить фильтрацию в колонке
        # Дефолтное значение:  true
        # Допустимые значения: true / false
        sortable: false
        # sortable - Флаг позволяет запретить сортировку по колонке
        # Дефолтное значение:  true
        # Допустимые значения: true / false
        type: text
        # type - Тип вывода ячеек для указанной колонки
        # Дефолтное значение:  text
        # Допустимые значения: text / select / multiple-select / checkbox / link / fn

      - value: name
        text: Имя
        # text - Отображаемый заголовок
        # Дефолтное значение: подставляется из значения value
        pinned: true
        # pinned - Позволяет закрепить колонку при горизонтальном скроле
        # Дефолтное значение:  false
        # Допустимые значения: true / false
        # При "pinned: true" необходимо явно установить значение для "width"
        width: 250px
        style:
        # style - Позволяет установить css-inline стили для колонки
        # Допустимые значения: допустимые css-inline в camelCase нотации
          fontWeight: 800 # Пример (насыщенность шрифта)
          fontStyle: italic # Пример (стиль шрифта)

        styles:
          # styles - Позволяет указать как дефолтные так и css-inline стили применяемые по условию (conditions).
          # Важно: Перечисляется в порядке увеличения приоритета (при установки одинаковых стилей, первое будет перетерто послудующим)
          gray-background-for-ivan-and-petr:
            # Наименование группы css-правил (любой текст в качестве имени)
            backgroundColor: gray # Пример css-inline (цвет фона)
            conditions:
              # conditions - условия для применения стиля (массив)
              # При отсутсвии условия группа css-правил применяется по дефолту
              - condition_type: equal
                # condition_type - Тип условия
                # Допустимые значения:
                # equal - сравнение
                # includes - проверка наличия подстроки
                # match - регулярное выражения
                # '>'   - Больше (Обязательно в ковычках)
                # '>='  - Больше или равно (Обязательно в ковычках)
                # '<'   - Меньше (Обязательно в ковычках)
                # '<='  - Меньше или равно (Обязательно в ковычках)
                value: Петров Петр Петрович
                # value - Значение условия (текст, число, regExp)
              - condition_type: includes
                value: Иванович

      - value: age
        text: Возраст
        width: 100px
        styles:
          adult:
            backgroundColor: blue
            color: white
          old:
            backgroundColor: green
            conditions:
              - condition_type: ">"
                value: 70
          child:
            backgroundColor: orange
            conditions:
              - condition_type: "<"
                value: 18

      - value: ice_cream
        text: Любимое мороженное
        width: 200px
        type: select

        option_id: ice_cream
        # option_id - идентификатор-ссылка на колонку в таблице
        # позволяет настроить опциональные значения в выпадающем списке
        # Обязательное когда options задан объектом

        options:
          # options - опции для типа "select" и "multiple-select"
          # Обязательное для "select" и "multiple-select"
          # Допустимые значения:
          # 1. массив объектов, с обязательным полем `value` (идентфикатор) и опциональным `text` (значение отражаемое в таблице)
          # 2. объект, где ключ - идентификатор для выпадающего списка, значение - массив объектов, с обязательным полем `value` (идентфикатор) и опциональным `text` (значение отражаемое в таблице)
          # так же значением может быть JSONata выражение (или origin), выполненеи которого вернет аналогичную структуру
          - value: vanilla
            text: ванильное
          - value: chocolate
            text: шоколадное

        styles:
          chocolate:
            backgroundColor: chocolate
            conditions:
              - condition_type: equal
                value: chocolate
          vanilla:
            backgroundColor: pink
            conditions:
              - condition_type: equal
                value: vanilla

      - value: color
        text: Цвет
        width: 200px
        type: multiple-select
        options: >
          (color_options)

      - value: smile
        text: Улыбнулся
        width: 150px
        type: checkbox

      - value: link
        width: 150px
        text: Ссылки
        type: link
        # Допустимые значения для ссылок:
        # 1. Текст:
        #   https://www.google.ru/
        # 2. Объект:
        #   {
        #     "href": "/architect/components/system.auth",
        #     "text": "Авторизация"
        #   }
        # 3. Массив объектов:
        #   [
        #       {
        #           "href": "https://www.google.ru/",
        #           "text": "google"
        #       },
        #       {
        #           "href": "/docs/example",
        #           "text": "Пример документа"
        #       }
        #   ]

    # Результатом выполнения выражения в source ожидается объект с обязательным полем body и опциональным headers
    # См. origin/body
    source: >
      (
        {"body": body}
      )