Added support for Bootstrap table

_includes/scripts/misc.html

@@ -10,6 +10,32 @@
   <script defer src="{{ '/assets/js/zoom.js' | relative_url }}"></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>
+  <script>
+    $(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');
+          }
+        }
+      })
+    });
+  </script>
+
   <!-- Load Common JS -->
   <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
   <script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>

_posts/2023-03-21-tables.md

@@ -0,0 +1,105 @@
+---
+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
+# TODO: fix spacing below table
+# TODO: stylize table a little bit (e.g. header)
+---
+
+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>

_sass/_base.scss

@@ -24,7 +24,6 @@ hr {
 }
 
 table {
-
   td,
   th {
     color: var(--global-text-color);
@@ -856,3 +855,50 @@ pre {
     opacity: 1;
   }
 }
+
+.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);
+    }
+  }
+}

_sass/_themes.scss

@@ -1,14 +1,15 @@
 /*******************************************************************************
  * Themes
  ******************************************************************************/
- 
+
 :root {
   --global-bg-color: #{$white-color};
   --global-code-bg-color: #{$code-bg-color-light};
   --global-text-color: #{$black-color};
   --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};

assets/js/theme.js

@@ -16,8 +16,17 @@ let setTheme = (theme) =>  {
 
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
-  }
-  else {
+
+    // 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 {
     document.documentElement.removeAttribute("data-theme");
   }
   localStorage.setItem("theme", theme);

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
+    }
+]