displaying beautiful interactive tables

Created on March 20, 2023

2023   ·   formatting   tables   ·   sample-posts

Using markdown to display tables is easy.

Simple Example

First, add the following to the post’s front matter

pretty_table: true

Then, the following syntax

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1       |    center 1    |       right 1 |
| Left 2       |    center 2    |       right 2 |
| Left 3       |    center 3    |       right 3 |

will generate

Left aligned Center aligned Right aligned
Left 1 center 1 right 1
Left 2 center 2 right 2
Left 3 center 3 right 3

HTML Example

It is also possible to use HTML to display tables. For example, the following HTML code will display an interactive table loaded from a JSON file.

<table id="table" data-toggle="table" data-url="{{ '/assets/json/table_data.json' | relative_url }}">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>
ID Item Name Item Price

More Complex Example

You can create complex tables with pagination, search, sorting, checkboxes, and custom alignment. In v1.x, this works in both modes:

  • Tailwind-first mode (al_folio.compat.bootstrap.enabled: false) via the built-in vanilla table engine.
  • Bootstrap compatibility mode (al_folio.compat.bootstrap.enabled: true) via Bootstrap Table.
<table
  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}"
>
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
      <th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
      <th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>
ID Item Name Item Price


Enjoy Reading This Article?

Here are some more articles you might like to read next:


giscus comments misconfigured

Please follow instructions at http://giscus.app and update your giscus configuration.

Missing required keys: repo_id, category_id.