docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Data table

Data table ​

Data lives in CMP or the resource Tables tab; the section only renders a chosen table with a row limit.

Data table

Информация

Requires PageBuilder Pro.

Why a CMP table ​

  • One CMP table, many sections can share a table_key
  • Update price list without editing every page
  • Row limit per section

Typical data ​

  • Service price list
  • Event schedule
  • Pickup points from one data source

Page examples ​

table_key and limit ​

In Table, set table_key from CMP and a row Limit. Edit data outside the section inspector.

Similar sections ​

Block parameters ​

ParameterValue
keydata_table
LayerPro
Categorycontent (content)
Chunkpagebuilder_data_table
Requirespro

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Intro (intro) ​

Type textarea. Optional.

Table (table) ​

Type embeddedTable. Required. Link to a PageBuilder CMP table: table key and row limit.

Site output ​

pb-data-table HTML table.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "intro": "Short intro before the main content.",
  "table": {
    "table_key": "prices",
    "limit": 10
  }
}

Chunk template ​

Fenom chunk pagebuilder_data_table:

fenom
<section class="pb-section pb-section--data-table pb-data-table{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="data_table"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-data-table__inner">
    {if $title}
      <h2 class="pb-heading pb-data-table__title">{$title|pb_text}</h2>
    {/if}
    {if $intro}
      <p class="pb-data-table__intro">{$intro|escape}</p>
    {/if}
    {if $table.table_key}
      {set $resourceId = $resource_id|default:($modx->resource ? $modx->resource->get('id') : 0)}
      {set $tableListing = $modx->runSnippet('PageBuilderTableRows', [
        'resource_id' => $resourceId,
        'table_key' => $table.table_key,
        'limit' => $table.limit|default:20,
        'return' => 'html'
      ])}
      <div class="pb-data-table__embed">
        {$tableListing}
      </div>
    {/if}
  </div>
</section>

See also ​