Skip to content
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
  1. Компоненты
  2. PageBuilder
  3. Типы полей
  4. Pro
  5. table

Поле table ​

Версия: Pro (advanced-fields).

Зачем этот тип ​

Редактор правит строки таблицей в инспекторе. Колонки: текст, число, картинка, цвет, дата, метка, сумма и ссылка. Строки лежат в данных секции.

Когда использовать ​

  • Таблица характеристик продукта
  • Сравнительная таблица с картинками в ячейках
  • Немного строк характеристик в секции

Советы ​

Пустой columns даёт свободную сетку 1×1: редактор добавляет столбцы сам. Заполненный список фиксирует name, label и type. Большие выборки из БД: embeddedTable.

Похожие типы ​

  • keyvalue для простых пар ключ/значение
  • embeddedTable для table_key и runtime rows

Настройка ​

json
{
  "name": "specs",
  "type": "table",
  "label": "Характеристики",
  "columns": [
    {
      "name": "key",
      "label": "Ключ",
      "type": "text"
    },
    {
      "name": "value",
      "label": "Значение",
      "type": "text"
    }
  ],
  "tab": "Контент",
  "width": 100,
  "active": true
}

Лимиты схемы:

КлючРоль
rowsТочное число строк; важнее maxRows
maxRowsПредел строк
columnCountТочное число столбцов; важнее maxColumns, только свободная сетка
maxColumnsПредел столбцов
columnWidthШирина колонки, px
headerDefaultПодпись столбца по умолчанию

Инспектор ​

На тулбаре — Добавить столбец, Удалить столбец, группа и импорт CSV. Под тулбаром строка статуса поясняет режим, под сеткой — превью: шапка, группы, colspan/rowspan, картинки и цвета как на сайте.

  • В свободной сетке столбцы добавляются в пределах columnCount и maxColumns. Если в типе задан columns[], кнопки добавления и удаления неактивны.
  • Ширина колонки зависит от type, пока не задан columnWidth.
  • Очистить появляется, когда в ячейках есть данные; удаление непустой строки или столбца, очистка и замена из CSV спрашивают подтверждение.
  • Объединение вправо и вниз открывается при наведении и фокусе.
  • Сетка не сжимается ниже 1×1.

Значение ​

Колонки заданы: массив объектов по columns[].name. Пустая таблица без лишних строк хранится как [].

Колонки не заданы: объект с columns и rows. Ключи новых столбцов: col_1, col_2. Подпись — из headerDefault или «Столбец N», в свободной сетке её правят в шапке. columnCount доливает пустые столбцы и держит это число.

  • Строка-группа: "_pbGroup": true, текст в первой колонке.
  • Объединение ячеек — "_span" по имени колонки (label / value); текст ячейки остаётся строкой.
  • На сайте TableCells::present() добавляет _pb_cells (hidden, colspan, rowspan). У spec_table то же в spec_rows.

Данные секции ​

json
{
  "specs": [
    {
      "key": "Вес",
      "value": "1.2 кг"
    },
    {
      "key": "Цвет",
      "value": "#111827"
    },
    {
      "key": "Фото",
      "value": {
        "url": "assets/images/hero.jpg",
        "id": 12,
        "path": "assets/images/",
        "filename": "hero.jpg",
        "extension": "jpg",
        "name": "hero",
        "title": "hero.jpg",
        "width": 1920,
        "height": 1080,
        "size": 245760,
        "type": "image"
      }
    }
  ]
}
  • Ячейки с type: image хранят media-объект, как у поля image.

Свободная сетка:

json
{
  "sheet": {
    "columns": [{ "name": "col_1", "label": "Столбец 1", "type": "text" }],
    "rows": [{ "col_1": "Север" }]
  }
}

Пример в chunk ​

Цикл — Fenom. В MODX — сниппет или элемент по индексу.

modx
<div class="spec">
  <span class="spec__key">[[+specs.0.key]]</span>
  <span class="spec__value">[[+specs.0.value]]</span>
</div>
fenom
{foreach $specs as $row}
  <div class="spec">
    <span class="spec__key">{$row.key|pb_text}</span>
    <span class="spec__value">{$row.value|pb_text}</span>
  </div>
{/foreach}
fenom
{foreach $specs|pb_table:3 as $row}
  {$row.value|pb_text}
{/foreach}
{$specs|pb_table:'cell':'last':'last'}

pb_table режет строки: первый аргумент — сколько, второй — сдвиг. Режимы row, column и cell принимают индекс, имя столбца, first и last.

Примечание ​

Колонки в панели управления задают ключом columnsText (name|Подпись|type). Подсказка CMP: text, number, image, color, date, tag, currency, url. В инспекторе ячейки также открывают yesno, toggle, checkbox, colorpalette, time, datetime.

Общие свойства ​

Для полей с name, которые сохраняются в данных секции:

КлючТипРольПанель
tabstringПодзаголовок группы в инспектореда
width25, 33, 50, 66, 75, 100Ширина поля в % строки (flex); в CMP только эти значенияда
descriptionstringПодсказка под подписьюда
defaultanyНачальное значение новой секциида
activeboolfalse: скрыть поле в инспектореда
requiredboolОбязательно при publish (черновик сохраняется)да
  • Дополнительно: columns[] (name, label, type) или пустой список для свободной сетки.

Подробнее: обзор полей.

Дальше ​