-
-
Notifications
You must be signed in to change notification settings - Fork 7.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Markdown render hook - table #9316
Comments
I agree about the awesomeness, but they are a "hammer solution" that I would prefer to limit its use... Could you not add CSS classes using attributes? |
Users can easily add classes to the | Language | Setting |
| --------------- | ------- |
| U.S. English | en-us |
| Korean | ko |
| Turkish | tr |
{.table-bordered} but often I'd like to add JavaScript interactivity to elements within the table - e.g. needing to use specific CSS classes on the |
There is also another issue which could be solved that way: https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/7
I agree, but sometimes its required to apply changes globally. In the issue mentioned above the only proper solution is to add a div around a table. |
This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. |
A use case for this that I have is turning markdown tables into interactive roll tables - a visitor can click on a column to select a random row or random cells in each row based on a dice roll called by JavaScript. I have workarounds for this, but they move my module users further from "normal" Markdown and my user base is indie tabletop game authors rather than web devs or tech writers. There's other use cases I can think of, like marking a table as sortable or filterable, or otherwise adding more interactivity to the table. AFAIK, any of these sorts of things requires writing a shortcode today. |
My two cents: Tables are one of those things that are straightforward in Markdown but can get messy when you need to style them and add functionality for multiple platforms. A table render hook would be a game-changer here. It'd let writers keep doing their thing in Markdown, while allowing devs to transform the output without touching the content. |
Some thoughts about how this might work... The render hook would receive the following context:
Each table cell would be a type TableCell struct {
Text string (string instead of template.HTML to be consistent with other render hooks)
Alignment string // left, center, or right
} The render hook would look something like this: <table
{{- range $k, $v := .Attributes }}
{{- if $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end }}>
<thead>
{{- range .THead }}
<tr>
{{- range . }}
<th {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
{{- .Text | safeHTML -}}
</th>
{{- end }}
</tr>
{{- end }}
</thead>
<tbody>
{{- range .TBody }}
<tr>
{{- range . }}
<td {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
{{- .Text | safeHTML -}}
</td>
{{- end }}
</tr>
{{- end }}
</tbody>
</table> Note that the GFM table spec has no provision for footer rows. |
So, while @jmooring 's proposed API makes sense, this seems, to me at least, like a lot of effort needed for marginal gain/interest. Hugo's proposal process lacks some ways to measure interest, but I see a handful of "thumbs up" in the above comments, which to me sounds like a marginal feature. |
I don't have a sense of how many developers would take advantage of this, but I know we've had a few forum topics related to Bootstrap tables. For example, it would be very convenient to render every table like this: <div class="table-responsive">
<table class="table">
...
</table>
</div> |
That's exactly my use-case, by the way. |
This commit upgdraes to Hugo 0.134.1 and enables Bootstrap 5's responsive tables. This effectively makes the entire site responsive. Hugo added support for table render hooks in version 111 ([release notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0), [docs](https://gohugo.io/render-hooks/tables/)), which are needed to support Bootstrap 5's responsive tables ([source](gohugoio/hugo#9316 (comment))).
This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive tables. This effectively makes the entire site responsive. Hugo added support for table render hooks in version 0.134.1 ([release notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0), [docs](https://gohugo.io/render-hooks/tables/)), which are needed to support Bootstrap 5's responsive tables ([source](gohugoio/hugo#9316 (comment))).
This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive tables. This effectively makes the entire site responsive. Hugo added support for table render hooks in version 0.134.1 ([release notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0), [docs](https://gohugo.io/render-hooks/tables/)), which are needed to support Bootstrap 5's responsive tables ([source](gohugoio/hugo#9316 (comment))). Also, make sure the rendered SHAs break correctly on mobile by adding a text-break shortcode.
This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive tables. This effectively makes the entire site responsive. Hugo added support for table render hooks in version 0.134.1 ([release notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0), [docs](https://gohugo.io/render-hooks/tables/)), which are needed to support Bootstrap 5's responsive tables ([source](gohugoio/hugo#9316 (comment))). Also, make sure the rendered SHAs break correctly on mobile by adding a text-break shortcode.
This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive tables. This effectively makes the entire site responsive. Hugo added support for table render hooks in version 0.134.1 ([release notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0), [docs](https://gohugo.io/render-hooks/tables/)), which are needed to support Bootstrap 5's responsive tables ([source](gohugoio/hugo#9316 (comment))). Also, make sure the rendered SHAs break correctly on mobile by adding a text-break shortcode.
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Markdown render hooks are awesome!
I'd be very happy to see support added for tables too. Some use cases could be to add specific
position:sticky
classes to the headers, default CSS classes, wrapping the table in a div for horizontal scrolling of the the table on smaller screens etc.The text was updated successfully, but these errors were encountered: