2023-03-21-tables.md

layout	post
title	displaying beautiful tables with Bootstrap Tables
date	2023-03-20 14:37:00 -0400
description	an example of how to use Bootstrap Tables
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

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 a table with Bootstrap Table, loaded from a JSON file:

{% raw %}

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

{% endraw %}

ID	Item Name	Item Price

More Complex Example

By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.

{% raw %}

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

{% endraw %}

	ID	Item Name	Item Price