Skip to content

Conversation

@Twisted928
Copy link

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

- Add table-renderer module with parsing and rendering logic
- Support Unicode, ASCII, and compact table styles
- Handle CJK character width correctly (Chinese, Japanese, Korean)
- Support column alignment (left, center, right)
- Add configurable options: maxColumnWidth, minColumnWidth, cellPadding
- Integrate with CodeRenderable via table option
- Add 22 unit tests for table functionality
- Add table rendering demo to solid examples
@msmps
Copy link
Collaborator

msmps commented Jan 7, 2026

thanks for the contribution @Twisted928 but this is already in progress and waiting be merged! closing as duplicate of #433

@msmps msmps closed this Jan 7, 2026
@Twisted928
Copy link
Author

@msmps Thanks for the heads up! I noticed that #433 might still have an issue with table column alignment - the table.align array from marked (which contains "left", "center", "right" from :---, :---:, ---: syntax) doesn't seem to be used in createTableRenderable.

Happy to contribute a fix for that if needed once #433 is merged.

thanks for the contribution @Twisted928 but this is already in progress and waiting be merged! closing as duplicate of #433

@remorses
Copy link
Contributor

remorses commented Jan 7, 2026

@Twisted928 marked is used to render boxes, the layout is then done by Yoga. This way it even supports truncating cells that are too long. You can see a preview image in the PR

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.

3 participants