Skip to content

feat(hook): support table render hook#1034

Open
eureka0928 wants to merge 1 commit intodillonzq:masterfrom
eureka0928:feat/table-render-hook
Open

feat(hook): support table render hook#1034
eureka0928 wants to merge 1 commit intodillonzq:masterfrom
eureka0928:feat/table-render-hook

Conversation

@eureka0928
Copy link
Copy Markdown

@eureka0928 eureka0928 commented Mar 11, 2026

Summary

  • Add Hugo table render hook (render-table.html) to generate table markup at build time, replacing Hugo's default table rendering
  • Wrap tables in a .table-wrapper div for proper horizontal scrolling on narrow viewports
  • Apply column text alignment via inline styles from Markdown syntax

Closes #1015

Changes

  • layouts/_markup/render-table.html – Render hook entry point, delegates to partial
  • layouts/_partials/plugin/table.html – Table template using .THead / .TBody context with alignment support and Markdown attribute passthrough
  • assets/css/_page/_single.scss – Add .table-wrapper with overflow-x: auto and scrollbar styles; keep table base styles unchanged
  • hugo.toml / theme.toml – Bump minimum Hugo version to 0.134.0 (required for table render hooks)

Verification

Build the example site and inspect the HTML output:

hugo --source exampleSite --themesDir ../..
grep -B 1 -A 5 '<table' exampleSite/public/basic-markdown-syntax/index.html

Tables are now wrapped in <div class="table-wrapper"> and alignment styles (text-align: center, text-align: right) are applied to cells.

Screenshots

image image

Replace default table rendering with Hugo's table render hook
(available since v0.134.0) for server-side table markup generation.

- Add render-table.html hook delegating to plugin/table.html partial
- Wrap tables in .table-wrapper div for proper horizontal scrolling
- Apply text alignment via inline styles from Markdown column alignment
- Move overflow-x and scrollbar styles from table to .table-wrapper
- Bump minimum Hugo version to 0.134.0

Closes dillonzq#1015
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 11, 2026

Deploy Preview for hugo-loveit ready!

Name Link
🔨 Latest commit 3e90663
🔍 Latest deploy log https://app.netlify.com/projects/hugo-loveit/deploys/69b123386c742c000829a6f0
😎 Deploy Preview https://deploy-preview-1034--hugo-loveit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 98
Accessibility: 98
Best Practices: 100
SEO: 82
PWA: 78
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@eureka0928
Copy link
Copy Markdown
Author

Hi @dillonzq how are you?
I put the PR alongside proof of screenshots.
Please review if you have a moment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Support table render hooks, drop table DOMs dynamic modification in js script

1 participant