gohugoio / hugo

The world’s fastest framework for building websites.
https://gohugo.io
Apache License 2.0
75.61k stars 7.52k forks source link

Markdown render hook - table #9316

Closed coliff closed 2 months ago

coliff commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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[bot] commented 1 year ago

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 commented 1 year ago

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 commented 2 months ago

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 commented 2 months ago

Some thoughts about how this might work...

The render hook would receive the following context:

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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.

github-actions[bot] commented 1 month ago

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.