[PR #486] [CLOSED] feat(core): add markdown table rendering support #1355

New issue

Closed

opened 2026-03-14 09:32:15 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:32:15 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/486
Author: @Twisted928
Created: 1/7/2026
Status: ❌ Closed

Base: main ← Head: feat/table-rendering

📝 Commits (1)

255a4bc feat(core): add markdown table rendering support

📊 Changes

7 files changed (+774 additions, -5 deletions)

View changed files

📝 packages/core/src/lib/index.ts (+1 -0)
➕ packages/core/src/lib/table-renderer.test.ts (+159 -0)
➕ packages/core/src/lib/table-renderer.ts (+502 -0)
📝 packages/core/src/lib/tree-sitter-styled-text.ts (+39 -3)
📝 packages/core/src/renderables/Code.ts (+17 -2)
📝 packages/solid/examples/components/ExampleSelector.tsx (+9 -0)
➕ packages/solid/examples/components/table-demo.tsx (+47 -0)

📄 Description

Credit to OpenCode and oh-my-opencode for the implementation.

Summary
Add markdown table rendering support to @opentui/core, enabling proper display of markdown tables in TUI applications with aligned columns and box-drawing borders.
Features

Three rendering styles: Unicode (box-drawing), ASCII, and compact (no borders)
CJK support: Correct character width calculation for Chinese, Japanese, Korean, and emoji
Column alignment: Support for left, center, and right alignment via :---, :---:, ---:

Configurable options: maxColumnWidth, minColumnWidth, cellPadding, style
Example Output
Input:

Name	Age	City
Alice	30	NYC
田中太郎	28	東京
Unicode style output:
┌──────────┬─────┬──────┐
│ Name │ Age │ City │
├──────────┼─────┼──────┤
│ Alice │ 30 │ NYC │
│ 田中太郎 │ 28 │ 東京 │
└──────────┴─────┴──────┘

Usage

<code
  content={markdownContent}
  filetype="markdown"
  syntaxStyle={syntaxStyle}
  table={{ enabled: true, style: "unicode" }}
/>

Changes

packages/core/src/lib/table-renderer.ts - New table parsing and rendering module
packages/core/src/lib/tree-sitter-styled-text.ts - Integration with existing markdown rendering
packages/core/src/renderables/Code.ts - Added table option to CodeRenderable
packages/solid/examples/components/table-demo.tsx - Demo component
Testing
22 unit tests covering width calculation, alignment, parsing, and rendering
Manual testing with the included demo

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/486 **Author:** [@Twisted928](https://github.com/Twisted928) **Created:** 1/7/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feat/table-rendering` --- ### 📝 Commits (1) - [`255a4bc`](https://github.com/anomalyco/opentui/commit/255a4bca8e17314f93aa0c3ca49d59ffac377f0e) feat(core): add markdown table rendering support ### 📊 Changes **7 files changed** (+774 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/lib/index.ts` (+1 -0) ➕ `packages/core/src/lib/table-renderer.test.ts` (+159 -0) ➕ `packages/core/src/lib/table-renderer.ts` (+502 -0) 📝 `packages/core/src/lib/tree-sitter-styled-text.ts` (+39 -3) 📝 `packages/core/src/renderables/Code.ts` (+17 -2) 📝 `packages/solid/examples/components/ExampleSelector.tsx` (+9 -0) ➕ `packages/solid/examples/components/table-demo.tsx` (+47 -0) </details> ### 📄 Description > Credit to [OpenCode](https://github.com/sst/opencode) and [oh-my-opencode](https://github.com/anthropics/oh-my-opencode) for the implementation. Summary Add markdown table rendering support to `@opentui/core`, enabling proper display of markdown tables in TUI applications with aligned columns and box-drawing borders. Features - **Three rendering styles**: Unicode (box-drawing), ASCII, and compact (no borders) - **CJK support**: Correct character width calculation for Chinese, Japanese, Korean, and emoji - **Column alignment**: Support for left, center, and right alignment via `:---`, `:---:`, `---:` - **Configurable options**: `maxColumnWidth`, `minColumnWidth`, `cellPadding`, `style` Example Output Input: | Name | Age | City | |:-----|:---:|-----:| | Alice | 30 | NYC | | 田中太郎 | 28 | 東京 | Unicode style output: ┌──────────┬─────┬──────┐ │ Name │ Age │ City │ ├──────────┼─────┼──────┤ │ Alice │ 30 │ NYC │ │ 田中太郎 │ 28 │ 東京 │ └──────────┴─────┴──────┘ ## Usage ```tsx <code content={markdownContent} filetype="markdown" syntaxStyle={syntaxStyle} table={{ enabled: true, style: "unicode" }} /> ``` Changes - packages/core/src/lib/table-renderer.ts - New table parsing and rendering module - packages/core/src/lib/tree-sitter-styled-text.ts - Integration with existing markdown rendering - packages/core/src/renderables/Code.ts - Added table option to CodeRenderable - packages/solid/examples/components/table-demo.tsx - Demo component Testing - 22 unit tests covering width calculation, alignment, parsing, and rendering - Manual testing with the included demo --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>