ComponentsTable
Table
stableNavigable data table with column alignment and scroll.
Browser preview is a simulation. The copied component runs in actual terminal apps.
table.tsx
RankCityCountryPopulation
------------------------------------------------------------
6Mexico Ci…Mexico22,085,140
7CairoEgypt21,750,020
8BeijingChina21,333,332
9MumbaiIndia20,961,472
10OsakaJapan19,059,856
11ChongqingChina16,874,740
12KarachiPakistan16,839,950
table.tsx
Installation
npx orizen-tui@latest add table
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/table.tsx
Usage
table.imports.tsx
table.example.tsx
Examples
Usage
table.example1.tsx
RankCityCountryPopulation
------------------------------------------------------------
6Mexico Ci…Mexico22,085,140
7CairoEgypt21,750,020
8BeijingChina21,333,332
9MumbaiIndia20,961,472
10OsakaJapan19,059,856
11ChongqingChina16,874,740
12KarachiPakistan16,839,950
table.example1.tsx
API Reference
Table
PropTypeDefaultDescription
columnsTableColumn[]—Column definitions (key, label, width, align)
columns—
TableColumn[]Column definitions (key, label, width, align)
dataRecord<string, string>[]—Row data array
data—
Record<string, string>[]Row data array
heightnumber10Number of visible data rows
height10
numberNumber of visible data rows
focusbooleantrueWhether to accept keyboard navigation
focustrue
booleanWhether to accept keyboard navigation