[PR #598] feat: Add Table component with borders, separators, and styling support #645

New issue

Open

opened 2026-03-02 23:47:29 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 23:47:29 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/598
Author: @votsuk
Created: 1/28/2026
Status: 🔄 Open

Base: main ← Head: main

📝 Commits (2)

685bae8 feat: Add TableRenderable component with full styling and rendering support
f87fc37 feat: Add Table Demo to ExampleSelector with description and scene integration

📊 Changes

14 files changed (+1951 additions, -0 deletions)

View changed files

➕ packages/core/src/examples/table-demo.ts (+272 -0)
➕ packages/core/src/renderables/Table.test.ts (+372 -0)
➕ packages/core/src/renderables/Table.ts (+872 -0)
📝 packages/core/src/renderables/composition/constructs.ts (+34 -0)
📝 packages/core/src/renderables/index.ts (+1 -0)
➕ packages/react/examples/table-demo.tsx (+151 -0)
📝 packages/react/jsx-namespace.d.ts (+12 -0)
📝 packages/react/src/components/index.ts (+12 -0)
📝 packages/react/src/types/components.ts (+22 -0)
📝 packages/solid/examples/components/ExampleSelector.tsx (+9 -0)
➕ packages/solid/examples/components/table-demo.tsx (+148 -0)
📝 packages/solid/jsx-runtime.d.ts (+12 -0)
📝 packages/solid/src/elements/index.ts (+12 -0)
📝 packages/solid/src/types/elements.ts (+22 -0)

📄 Description

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

_{🔄 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/598 **Author:** [@votsuk](https://github.com/votsuk) **Created:** 1/28/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (2) - [`685bae8`](https://github.com/anomalyco/opentui/commit/685bae8afd57cedfd8097576f1d456c4ca595a9e) feat: Add TableRenderable component with full styling and rendering support - [`f87fc37`](https://github.com/anomalyco/opentui/commit/f87fc37ee36fb11f9abb977fdf6467ac18573254) feat: Add Table Demo to ExampleSelector with description and scene integration ### 📊 Changes **14 files changed** (+1951 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `packages/core/src/examples/table-demo.ts` (+272 -0) ➕ `packages/core/src/renderables/Table.test.ts` (+372 -0) ➕ `packages/core/src/renderables/Table.ts` (+872 -0) 📝 `packages/core/src/renderables/composition/constructs.ts` (+34 -0) 📝 `packages/core/src/renderables/index.ts` (+1 -0) ➕ `packages/react/examples/table-demo.tsx` (+151 -0) 📝 `packages/react/jsx-namespace.d.ts` (+12 -0) 📝 `packages/react/src/components/index.ts` (+12 -0) 📝 `packages/react/src/types/components.ts` (+22 -0) 📝 `packages/solid/examples/components/ExampleSelector.tsx` (+9 -0) ➕ `packages/solid/examples/components/table-demo.tsx` (+148 -0) 📝 `packages/solid/jsx-runtime.d.ts` (+12 -0) 📝 `packages/solid/src/elements/index.ts` (+12 -0) 📝 `packages/solid/src/types/elements.ts` (+22 -0) </details> ### 📄 Description # 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 <img width="516" height="126" alt="CleanShot 2026-01-27 at 21 14 00" src="https://github.com/user-attachments/assets/20071719-a8ad-43c8-9d53-817ea12d241f" /> ### A solidjs demo for using the table renderable <img width="1717" height="986" alt="CleanShot 2026-01-27 at 21 14 45" src="https://github.com/user-attachments/assets/4786b095-e2ec-486b-ae32-3b468c3f16cc" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>