feat: Add Table component with borders, separators, and styling support

[votsuk]

Summary

• Implements a full-featured Table component for rendering tabular data in the terminal with support for borders (single, double, rounded), header/row separators, cell padding, text alignment, and custom colors
• Adds semantic table elements (table, thead, tbody, tr, th, td) to core, React, and Solid packages with complete TypeScript types
• Includes comprehensive test suite and interactive demos for all three packages
  Details

Core Package (@opentui/core)

• New TableRenderable with configurable border styles, colors, separators, and cell padding
• Section renderables (TableHeadRenderable, TableBodyRenderable) with background color support
• Row and cell renderables (TableRowRenderable, TableHeaderCellRenderable, TableDataCellRenderable) with text alignment and per-cell styling
• Automatic column width calculation based on content
• Exported via constructs.ts as JSX-like helper functions (Table, THead, TBody, TR, TH, TD)

React Package (@opentui/react)

• JSX intrinsic elements for all table components
• Full TypeScript prop types

Solid Package (@opentui/solid)

• JSX intrinsic elements for all table components
• Full TypeScript prop types

Examples & Tests

• Interactive table-demo for core, React, and Solid showcasing all features
• Unit tests covering table structure, column width calculation, border styles, and rendering output

A few screenshots

An example inside of OpenDocker using the table renderable

A solidjs demo for using the table renderable

[votsuk]

Hey @kommander , just want to start off by saying this is my first PR into opensource. Hope you take a look at this PR and consider the work I've put in. I will disclaim that I did use AI to help me put this together.

The motive - I am building OpenDocker which is a TUI built on top of OpenTUI + Solid. I find myself displaying some data about docker containers, images, and volumes and I have to use hacky solutions like left pad to have data aligned well. With a solution like introducing the table primitive I am able to have a much cleaner and stable approach to displaying data in the TUI.

[simonklee]

Thanks for the PR.

An observation is the rendering architecture. Every component in the table hierarchy returns [] from _getVisibleChildren(), which hides the entire subtree from the normal render/layout pipeline. This means children added via .add() don't participate in hit testing, selection, focus, or mouse events. Existing components that do manual drawing in renderSelf (Slider, ScrollBarArrow, LineNumberGutter, etc.) are all leaf nodes. With the current implementation text isn't selectable, for instance.

There are other things in the PR to address, but I think it makes sense to first consider the architecture before iterating on the details.

[votsuk]

Thanks @simonklee for the comment.

I see what you're saying and the concern. I'll take a look at it and rethink the architecture. I think I have a few ideas as well e.g extending the box renderable for the table to inherit the functionality of a box. A few other technical decisions I have in mind are also things like do we want to support completely dynamic cells allowing things having other renderables children besides just text?

Would love to hear your thoughts on those 2 examples, and also any other architectural concerns you have as again... this is something new for me so I'm still trying to wrap my mind around this domain and don't want to just keep spitting out crap after crap lol and rather contribute something meaningful