1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../colors.js';
interface TableRendererProps {
headers: string[];
rows: string[][];
terminalWidth: number;
}
/**
* Custom table renderer for markdown tables
* We implement our own instead of using ink-table due to module compatibility issues
*/
export const TableRenderer: React.FC<TableRendererProps> = ({
headers,
rows,
terminalWidth,
}) => {
// Calculate column widths
const columnWidths = headers.map((header, index) => {
const headerWidth = header.length;
const maxRowWidth = Math.max(
...rows.map((row) => (row[index] || '').length),
);
return Math.max(headerWidth, maxRowWidth) + 2; // Add padding
});
// Ensure table fits within terminal width
const totalWidth = columnWidths.reduce((sum, width) => sum + width + 1, 1);
const scaleFactor =
totalWidth > terminalWidth ? terminalWidth / totalWidth : 1;
const adjustedWidths = columnWidths.map((width) =>
Math.floor(width * scaleFactor),
);
const renderCell = (content: string, width: number, isHeader = false) => {
// The actual space for content inside the padding
const contentWidth = Math.max(0, width - 2);
let cellContent = content;
if (content.length > contentWidth) {
if (contentWidth <= 3) {
// Not enough space for '...'
cellContent = content.substring(0, contentWidth);
} else {
cellContent = content.substring(0, contentWidth - 3) + '...';
}
}
// Pad the content to fill the cell
const padded = cellContent.padEnd(contentWidth, ' ');
if (isHeader) {
return (
<Text bold color={Colors.AccentCyan}>
{padded}
</Text>
);
}
return <Text>{padded}</Text>;
};
const renderRow = (cells: string[], isHeader = false) => (
<Box flexDirection="row">
<Text>│ </Text>
{cells.map((cell, index) => (
<React.Fragment key={index}>
{renderCell(cell, adjustedWidths[index] || 0, isHeader)}
<Text> │ </Text>
</React.Fragment>
))}
</Box>
);
const renderSeparator = () => {
const separator = adjustedWidths
.map((width) => '─'.repeat(Math.max(0, (width || 0) - 2)))
.join('─┼─');
return <Text>├─{separator}─┤</Text>;
};
const renderTopBorder = () => {
const border = adjustedWidths
.map((width) => '─'.repeat(Math.max(0, (width || 0) - 2)))
.join('─┬─');
return <Text>┌─{border}─┐</Text>;
};
const renderBottomBorder = () => {
const border = adjustedWidths
.map((width) => '─'.repeat(Math.max(0, (width || 0) - 2)))
.join('─┴─');
return <Text>└─{border}─┘</Text>;
};
return (
<Box flexDirection="column" marginY={1}>
{renderTopBorder()}
{renderRow(headers, true)}
{renderSeparator()}
{rows.map((row, index) => (
<React.Fragment key={index}>{renderRow(row)}</React.Fragment>
))}
{renderBottomBorder()}
</Box>
);
};
|
