ef847825fd
Added support to display diff code in a prettier way with [diff2html](https://diff2html.xyz/).  It displays code like [in this example](https://diff2html.xyz/demo.html). --------- Signed-off-by: George Araújo <george.gcac@gmail.com>
107 lines
3.2 KiB
Markdown
107 lines
3.2 KiB
Markdown
---
|
|
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. Just use 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 |
|
|
```
|
|
|
|
That 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>
|
|
|
|
It is also possible to use HTML to display tables. For example, the following HTML code will display a table with [Bootstrap Table](https://bootstrap-table.com/), loaded from a JSON file:
|
|
|
|
{% raw %}
|
|
|
|
```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>
|
|
```
|
|
|
|
{% endraw %}
|
|
|
|
<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>
|
|
|
|
<p></p>
|
|
|
|
By using [Bootstrap Table](https://bootstrap-table.com/) 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](https://examples.bootstrap-table.com/index.html).
|
|
|
|
{% raw %}
|
|
|
|
```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>
|
|
```
|
|
|
|
{% endraw %}
|
|
|
|
<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>
|