Skip to content

Commit 641a364

Browse files
george-gcageorge-gca
authored
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.
1 parent 1ce61cc commit 641a364

File tree

8 files changed

+330
-9
lines changed

8 files changed

+330
-9
lines changed

‎_includes/scripts/misc.html

+6
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
$(function () {$('[data-toggle="tooltip"]').tooltip()})
55
</script>
66
{%- endif %}
7+
78
{%- if site.enable_medium_zoom %}
89
<!-- Medium Zoom JS -->
910
<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 @@
1516
<script defer src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
1617
{% endif %}
1718

19+
<!-- Bootstrap Table -->
20+
<link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
21+
<script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
22+
1823
<!-- Load Common JS -->
24+
<script src="{{ '/assets/js/no_defer.js' | relative_url }}"></script>
1925
<script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
2026
<script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>

‎_posts/2023-03-21-tables.md

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
layout: post
3+
title: displaying beatiful tables with Bootstrap Tables
4+
date: 2023-03-20 14:37:00-0400
5+
description: an example of how to use Bootstrap Tables
6+
categories: sample-posts
7+
giscus_comments: true
8+
related_posts: true
9+
datatable: true
10+
---
11+
12+
Using markdown to display tables is easy. Just use the following syntax:
13+
14+
```markdown
15+
| Left aligned | Center aligned | Right aligned |
16+
| :----------- | :------------: | ------------: |
17+
| Left 1 | center 1 | right 1 |
18+
| Left 2 | center 2 | right 2 |
19+
| Left 3 | center 3 | right 3 |
20+
```
21+
22+
That will generate:
23+
24+
| Left aligned | Center aligned | Right aligned |
25+
| :----------- | :------------: | ------------: |
26+
| Left 1 | center 1 | right 1 |
27+
| Left 2 | center 2 | right 2 |
28+
| Left 3 | center 3 | right 3 |
29+
30+
<p></p>
31+
32+
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:
33+
34+
{% raw %}
35+
```html
36+
<table
37+
id="table"
38+
data-toggle="table"
39+
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
40+
<thead>
41+
<tr>
42+
<th data-field="id">ID</th>
43+
<th data-field="name">Item Name</th>
44+
<th data-field="price">Item Price</th>
45+
</tr>
46+
</thead>
47+
</table>
48+
```
49+
{% endraw %}
50+
51+
<table
52+
data-toggle="table"
53+
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
54+
<thead>
55+
<tr>
56+
<th data-field="id">ID</th>
57+
<th data-field="name">Item Name</th>
58+
<th data-field="price">Item Price</th>
59+
</tr>
60+
</thead>
61+
</table>
62+
63+
<p></p>
64+
65+
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).
66+
67+
{% raw %}
68+
```html
69+
<table
70+
data-click-to-select="true"
71+
data-height="460"
72+
data-pagination="true"
73+
data-search="true"
74+
data-toggle="table"
75+
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
76+
<thead>
77+
<tr>
78+
<th data-checkbox="true"></th>
79+
<th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
80+
<th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
81+
<th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
82+
</tr>
83+
</thead>
84+
</table>
85+
```
86+
{% endraw %}
87+
88+
<table
89+
data-click-to-select="true"
90+
data-height="460"
91+
data-pagination="true"
92+
data-search="true"
93+
data-toggle="table"
94+
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
95+
<thead>
96+
<tr>
97+
<th data-checkbox="true"></th>
98+
<th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
99+
<th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
100+
<th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
101+
</tr>
102+
</thead>
103+
</table>

‎_sass/_base.scss

+53-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ hr {
2424
}
2525

