Table

Data tables with rows, columns, and cell management

Overview

The Table element displays structured data in rows and columns. It uses a child-based structure where each row (table-row) contains cells (table-cell), giving you full control over each cell's content and styling.

Tables are wrapped in an overflow-x-auto container by default to enable horizontal scrolling on smaller screens. When you add a Table element, it automatically creates 3 rows with 3 cells each, with the first row configured as a header.

Child-Based Structure

The Table uses table-row and table-cell child elements. This structure allows you to style individual cells, merge cells with colspan/rowspan, and add rich content to any cell.

Settings

Configure your table using these settings in the Inspector panel:

Setting Description Default
Show Header Display the first row as a table header with distinct styling true
Striped Rows Apply alternating background colors to rows for better readability false
Bordered Cells Show borders around each cell true
Header Background Background class for the header row bg-gray-100
Cell Padding Padding class applied to all cells p-3
Table Width Width class for the table w-full

Row and Cell Management

The table structure consists of table-row elements containing table-cell elements:

Managing Rows

  • Add rows: Right-click the Table in the Structure panel and select "Add Child" to add a new table-row
  • Delete rows: Select a row in the Structure panel and press Delete
  • Reorder rows: Drag rows in the Structure panel to change their order
  • Header row: The first row has isHeader: true setting for header styling

Managing Cells

  • Edit content: Click a cell on the canvas to select it, then click again to edit inline
  • Add cells: Right-click a table-row in Structure and add a table-cell child
  • Style cells: Select a cell and use the Inspector to apply custom classes

Merged Cells (colspan/rowspan)

Table cells support colspan and rowspan attributes for creating merged cells:

Setting Description Default
colspan Number of columns this cell spans horizontally 1
rowspan Number of rows this cell spans vertically 1
Merged Cell Layout

When using colspan or rowspan, remember to remove the corresponding cells that would be "hidden" by the merge. For example, if a cell has colspan="2", remove the next cell in that row.

Examples

Basic Data Table with Header

A standard table with a header row and data rows:

<div class="overflow-x-auto">
  <table class="w-full border-collapse">
    <thead>
      <tr class="bg-gray-100">
        <th class="p-3 text-left border">Name</th>
        <th class="p-3 text-left border">Role</th>
        <th class="p-3 text-left border">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 border">Alice Johnson</td>
        <td class="p-3 border">Developer</td>
        <td class="p-3 border">Active</td>
      </tr>
      <tr>
        <td class="p-3 border">Bob Smith</td>
        <td class="p-3 border">Designer</td>
        <td class="p-3 border">Active</td>
      </tr>
    </tbody>
  </table>
</div>

Striped Table for Readability

Enable striped rows to make it easier to follow rows across wide tables:

<div class="overflow-x-auto">
  <table class="w-full border-collapse">
    <thead>
      <tr class="bg-gray-100">
        <th class="p-3 text-left">Product</th>
        <th class="p-3 text-left">Price</th>
        <th class="p-3 text-left">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white">
        <td class="p-3">Widget A</td>
        <td class="p-3">$19.99</td>
        <td class="p-3">150</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="p-3">Widget B</td>
        <td class="p-3">$29.99</td>
        <td class="p-3">85</td>
      </tr>
      <tr class="bg-white">
        <td class="p-3">Widget C</td>
        <td class="p-3">$39.99</td>
        <td class="p-3">42</td>
      </tr>
    </tbody>
  </table>
</div>

Table with Merged Cells

Use colspan and rowspan to create complex table layouts:

<div class="overflow-x-auto">
  <table class="w-full border-collapse">
    <thead>
      <tr class="bg-gray-100">
        <th class="p-3 border">Category</th>
        <th class="p-3 border" colspan="2">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 border" rowspan="2">Electronics</td>
        <td class="p-3 border">Phones</td>
        <td class="p-3 border">25 items</td>
      </tr>
      <tr>
        <td class="p-3 border">Laptops</td>
        <td class="p-3 border">18 items</td>
      </tr>
    </tbody>
  </table>
</div>

Next Steps

  • Spacer - Add vertical spacing between elements
  • List - Create bulleted or numbered lists
  • Inspector - Learn about styling options