—

layout: post

title: displaying beautiful interactive tables

date: 2023-03-20 14:37:00-0400

description: an example of how to use interactive tables in al-folio

tags: formatting tables

categories: sample-posts

giscus_comments: true

related_posts: true

pretty_table: true

—

#

Using markdown to display tables is easy.

#

## Simple Example

#

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

#

```yml

pretty_table: true

```

#

Then, the following syntax

#

```markdown

| 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 |

#

<p></p>

#

## 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.

# # #

```html

<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>

```

# # #

<table

data-toggle=”table”

data-url=”/assets/json/table_data.json”>

<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>

#

<p></p>

#

## 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.

# # #

```html

<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>

```

# # #

<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”>

<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>