Added support for Bootstrap table (#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.
2023-05-01 00:10:30 -03:00 · 2023-05-01 00:10:30 -03:00 · 641a36405f
parent 1ce61cccc6
commit 641a36405f
8 changed files with 330 additions and 9 deletions
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@ -4,6 +4,7 @@
  $(function () {$('[data-toggle="tooltip"]').tooltip()})
  </script>
 {%- endif %}
+
 {%- if site.enable_medium_zoom %}
  <!-- Medium Zoom JS -->
  <script defer src="https://cdn.jsdelivr.net/npm/medium-zoom@{{ site.medium_zoom.version }}/dist/medium-zoom.min.js" integrity="{{ site.medium_zoom.integrity }}" crossorigin="anonymous"></script>
@ -15,6 +16,11 @@
  <script defer src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
 {% endif %}

+  <!-- Bootstrap Table -->
+  <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
+  <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
+
  <!-- Load Common JS -->
+  <script src="{{ '/assets/js/no_defer.js' | relative_url }}"></script>
  <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
  <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>
--- a/_posts/2023-03-21-tables.md
+++ b/_posts/2023-03-21-tables.md
@ -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>
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@ -24,7 +24,6 @@ hr {
 }

 table {
-
  td,
  th {
    color: var(--global-text-color);
@ -849,8 +848,8 @@ progress::-moz-progress-bar {
    font-size: medium;
    opacity: 0;
    position: absolute;
-    right: .15rem;
-    top: .15rem;
+    right: .5rem;
+    top: .5rem;
  }

  &:active .copy,
@ -861,6 +860,55 @@ progress::-moz-progress-bar {
  }
 }

+.btn-group.dropdown {
+  .btn {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+  }
+
+  .btn-secondary.dropdown-toggle {
+    border: 1px solid var(--global-divider-color);
+
+    .page-size {
+      color: inherit;
+    }
+
+    &:not(.active) {
+      background-color: var(--global-bg-color) !important;
+      color: var(--global-text-color);
+    }
+
+    &:hover {
+      background-color: var(--global-hover-color) !important;
+      color: var(--global-hover-text-color) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: var(--global-bg-color);
+  }
+
+  .dropdown-item {
+    background-color: var(--global-bg-color);
+    color: var(--global-text-color);
+
+    &:hover {
+      color: var(--global-hover-color);
+    }
+  }
+
+  .dropdown-item.active, .dropdown-item:active {
+    background-color: var(--global-hover-color);
+    color: var(--global-hover-text-color) !important;
+
+    &:hover {
+      color: var(--global-hover-text-color);
+    }
+  }
+}
+
+// Table of Contents
+
 nav[data-toggle="toc"] {
  top: 5rem;

@ -899,3 +947,4 @@ nav[data-toggle="toc"] {
    top: 0;
  }
 }
+
--- a/_sass/_themes.scss
+++ b/_sass/_themes.scss
@ -9,6 +9,7 @@
  --global-text-color-light: #{$grey-color};
  --global-theme-color: #{$purple-color};
  --global-hover-color: #{$purple-color};
+  --global-hover-text-color: #{$white-color};
  --global-footer-bg-color: #{$grey-color-dark};
  --global-footer-text-color: #{$grey-color-light};
  --global-footer-link-color: #{$white-color};
@ -40,6 +41,7 @@ html[data-theme='dark'] {
  --global-text-color-light: #{$grey-color-light};
  --global-theme-color: #{$cyan-color};
  --global-hover-color: #{$cyan-color};
+  --global-hover-text-color: #{$white-color};
  --global-footer-bg-color: #{$grey-color-light};
  --global-footer-text-color: #{$grey-color-dark};
  --global-footer-link-color: #{$black-color};
--- a/assets/js/common.js
+++ b/assets/js/common.js
@ -1,3 +1,4 @@
+// add toggle functionality to abstract and bibtex buttons
 $(document).ready(function() {
    $('a.abstract').click(function() {
        $(this).parent().parent().find(".abstract.hidden").toggleClass('open');
@ -11,7 +12,7 @@ $(document).ready(function() {
 });

 // bootstrap-toc
-$(function () {
+$(document).ready(function () {
    if($('#toc-sidebar').length){
        var navSelector = "#toc-sidebar";
        var $myNav = $(navSelector);
@ -21,3 +22,4 @@ $(function () {
        });
    }
 });
+
--- a/assets/js/no_defer.js
+++ b/assets/js/no_defer.js
@ -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');
+      }
+    }
+  })
+});
+
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@ -16,8 +16,17 @@ let setTheme = (theme) =>  {

  if (theme) {
    document.documentElement.setAttribute("data-theme", theme);
+
+    // Add class to tables.
+    let tables = document.getElementsByTagName('table');
+    for(let i = 0; i < tables.length; i++) {
+      if (theme == "dark") {
+        tables[i].classList.add('table-dark');
+      } else {
+        tables[i].classList.remove('table-dark');
      }
-  else {
+    }
+  } else {
    document.documentElement.removeAttribute("data-theme");
  }
  localStorage.setItem("theme", theme);
--- a/assets/json/table_data.json
+++ b/assets/json/table_data.json
@ -0,0 +1,128 @@
+[
+    {
+        "id": 0,
+        "name": "Item 0",
+        "price": "$0",
+        "amount": 3
+    },
+    {
+        "id": 1,
+        "name": "Item 1",
+        "price": "$1",
+        "amount": 4
+    },
+    {
+        "id": 2,
+        "name": "Item 2",
+        "price": "$2",
+        "amount": 8
+    },
+    {
+        "id": 3,
+        "name": "Item 3",
+        "price": "$3",
+        "amount": 2
+    },
+    {
+        "id": 4,
+        "name": "Item 4",
+        "price": "$4",
+        "amount": 90
+    },
+    {
+        "id": 5,
+        "name": "Item 5",
+        "price": "$5",
+        "amount": 2
+    },
+    {
+        "id": 6,
+        "name": "Item 6",
+        "price": "$6",
+        "amount": 3
+    },
+    {
+        "id": 7,
+        "name": "Item 7",
+        "price": "$7",
+        "amount": 7
+    },
+    {
+        "id": 8,
+        "name": "Item 8",
+        "price": "$8",
+        "amount": 39
+    },
+    {
+        "id": 9,
+        "name": "Item 9",
+        "price": "$9",
+        "amount": 78
+    },
+    {
+        "id": 10,
+        "name": "Item 10",
+        "price": "$10",
+        "amount": 30
+    },
+    {
+        "id": 11,
+        "name": "Item 11",
+        "price": "$11",
+        "amount": 32
+    },
+    {
+        "id": 12,
+        "name": "Item 12",
+        "price": "$12",
+        "amount": 12
+    },
+    {
+        "id": 13,
+        "name": "Item 13",
+        "price": "$13",
+        "amount": 76
+    },
+    {
+        "id": 14,
+        "name": "Item 14",
+        "price": "$14",
+        "amount": 10
+    },
+    {
+        "id": 15,
+        "name": "Item 15",
+        "price": "$15",
+        "amount": 9
+    },
+    {
+        "id": 16,
+        "name": "Item 16",
+        "price": "$16",
+        "amount": 8
+    },
+    {
+        "id": 17,
+        "name": "Item 17",
+        "price": "$17",
+        "amount": 1
+    },
+    {
+        "id": 18,
+        "name": "Item 18",
+        "price": "$18",
+        "amount": 99
+    },
+    {
+        "id": 19,
+        "name": "Item 19",
+        "price": "$19",
+        "amount": 100
+    },
+    {
+        "id": 20,
+        "name": "Item 20",
+        "price": "$20",
+        "amount": 109
+    }
+]