blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme: Fix overflow issue for wide tables

Browse Source
This commit is contained in:
Joe Mooring
2025-03-03 17:29:44 -08:00
committed by GitHub
parent c4f759e016
commit 727ef6f665
5 changed files with 97 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierignore
+1 -1
View File
@@ -2,6 +2,7 @@
**/icons.html
# These are whitespace sensitive.
layouts/_default/_markup/render-code*
layouts/_default/_markup/render-table*
# Odd template syntax.
layouts/_default/_markup/render-heading*
@@ -12,4 +13,3 @@ layouts/partials/layouts/head/head.html
# Auto generated.
assets/css/components/chroma*.css
assets/jsconfig.json
assets/css/components/content.css
+1 -1
View File
@@ -30,7 +30,7 @@
@apply prose-code:px-0.5 prose-code:text-gray-500 prose-code:dark:text-gray-300 border-none;
@apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
/* tables */
@apply prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:relative prose-table:overflow-scroll prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
@apply prose-table:w-auto prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
/* hr */
@apply dark:prose-hr:border-slate-800;
layouts/_default/_markup/render-table.html
+31
View File
@@ -0,0 +1,31 @@
<div class="overflow-x-auto">
<table
{{- range $k, $v := .Attributes }}
{{- if $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end }}>
<thead>
{{- range .THead }}
<tr>
{{- range . }}
<th {{- with .Alignment }} class="!text-{{ . }}"{{- end }}>
{{- .Text -}}
</th>
{{- end }}
</tr>
{{- end }}
</thead>
<tbody>
{{- range .TBody }}
<tr>
{{- range . }}
<td {{- with .Alignment }} class="!text-{{ . }}"{{- end }}>
{{- .Text -}}
</td>
{{- end }}
</tr>
{{- end }}
</tbody>
</table>
</div>
layouts/shortcodes/datatable-filtered.html
+33 -27
View File
@@ -10,32 +10,38 @@
{{ $list := where $list $filter1 $filter2 $filter3 }}
<table class="table table-bordered">
<tr>
{{ range $fields }}
<th>{{ . }}</th>
{{ end }}
</tr>
{{ range $list }}
<tr>
{{ range $k, $v := . }}
{{ $.Scratch.Set $k $v }}
{{ end }}
{{ range $k, $v := $fields }}
<td>
{{ $tdContent := $.Scratch.Get . }}
{{ if eq $k 3 }}
{{ printf "%v" $tdContent |
strings.ReplaceRE `\[` "<ol><li>" |
strings.ReplaceRE `\s` "</li><li>" |
strings.ReplaceRE `\]` "</li></ol>" |
safeHTML
}}
{{ else }}
{{ $tdContent }}
<div class="overflow-x-auto">
<table>
<thead>
<tr>
{{ range $fields }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range $list }}
<tr>
{{ range $k, $v := . }}
{{ $.Scratch.Set $k $v }}
{{ end }}
</td>
{{ range $k, $v := $fields }}
<td>
{{ $tdContent := $.Scratch.Get . }}
{{ if eq $k 3 }}
{{ printf "%v" $tdContent |
strings.ReplaceRE `\[` "<ol><li>" |
strings.ReplaceRE `\s` "</li><li>" |
strings.ReplaceRE `\]` "</li></ol>" |
safeHTML
}}
{{ else }}
{{ $tdContent }}
{{ end }}
</td>
{{ end }}
</tr>
{{ end }}
</tr>
{{ end }}
</table>
</tbody>
</table>
</div>
layouts/shortcodes/datatable.html
+31 -25
View File
@@ -4,30 +4,36 @@
{{ $fields := after 2 .Params }}
<table class="table table-bordered">
<tr>
{{ range $fields }}
{{ $s := . }}
{{ if eq $s "_key" }}
{{ $s = "Type" }}
{{ end }}
<th>{{ $s }}</th>
{{ end }}
</tr>
{{ range $k1, $v1 := $list }}
<tr>
{{ range $k2, $v2 := . }}
{{ $.Scratch.Set $k2 $v2 }}
{{ end }}
{{ range $fields }}
{{ $s := "" }}
{{ if eq . "_key" }}
{{ $s = $k1 }}
{{ else }}
{{ $s = $.Scratch.Get . }}
<div class="overflow-x-auto">
<table>
<thead>
<tr>
{{ range $fields }}
{{ $s := . }}
{{ if eq $s "_key" }}
{{ $s = "Type" }}
{{ end }}
<th>{{ $s }}</th>
{{ end }}
<td>{{ $s }}</td>
</tr>
</thead>
<tbody>
{{ range $k1, $v1 := $list }}
<tr>
{{ range $k2, $v2 := . }}
{{ $.Scratch.Set $k2 $v2 }}
{{ end }}
{{ range $fields }}
{{ $s := "" }}
{{ if eq . "_key" }}
{{ $s = $k1 }}
{{ else }}
{{ $s = $.Scratch.Get . }}
{{ end }}
<td>{{ $s }}</td>
{{ end }}
</tr>
{{ end }}
</tr>
{{ end }}
</table>
</tbody>
</table>
</div>