forked from alshedivat/al-folio
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for Bootstrap table (alshedivat#1283)
Added support for [Bootstrap Table](https://bootstrap-table.com/). Haven't checked the impact on website loading, but I believe [this kind of table](https://examples.bootstrap-table.com/#welcomes/from-data.html) is way more useful for blog posts and projects pages.
- Loading branch information
1 parent
78b3a9b
commit bf7e519
Showing
8 changed files
with
330 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| --- | ||
| layout: post | ||
| title: displaying beatiful tables with Bootstrap Tables | ||
| date: 2023-03-20 14:37:00-0400 | ||
| description: an example of how to use Bootstrap Tables | ||
| categories: sample-posts | ||
| giscus_comments: true | ||
| related_posts: true | ||
| datatable: 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // add bootstrap classes to tables | ||
| $(document).ready(function() { | ||
| $('table').each(function() { | ||
| // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class | ||
| if($(this).parents('[class*="news"]').length==0 && | ||
| $(this).parents('[class*="card"]').length==0 && | ||
| $(this).parents('code').length == 0) { | ||
| // make table use bootstrap-table | ||
| $(this).attr('data-toggle','table'); | ||
| // add some classes to make the table look better | ||
| // $(this).addClass('table-sm'); | ||
| $(this).addClass('table-hover'); | ||
|
|
||
| if (document.documentElement.getAttribute("data-theme") == "dark") { | ||
| $(this).addClass('table-dark'); | ||
| } else { | ||
| $(this).removeClass('table-dark'); | ||
| } | ||
| } | ||
| }) | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.