refrakt.md

Docs Runes Plan Blog Changelog

DataTable

Interactive Markdown table with sorting, filtering, and pagination. A standard Markdown table becomes an enhanced data table.

Basic usage

Enable sorting and search on a Markdown table.

{% datatable sortable="Name,Price" searchable=true %}
| Name | Price | Category | Stock |
|------|-------|----------|-------|
| Widget A | $9.99 | Tools | 150 |
| Widget B | $14.99 | Tools | 85 |
| Gadget X | $24.99 | Electronics | 42 |
| Gadget Y | $19.99 | Electronics | 128 |
| Part Z | $4.99 | Components | 500 |
{% /datatable %}
<div data-rune="data-table" typeof="Dataset">
  <meta content="Name,Price" data-field="sortable">
  <meta content="true" data-field="searchable">
  <meta content="0" data-field="page-size">
  <meta content="" data-field="default-sort">
  <table data-name="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Category</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>$9.99</td>
        <td>Tools</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>$14.99</td>
        <td>Tools</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Gadget X</td>
        <td>$24.99</td>
        <td>Electronics</td>
        <td>42</td>
      </tr>
      <tr>
        <td>Gadget Y</td>
        <td>$19.99</td>
        <td>Electronics</td>
        <td>128</td>
      </tr>
      <tr>
        <td>Part Z</td>
        <td>$4.99</td>
        <td>Components</td>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</div>
NamePriceCategoryStock
Widget A$9.99Tools150
Widget B$14.99Tools85
Gadget X$24.99Electronics42
Gadget Y$19.99Electronics128
Part Z$4.99Components500
<div typeof="Dataset" class="rf-datatable rf-datatable--true rf-datatable--Name,Price rf-datatable--0" data-searchable="true" data-sortable="Name,Price" data-page-size="0" data-rune="data-table" data-density="compact">
  <table data-name="table" class="rf-datatable__table" data-section="body">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Category</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>$9.99</td>
        <td>Tools</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>$14.99</td>
        <td>Tools</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Gadget X</td>
        <td>$24.99</td>
        <td>Electronics</td>
        <td>42</td>
      </tr>
      <tr>
        <td>Gadget Y</td>
        <td>$19.99</td>
        <td>Electronics</td>
        <td>128</td>
      </tr>
      <tr>
        <td>Part Z</td>
        <td>$4.99</td>
        <td>Components</td>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</div>

With pagination

Use pageSize to paginate large tables.

{% datatable sortable="Name,Price" searchable=true pageSize=3 %}
| Name | Price | Category | Stock |
|------|-------|----------|-------|
| Widget A | $9.99 | Tools | 150 |
| Widget B | $14.99 | Tools | 85 |
| Gadget X | $24.99 | Electronics | 42 |
| Gadget Y | $19.99 | Electronics | 128 |
| Part Z | $4.99 | Components | 500 |
{% /datatable %}
<div data-rune="data-table" typeof="Dataset">
  <meta content="Name,Price" data-field="sortable">
  <meta content="true" data-field="searchable">
  <meta content="3" data-field="page-size">
  <meta content="" data-field="default-sort">
  <table data-name="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Category</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>$9.99</td>
        <td>Tools</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>$14.99</td>
        <td>Tools</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Gadget X</td>
        <td>$24.99</td>
        <td>Electronics</td>
        <td>42</td>
      </tr>
      <tr>
        <td>Gadget Y</td>
        <td>$19.99</td>
        <td>Electronics</td>
        <td>128</td>
      </tr>
      <tr>
        <td>Part Z</td>
        <td>$4.99</td>
        <td>Components</td>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</div>
NamePriceCategoryStock
Widget A$9.99Tools150
Widget B$14.99Tools85
Gadget X$24.99Electronics42
Gadget Y$19.99Electronics128
Part Z$4.99Components500
<div typeof="Dataset" class="rf-datatable rf-datatable--true rf-datatable--Name,Price rf-datatable--3" data-searchable="true" data-sortable="Name,Price" data-page-size="3" data-rune="data-table" data-density="compact">
  <table data-name="table" class="rf-datatable__table" data-section="body">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Category</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>$9.99</td>
        <td>Tools</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>$14.99</td>
        <td>Tools</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Gadget X</td>
        <td>$24.99</td>
        <td>Electronics</td>
        <td>42</td>
      </tr>
      <tr>
        <td>Gadget Y</td>
        <td>$19.99</td>
        <td>Electronics</td>
        <td>128</td>
      </tr>
      <tr>
        <td>Part Z</td>
        <td>$4.99</td>
        <td>Components</td>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</div>

Attributes

AttributeTypeDefaultDescription
sortablestring—Comma-separated list of sortable column names
searchablebooleanfalseEnable search/filter input
pageSizenumber0Rows per page (0 = show all)
defaultSortstring—Column to sort by default

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration