Data Table

Data data_table

A table that lists rows from a collection.

Markup

Drops in as data-pb-block="data_table".

html

<table data-pb-block="data_table" class="pb-data-table" x-data="pbTable('leads')" style="width:100%;border-collapse:collapse;font-family:inherit;font-size:0.9375rem;color:#0f172a;border:1px solid #e2e8f0;border-radius:0.75rem;overflow:hidden;">
  <thead class="pb-data-table__head" style="background:#f8fafc;text-align:left;">
    <tr>
      <th class="pb-data-table__th" style="padding:0.75rem 1rem;border-bottom:1px solid #e2e8f0;font-weight:600;color:#334155;">Name</th>
      <th class="pb-data-table__th" style="padding:0.75rem 1rem;border-bottom:1px solid #e2e8f0;font-weight:600;color:#334155;">Email</th>
    </tr>
  </thead>
  <tbody class="pb-data-table__body">
    <tr class="pb-data-table__loading" x-show="loading" x-cloak><td colspan="2" style="padding:0.75rem 1rem;color:#64748b;">Loading…</td></tr>
    <tr class="pb-data-table__error" x-show="error" x-cloak><td colspan="2" style="padding:0.75rem 1rem;color:#dc2626;">Couldn’t load records.</td></tr>
    <tr class="pb-data-table__empty" x-show="!loading && !error && rows.length === 0" x-cloak><td colspan="2" style="padding:0.75rem 1rem;color:#64748b;">No records</td></tr>
    <template x-for="row in rows" :key="row.id">
      <tr class="pb-data-table__row" style="border-top:1px solid #e2e8f0;">
        <td class="pb-data-table__td" x-text="row.name" style="padding:0.75rem 1rem;"></td>
        <td class="pb-data-table__td" x-text="row.email" style="padding:0.75rem 1rem;"></td>
      </tr>
    </template>
    <tr class="pb-data-table__sample" x-show="false" style="border-top:1px solid #e2e8f0;">
      <td class="pb-data-table__td" style="padding:0.75rem 1rem;">Acme Corp</td>
      <td class="pb-data-table__td" style="padding:0.75rem 1rem;">hello@acme.com</td>
    </tr>
    <tr class="pb-data-table__sample" x-show="false" style="border-top:1px solid #e2e8f0;">
      <td class="pb-data-table__td" style="padding:0.75rem 1rem;">Globex</td>
      <td class="pb-data-table__td" style="padding:0.75rem 1rem;">contact@globex.com</td>
    </tr>
  </tbody>
  <tfoot class="pb-data-table__foot" x-show="lastPage > 1" x-cloak>
    <tr>
      <td colspan="2" style="padding:0.6rem 1rem;border-top:1px solid #e2e8f0;">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#64748b;font-size:0.85rem;">
          <span>Page <span x-text="page"></span> of <span x-text="lastPage"></span> · <span x-text="total"></span> records</span>
          <span style="display:flex;gap:0.5rem;">
            <button type="button" @click="prev()" :disabled="page<=1" style="padding:0.35rem 0.7rem;border:1px solid #e2e8f0;border-radius:0.375rem;background:#fff;cursor:pointer;">Prev</button>
            <button type="button" @click="next()" :disabled="page>=lastPage" style="padding:0.35rem 0.7rem;border:1px solid #e2e8f0;border-radius:0.375rem;background:#fff;cursor:pointer;">Next</button>
          </span>
        </div>
      </td>
    </tr>
  </tfoot>
</table>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="data_table" so it imports as a labelled, editable component.
Collection source: Set the collection in x-data="pbTable('<collection>')" — on init it fetches GET /api/pb/<collection> and exposes rows, loading, error.
Columns: Bind each cell with x-text="row.<field>" inside the x-for row template. See Collections & Data.