Markdown render hook - table

[coliff]

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.

[bep]

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?

[coliff]

Users can easily add classes to the <table> itself like so:

| 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 <thead> or th etc... or sometimes adding specific IDs for integrating JavaScript enhancements for table sorting etc.

[maxammann]

There is also another issue which could be solved that way: https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/7

Users can easily add classes to the <table> itself like so:

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.

[github-actions]

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.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[michaeltlombardi]

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.

[sebastiancarlos]

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.

[jmooring]

Some thoughts about how this might work...

The render hook would receive the following context:

• .Attributes -- The Markdown attributes, if any.
• .Ordinal -- The zero-based ordinal of the table on the page.
• .Page -- A reference to the current page.
• .PageInner -- A reference to a page nested via the RenderShortcodes method.. (not sure if we need this; perhaps it's available by default)
• .Position -- The position of the table within the page content.
• .THead -- A slice of table header rows, where each row is a slice of table cells.
• .TBody -- A slice of table body rows, where each row is a slice of table cells.

Each table cell would be a struct:

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.

[bep]

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.

[jmooring]

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>

[sebastiancarlos]

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.

[scopartu]

Wrapping the tables with a division is my main use case. Right now I am manipulating the .Content with replaceRE to achieve that. Kudos on the progress here!

[github-actions]

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.