tinky-table 0.1.0

package/README.ja-JP.md

@@ -0,0 +1,154 @@
+# tinky-table
+
+[English](./README.md) | [简体中文](./README.zh-CN.md)
+
+[tinky](https://github.com/ByteLandTechnology/tinky) アプリケーション向けの機能豊富でカスタマイズ可能なテーブルコンポーネントです。ソート、ページネーション、カスタムセルレンダリング、柔軟なレイアウトをサポートし、ターミナルユーザーインターフェース (TUI) 向けに構築されています。
+
+## 特徴
+
+- 📦 **宣言的な列定義**: タイトル、キー、幅、配置設定を含む列定義。
+- 🎨 **柔軟なスタイリング**: 複数のボーダースタイル（single, double, round, bold など）やカスタム行/ヘッダースタイルをサポート。
+- 🔀 **ソート**: 並べ替えインジケーター付きの列ソートを標準サポート。
+- 📄 **ページネーション**: ページネーションロジックとの統合が容易。
+- 🖌️ **カスタムレンダリング**: テーブルセル内に任意の Tinky コンポーネント（プログレスバー、バッジなど）をレンダリング可能。
+- 📐 **レスポンシブレイアウト**: 固定幅、パーセンテージ、自動サイズ調整の列をサポート。
+
+## インストール
+
+```bash
+npm install tinky-table
+```
+
+## 使い方
+
+### 基本的な例
+
+```tsx
+import React from "react";
+import { render } from "tinky";
+import { Table } from "tinky-table";
+
+const data = [
+  { id: 1, name: "Alice", role: "Engineer", age: 28 },
+  { id: 2, name: "Bob", role: "Designer", age: 32 },
+  { id: 3, name: "Charlie", role: "Manager", age: 35 },
+];
+
+const columns = [
+  { key: "id", title: "ID", width: 5 },
+  { key: "name", title: "Name", width: 20 },
+  { key: "role", title: "Role", width: 15 },
+  { key: "age", title: "Age", width: 5, align: "right" },
+];
+
+function App() {
+  return <Table data={data} columns={columns} borderStyle="round" />;
+}
+
+render(<App />);
+```
+
+### 高度な使用法 (カスタムレンダリングとソート)
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { Table, ColumnDef, SortDirection } from "tinky-table";
+
+interface User {
+  id: number;
+  name: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+const data: User[] = [
+  { id: 1, name: "Alice", status: "active", score: 95 },
+  { id: 2, name: "Bob", status: "inactive", score: 82 },
+  { id: 3, name: "Charlie", status: "active", score: 88 },
+];
+
+function StatusBadge({ status }: { status: User["status"] }) {
+  return (
+    <Text color={status === "active" ? "green" : "gray"}>
+      {status.toUpperCase()}
+    </Text>
+  );
+}
+
+function App() {
+  const [sortState, setSortState] = useState<{
+    key: string;
+    direction: SortDirection;
+  }>({
+    key: "name",
+    direction: "asc",
+  });
+
+  const columns: ColumnDef<User>[] = [
+    { key: "name", title: "Name", width: 20, sortable: true },
+    {
+      key: "status",
+      title: "Status",
+      width: 10,
+      render: (val) => <StatusBadge status={val as User["status"]} />,
+    },
+    {
+      key: "score",
+      title: "Score",
+      width: 10,
+      align: "right",
+      render: (val) => <Text bold>{val}%</Text>,
+    },
+  ];
+
+  const sortedData = [...data].sort((a, b) => {
+    // ... ソートロジック ...
+    return 0;
+  });
+
+  return (
+    <Table
+      data={sortedData}
+      columns={columns}
+      sortState={sortState}
+      rowStyle={(row, index) => ({
+        backgroundColor: index % 2 === 0 ? undefined : "#222",
+      })}
+    />
+  );
+}
+
+render(<App />);
+```
+
+## API
+
+### `<Table />` プロパティ
+
+| プロパティ    | 型                                          | 説明                                                                      | デフォルト  |
+| ------------- | ------------------------------------------- | ------------------------------------------------------------------------- | ----------- |
+| `data`        | `T[]`                                       | 表示するデータオブジェクトの配列。                                        | 必須        |
+| `columns`     | `ColumnDef<T>[]`                            | 列の定義。                                                                | 必須        |
+| `borderStyle` | `TableBorderStyle`                          | 枠線のスタイル (`single`, `double`, `round`, `bold`, `classic`, `none`)。 | `'single'`  |
+| `showHeader`  | `boolean`                                   | ヘッダー行を表示するかどうか。                                            | `true`      |
+| `width`       | `number \| string`                          | テーブルの全幅。                                                          | `'auto'`    |
+| `emptyText`   | `ReactNode`                                 | データが空の場合に表示するコンテンツ。                                    | `'No data'` |
+| `sortState`   | `{ key: string, direction: SortDirection }` | 現在のソート状態。                                                        | `undefined` |
+| `rowStyle`    | `(row: T, index: number) => Style`          | 行を動的にスタイルするための関数。                                        | `undefined` |
+
+### `ColumnDef` プロパティ
+
+| プロパティ | 型                                 | 説明                                                                |
+| ---------- | ---------------------------------- | ------------------------------------------------------------------- |
+| `key`      | `string`                           | 列の一意な識別子。                                                  |
+| `title`    | `ReactNode`                        | 表示するヘッダーのタイトル。                                        |
+| `dataKey`  | `keyof T`                          | データオブジェクトから値を抽出するためのキー (デフォルトは `key`)。 |
+| `width`    | `number \| string`                 | 幅 (`10`, `'20%'`, `'auto'`)。                                      |
+| `align`    | `'left' \| 'center' \| 'right'`    | テキストの配置。                                                    |
+| `render`   | `(value, row, index) => ReactNode` | セルのカスタムレンダリング関数。                                    |
+| `sortable` | `boolean`                          | 列にソートインジケーターを表示するかどうか。                        |
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,154 @@
+# tinky-table
+
+[简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
+
+A feature-rich, customizable Table component for [tinky](https://github.com/ByteLandTechnology/tinky) applications. Built for terminal user interfaces with support for sorting, pagination, custom cell rendering, and flexible layouts.
+
+## Features
+
+- 📦 **Declarative Column Definitions**: Define columns with titles, keys, widths, and alignments.
+- 🎨 **Flexible Styling**: Support for multiple border styles (single, double, round, bold, etc.) and custom row/header styles.
+- 🔀 **Sorting**: Built-in support for column sorting with visual indicators.
+- 📄 **Pagination**: Easy integration with pagination logic.
+- 🖌️ **Custom Rendering**: Render any Tinky component inside table cells (progress bars, badges, etc.).
+- 📐 **Responsive Layouts**: Supports fixed, percentage-based, and auto-sizing columns.
+
+## Installation
+
+```bash
+npm install tinky-table
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React from "react";
+import { render } from "tinky";
+import { Table } from "tinky-table";
+
+const data = [
+  { id: 1, name: "Alice", role: "Engineer", age: 28 },
+  { id: 2, name: "Bob", role: "Designer", age: 32 },
+  { id: 3, name: "Charlie", role: "Manager", age: 35 },
+];
+
+const columns = [
+  { key: "id", title: "ID", width: 5 },
+  { key: "name", title: "Name", width: 20 },
+  { key: "role", title: "Role", width: 15 },
+  { key: "age", title: "Age", width: 5, align: "right" },
+];
+
+function App() {
+  return <Table data={data} columns={columns} borderStyle="round" />;
+}
+
+render(<App />);
+```
+
+### Advanced Usage (Custom Rendering & Sorting)
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { Table, ColumnDef, SortDirection } from "tinky-table";
+
+interface User {
+  id: number;
+  name: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+const data: User[] = [
+  { id: 1, name: "Alice", status: "active", score: 95 },
+  { id: 2, name: "Bob", status: "inactive", score: 82 },
+  { id: 3, name: "Charlie", status: "active", score: 88 },
+];
+
+function StatusBadge({ status }: { status: User["status"] }) {
+  return (
+    <Text color={status === "active" ? "green" : "gray"}>
+      {status.toUpperCase()}
+    </Text>
+  );
+}
+
+function App() {
+  const [sortState, setSortState] = useState<{
+    key: string;
+    direction: SortDirection;
+  }>({
+    key: "name",
+    direction: "asc",
+  });
+
+  const columns: ColumnDef<User>[] = [
+    { key: "name", title: "Name", width: 20, sortable: true },
+    {
+      key: "status",
+      title: "Status",
+      width: 10,
+      render: (val) => <StatusBadge status={val as User["status"]} />,
+    },
+    {
+      key: "score",
+      title: "Score",
+      width: 10,
+      align: "right",
+      render: (val) => <Text bold>{val}%</Text>,
+    },
+  ];
+
+  const sortedData = [...data].sort((a, b) => {
+    // ... sorting logic ...
+    return 0;
+  });
+
+  return (
+    <Table
+      data={sortedData}
+      columns={columns}
+      sortState={sortState}
+      rowStyle={(row, index) => ({
+        backgroundColor: index % 2 === 0 ? undefined : "#222",
+      })}
+    />
+  );
+}
+
+render(<App />);
+```
+
+## API
+
+### `<Table />` Properties
+
+| Prop          | Type                                        | Description                                                            | Default     |
+| ------------- | ------------------------------------------- | ---------------------------------------------------------------------- | ----------- |
+| `data`        | `T[]`                                       | Array of data objects to display.                                      | Required    |
+| `columns`     | `ColumnDef<T>[]`                            | Column definitions.                                                    | Required    |
+| `borderStyle` | `TableBorderStyle`                          | Border style (`single`, `double`, `round`, `bold`, `classic`, `none`). | `'single'`  |
+| `showHeader`  | `boolean`                                   | Whether to display the header row.                                     | `true`      |
+| `width`       | `number \| string`                          | Total width of the table.                                              | `'auto'`    |
+| `emptyText`   | `ReactNode`                                 | Content to display when data is empty.                                 | `'No data'` |
+| `sortState`   | `{ key: string, direction: SortDirection }` | Current sort state.                                                    | `undefined` |
+| `rowStyle`    | `(row: T, index: number) => Style`          | Function to dynamically style rows.                                    | `undefined` |
+
+### `ColumnDef` Properties
+
+| Prop       | Type                               | Description                                                |
+| ---------- | ---------------------------------- | ---------------------------------------------------------- |
+| `key`      | `string`                           | Unique identifier for the column.                          |
+| `title`    | `ReactNode`                        | Header title to display.                                   |
+| `dataKey`  | `keyof T`                          | Key to extract value from data object (defaults to `key`). |
+| `width`    | `number \| string`                 | Width (`10`, `'20%'`, `'auto'`).                           |
+| `align`    | `'left' \| 'center' \| 'right'`    | Text alignment.                                            |
+| `render`   | `(value, row, index) => ReactNode` | Custom render function for the cell.                       |
+| `sortable` | `boolean`                          | Whether the column shows a sort indicator.                 |
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,154 @@
+# tinky-table
+
+[English](./README.md) | [日本語](./README.ja-JP.md)
+
+[tinky](https://github.com/ByteLandTechnology/tinky) 应用程序的功能丰富且可定制的表格组件。专为终端用户界面（TUI）构建，支持排序、分页、自定义单元格渲染和灵活的布局。
+
+## 特性
+
+- 📦 **声明式列定义**: 定义包含标题、键、宽度和对齐方式的列。
+- 🎨 **灵活的样式**: 支持多种边框样式（single, double, round, bold 等）以及自定义行/表头样式。
+- 🔀 **排序**: 内置支持带视觉指示器的列排序。
+- 📄 **分页**: 易于集成分页逻辑。
+- 🖌️ **自定义渲染**: 在表格单元格内渲染任何 Tinky 组件（进度条、徽章等）。
+- 📐 **响应式布局**: 支持固定宽度、百分比宽度和自动宽度的列。
+
+## 安装
+
+```bash
+npm install tinky-table
+```
+
+## 使用方法
+
+### 基本示例
+
+```tsx
+import React from "react";
+import { render } from "tinky";
+import { Table } from "tinky-table";
+
+const data = [
+  { id: 1, name: "Alice", role: "Engineer", age: 28 },
+  { id: 2, name: "Bob", role: "Designer", age: 32 },
+  { id: 3, name: "Charlie", role: "Manager", age: 35 },
+];
+
+const columns = [
+  { key: "id", title: "ID", width: 5 },
+  { key: "name", title: "Name", width: 20 },
+  { key: "role", title: "Role", width: 15 },
+  { key: "age", title: "Age", width: 5, align: "right" },
+];
+
+function App() {
+  return <Table data={data} columns={columns} borderStyle="round" />;
+}
+
+render(<App />);
+```
+
+### 高级用法 (自定义渲染与排序)
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { Table, ColumnDef, SortDirection } from "tinky-table";
+
+interface User {
+  id: number;
+  name: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+const data: User[] = [
+  { id: 1, name: "Alice", status: "active", score: 95 },
+  { id: 2, name: "Bob", status: "inactive", score: 82 },
+  { id: 3, name: "Charlie", status: "active", score: 88 },
+];
+
+function StatusBadge({ status }: { status: User["status"] }) {
+  return (
+    <Text color={status === "active" ? "green" : "gray"}>
+      {status.toUpperCase()}
+    </Text>
+  );
+}
+
+function App() {
+  const [sortState, setSortState] = useState<{
+    key: string;
+    direction: SortDirection;
+  }>({
+    key: "name",
+    direction: "asc",
+  });
+
+  const columns: ColumnDef<User>[] = [
+    { key: "name", title: "Name", width: 20, sortable: true },
+    {
+      key: "status",
+      title: "Status",
+      width: 10,
+      render: (val) => <StatusBadge status={val as User["status"]} />,
+    },
+    {
+      key: "score",
+      title: "Score",
+      width: 10,
+      align: "right",
+      render: (val) => <Text bold>{val}%</Text>,
+    },
+  ];
+
+  const sortedData = [...data].sort((a, b) => {
+    // ... 排序逻辑 ...
+    return 0;
+  });
+
+  return (
+    <Table
+      data={sortedData}
+      columns={columns}
+      sortState={sortState}
+      rowStyle={(row, index) => ({
+        backgroundColor: index % 2 === 0 ? undefined : "#222",
+      })}
+    />
+  );
+}
+
+render(<App />);
+```
+
+## API
+
+### `<Table />` 属性
+
+| 属性          | 类型                                        | 描述                                                                | 默认值      |
+| ------------- | ------------------------------------------- | ------------------------------------------------------------------- | ----------- |
+| `data`        | `T[]`                                       | 要显示的数据对象数组。                                              | 必填        |
+| `columns`     | `ColumnDef<T>[]`                            | 列定义。                                                            | 必填        |
+| `borderStyle` | `TableBorderStyle`                          | 边框样式 (`single`, `double`, `round`, `bold`, `classic`, `none`)。 | `'single'`  |
+| `showHeader`  | `boolean`                                   | 是否显示表头行。                                                    | `true`      |
+| `width`       | `number \| string`                          | 表格的总宽度。                                                      | `'auto'`    |
+| `emptyText`   | `ReactNode`                                 | 数据为空时显示的内容。                                              | `'No data'` |
+| `sortState`   | `{ key: string, direction: SortDirection }` | 当前排序状态。                                                      | `undefined` |
+| `rowStyle`    | `(row: T, index: number) => Style`          | 动态设置行样式的函数。                                              | `undefined` |
+
+### `ColumnDef` 属性
+
+| 属性       | 类型                               | 描述                                     |
+| ---------- | ---------------------------------- | ---------------------------------------- |
+| `key`      | `string`                           | 列的唯一标识符。                         |
+| `title`    | `ReactNode`                        | 要显示的表头标题。                       |
+| `dataKey`  | `keyof T`                          | 从数据对象中提取值的键（默认为 `key`）。 |
+| `width`    | `number \| string`                 | 宽度 (`10`, `'20%'`, `'auto'`)。         |
+| `align`    | `'left' \| 'center' \| 'right'`    | 文本对齐方式。                           |
+| `render`   | `(value, row, index) => ReactNode` | 单元格的自定义渲染函数。                 |
+| `sortable` | `boolean`                          | 列是否显示排序指示器。                   |
+
+## 许可证
+
+MIT

package/lib/components/Table.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @fileoverview Main Table component for tinky-table.
+ * @module tinky-table/Table
+ */
+import { type TableProps, type RowData } from "../types.js";
+export declare function Table<T extends RowData>({ data, columns, borderStyle, showHeader, emptyText, sortState, pagination, headerStyle, rowStyle, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/Table.js

@@ -0,0 +1,161 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @fileoverview Main Table component for tinky-table.
+ * @module tinky-table/Table
+ */
+var react_1 = __importDefault(require("react"));
+var tinky_1 = require("tinky");
+var border_js_1 = require("../utils/border.js");
+var column_width_js_1 = require("../utils/column-width.js");
+/**
+ * Get value from row data by column definition.
+ */
+/**
+ * Retrieves the value of a specific cell from a data row using the column definition.
+ *
+ * @template T - The type of the row data object.
+ * @param row - The data object for the current row.
+ * @param col - The column definition containing the key or dataKey.
+ * @returns The value extracted from the row.
+ */
+function getCellValue(row, col) {
+    var _a;
+    var key = (_a = col.dataKey) !== null && _a !== void 0 ? _a : col.key;
+    return row[key];
+}
+/**
+ * Render sort indicator for sortable columns.
+ */
+/**
+ * Renders the visual indicator for the current sort direction.
+ *
+ * @param direction - The current sort direction ('asc', 'desc', or null).
+ * @returns A string representing the sort arrow (e.g., " ▲", " ▼") or an empty string.
+ */
+function renderSortIndicator(direction) {
+    switch (direction) {
+        case "asc":
+            return " ▲";
+        case "desc":
+            return " ▼";
+        default:
+            return "";
+    }
+}
+/**
+ * Internal component that renders horizontal separator lines.
+ *
+ * Used for:
+ * - Top border of the table
+ * - Separator between header and body
+ * - Bottom border of the table
+ *
+ * Memoized to prevent unnecessary re-calculations of the separator string during re-renders.
+ *
+ * @internal
+ * @param props - Component properties
+ */
+var TableSeparator = react_1.default.memo(function TableSeparator(_a) {
+    var columns = _a.columns, gridTemplate = _a.gridTemplate, borderChars = _a.borderChars, noBorder = _a.noBorder, position = _a.position;
+    var leftChar = position === "top"
+        ? borderChars.topLeft
+        : position === "bottom"
+            ? borderChars.bottomLeft
+            : borderChars.leftCross;
+    var rightChar = position === "top"
+        ? borderChars.topRight
+        : position === "bottom"
+            ? borderChars.bottomRight
+            : borderChars.rightCross;
+    var crossChar = position === "top"
+        ? borderChars.topCross
+        : position === "bottom"
+            ? borderChars.bottomCross
+            : borderChars.cross;
+    // Memoize the horizontal line to avoid recreating on each render
+    return ((0, jsx_runtime_1.jsxs)(tinky_1.Box, { display: "grid", gridTemplateColumns: gridTemplate, children: [!noBorder && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: leftChar }), columns.map(function (_, i) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(tinky_1.Separator, { char: borderChars.horizontal }), !noBorder && ((0, jsx_runtime_1.jsx)(tinky_1.Text, { children: i === columns.length - 1 ? rightChar : crossChar }))] }, i)); })] }));
+});
+/**
+ * Memoized row component to prevent unnecessary re-renders.
+ * Each row is only re-rendered when its props change.
+ */
+/**
+ * Internal memoized component for rendering a single data row.
+ *
+ * Performance optimization:
+ * - Only re-renders if the specific row data, index, or table configuration changes.
+ * - Prevents rerendering all rows when unrelated state changes (e.g. only one row updates).
+ *
+ * @internal
+ * @template T - The row data type.
+ */
+var MemoizedTableRow = react_1.default.memo(function TableRowInner(_a) {
+    var row = _a.row, rowIndex = _a.rowIndex, columns = _a.columns, gridTemplate = _a.gridTemplate, borderChars = _a.borderChars, noBorder = _a.noBorder, rowStyle = _a.rowStyle;
+    var customRowStyle = rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle(row, rowIndex);
+    return ((0, jsx_runtime_1.jsxs)(tinky_1.Box, __assign({ display: "grid", gridTemplateColumns: gridTemplate }, customRowStyle, { children: [!noBorder && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChars.vertical }), columns.map(function (col) {
+                var value = getCellValue(row, col);
+                var content = col.render
+                    ? col.render(value, row, rowIndex)
+                    : String(value !== null && value !== void 0 ? value : "");
+                var align = col.align === "right"
+                    ? "flex-end"
+                    : col.align === "center"
+                        ? "center"
+                        : "flex-start";
+                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(tinky_1.Box, { flexGrow: 1, justifyContent: align, children: typeof content === "string" ? ((0, jsx_runtime_1.jsx)(tinky_1.Text, { wrap: "truncate", children: content })) : (content) }), !noBorder && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChars.vertical })] }, col.key));
+            })] })));
+});
+function Table(_a) {
+    var data = _a.data, columns = _a.columns, _b = _a.borderStyle, borderStyle = _b === void 0 ? "single" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.emptyText, emptyText = _d === void 0 ? "No data" : _d, sortState = _a.sortState, pagination = _a.pagination, headerStyle = _a.headerStyle, rowStyle = _a.rowStyle;
+    var borderChars = (0, border_js_1.getBorderChars)(borderStyle);
+    var contentWidths = react_1.default.useMemo(function () { return (0, column_width_js_1.columnsToGridTemplate)(columns); }, [columns]);
+    var noBorder = borderStyle === "none";
+    // Build grid template: border, col, border, col, ..., border
+    var gridTemplate = react_1.default.useMemo(function () {
+        var gt = [];
+        if (!noBorder)
+            gt.push(1); // Left border
+        contentWidths.forEach(function (w) {
+            gt.push(w);
+            if (!noBorder)
+                gt.push(1); // Right/Sep border
+        });
+        return gt;
+    }, [contentWidths, noBorder]);
+    // Pagination logic
+    var displayData = data;
+    if (pagination) {
+        var start = (pagination.page - 1) * pagination.pageSize;
+        var end = start + pagination.pageSize;
+        displayData = data.slice(start, end);
+    }
+    return ((0, jsx_runtime_1.jsxs)(tinky_1.Box, { flexDirection: "column", children: [!noBorder && ((0, jsx_runtime_1.jsx)(TableSeparator, { position: "top", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder })), showHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(tinky_1.Box, __assign({ display: "grid", gridTemplateColumns: gridTemplate }, headerStyle, { children: [!noBorder && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChars.vertical }), columns.map(function (col) {
+                                var _a;
+                                var sortIndicator = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === col.key
+                                    ? renderSortIndicator(sortState.direction)
+                                    : "";
+                                var align = col.align === "right"
+                                    ? "flex-end"
+                                    : col.align === "center"
+                                        ? "center"
+                                        : "flex-start";
+                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(tinky_1.Box, { flexGrow: 1, justifyContent: align, children: (0, jsx_runtime_1.jsxs)(tinky_1.Text, { bold: true, wrap: "truncate", children: [String((_a = col.title) !== null && _a !== void 0 ? _a : col.key), sortIndicator] }) }), !noBorder && ((0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChars.vertical }))] }, col.key));
+                            })] })), !noBorder && ((0, jsx_runtime_1.jsx)(TableSeparator, { position: "middle", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder }))] })), displayData.length === 0 ? ((0, jsx_runtime_1.jsx)(tinky_1.Box, { justifyContent: "center", borderStyle: !noBorder ? borderStyle : undefined, children: (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: emptyText }) })) : (displayData.map(function (row, rowIndex) { return ((0, jsx_runtime_1.jsx)(MemoizedTableRow, { row: row, rowIndex: rowIndex, columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder, rowStyle: rowStyle }, rowIndex)); })), !noBorder && displayData.length > 0 && ((0, jsx_runtime_1.jsx)(TableSeparator, { position: "bottom", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder })), pagination && ((0, jsx_runtime_1.jsx)(tinky_1.Box, { marginTop: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(tinky_1.Text, { dimColor: true, children: ["Page ", pagination.page, " of", " ", Math.ceil(pagination.total / pagination.pageSize)] }) }))] }));
+}

package/lib/components/TableCell.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview TableCell component for rendering individual table cells.
+ * @module tinky-table/TableCell
+ */
+import { type TableCellProps } from "../types.js";
+/**
+ * TableCell renders an individual cell in the table.
+ *
+ * The cell width is handled by the parent Grid layout.
+ * Text truncation is handled by tinky's Text component wrap property.
+ *
+ * @param props - Cell properties
+ * @returns The rendered cell
+ *
+ * @example
+ * ```tsx
+ * <TableCell width={20} align="right" isLast={false} borderChar="│">
+ *   123.45
+ * </TableCell>
+ * ```
+ */
+export declare function TableCell({ children, align, isLast, borderChar, }: TableCellProps): import("react/jsx-runtime").JSX.Element;