2626
table {
27-
2827
td,
2928
th {
3029
color: var(--global-text-color);
@@ -849,8 +848,8 @@ progress::-moz-progress-bar {
849848
font-size: medium;
850849
opacity: 0;
851850
position: absolute;
852-
right: .15rem;
853-
top: .15rem;
851+
right: .5rem;
852+
top: .5rem;
854853
}
855854

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

863+
.btn-group.dropdown {
864+
.btn {
865+
box-shadow: none;
866+
-webkit-box-shadow: none;
867+
}
868+
869+
.btn-secondary.dropdown-toggle {
870+
border: 1px solid var(--global-divider-color);
871+
872+
.page-size {
873+
color: inherit;
874+
}
875+
876+
&:not(.active) {
877+
background-color: var(--global-bg-color) !important;
878+
color: var(--global-text-color);
879+
}
880+
881+
&:hover {
882+
background-color: var(--global-hover-color) !important;
883+
color: var(--global-hover-text-color) !important;
884+
}
885+
}
886+
887+
.dropdown-menu {
888+
background-color: var(--global-bg-color);
889+
}
890+
891+
.dropdown-item {
892+
background-color: var(--global-bg-color);
893+
color: var(--global-text-color);
894+
895+
&:hover {
896+
color: var(--global-hover-color);
897+
}
898+
}
899+
900+
.dropdown-item.active, .dropdown-item:active {
901+
background-color: var(--global-hover-color);
902+
color: var(--global-hover-text-color) !important;
903+
904+
&:hover {
905+
color: var(--global-hover-text-color);
906+
}
907+
}
908+
}
909+
910+
// Table of Contents
911+
864912
nav[data-toggle="toc"] {
865913
top: 5rem;
866914

@@ -898,4 +946,5 @@ nav[data-toggle="toc"] {
898946
height: 0;
899947
top: 0;
900948
}
901-
}
949+
}
950+

‎_sass/_themes.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
/*******************************************************************************
22
* Themes
33
******************************************************************************/
4-
4+
55
:root {
66
--global-bg-color: #{$white-color};
77
--global-code-bg-color: #{$code-bg-color-light};
88
--global-text-color: #{$black-color};
99
--global-text-color-light: #{$grey-color};
1010
--global-theme-color: #{$purple-color};
1111
--global-hover-color: #{$purple-color};
12+
--global-hover-text-color: #{$white-color};
1213
--global-footer-bg-color: #{$grey-color-dark};
1314
--global-footer-text-color: #{$grey-color-light};
1415
--global-footer-link-color: #{$white-color};
@@ -40,6 +41,7 @@ html[data-theme='dark'] {
4041
--global-text-color-light: #{$grey-color-light};
4142
--global-theme-color: #{$cyan-color};
4243
--global-hover-color: #{$cyan-color};
44+
--global-hover-text-color: #{$white-color};
4345
--global-footer-bg-color: #{$grey-color-light};
4446
--global-footer-text-color: #{$grey-color-dark};
4547
--global-footer-link-color: #{$black-color};

‎assets/js/common.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// add toggle functionality to abstract and bibtex buttons
12
$(document).ready(function() {
23
$('a.abstract').click(function() {
34
$(this).parent().parent().find(".abstract.hidden").toggleClass('open');
@@ -11,7 +12,7 @@ $(document).ready(function() {
1112
});
1213

1314
// bootstrap-toc
14-
$(function () {
15+
$(document).ready(function () {
1516
if($('#toc-sidebar').length){
1617
var navSelector = "#toc-sidebar";
1718
var $myNav = $(navSelector);
@@ -20,4 +21,5 @@ $(function () {
2021
target: navSelector,
2122
});
2223
}
23-
});
24+
});
25+

‎assets/js/no_defer.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// add bootstrap classes to tables
2+
$(document).ready(function() {
3+
$('table').each(function() {
4+
// only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
5+
if($(this).parents('[class*="news"]').length==0 &&
6+
$(this).parents('[class*="card"]').length==0 &&
7+
$(this).parents('code').length == 0) {
8+
// make table use bootstrap-table
9+
$(this).attr('data-toggle','table');
10+
// add some classes to make the table look better
11+
// $(this).addClass('table-sm');
12+
$(this).addClass('table-hover');
13+
14+
if (document.documentElement.getAttribute("data-theme") == "dark") {
15+
$(this).addClass('table-dark');
16+
} else {
17+
$(this).removeClass('table-dark');
18+
}
19+
}
20+
})
21+
});
22+

‎assets/js/theme.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,17 @@ let setTheme = (theme) => {
1616

1717
if (theme) {
1818
document.documentElement.setAttribute("data-theme", theme);
19-
}
20-
else {
19+
20+
// Add class to tables.
21+
let tables = document.getElementsByTagName('table');
22+
for(let i = 0; i < tables.length; i++) {
23+
if (theme == "dark") {
24+
tables[i].classList.add('table-dark');
25+
} else {
26+
tables[i].classList.remove('table-dark');
27+
}
28+
}
29+
} else {
2130
document.documentElement.removeAttribute("data-theme");
2231
}
2332
localStorage.setItem("theme", theme);

0 commit comments

Comments
 (0)