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

1 participant