tinky-table 0.1.0

package/lib/components/TableCell.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = TableCell;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @fileoverview TableCell component for rendering individual table cells.
+ * @module tinky-table/TableCell
+ */
+var tinky_1 = require("tinky");
+/**
+ * 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>
+ * ```
+ */
+function TableCell(_a) {
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? "left" : _b, _c = _a.isLast, isLast = _c === void 0 ? false : _c, _d = _a.borderChar, borderChar = _d === void 0 ? "│" : _d;
+    // Map align to justifyContent
+    var justifyContent = align === "right"
+        ? "flex-end"
+        : align === "center"
+            ? "center"
+            : "flex-start";
+    return ((0, jsx_runtime_1.jsxs)(tinky_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(tinky_1.Box, { flexGrow: 1, justifyContent: justifyContent, children: (0, jsx_runtime_1.jsx)(tinky_1.Text, { wrap: "truncate", children: children }) }), !isLast && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChar })] }));
+}

package/lib/components/TableHeader.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview TableHeader component for rendering table headers.
+ * @module tinky-table/TableHeader
+ */
+import { type TableHeaderProps } from "../types.js";
+/**
+ * TableHeader renders the header row of the table.
+ *
+ * Displays column titles with optional sort indicators.
+ * Column widths are handled by the parent Grid layout.
+ *
+ * @param props - Header properties
+ * @returns The rendered header row
+ *
+ * @example
+ * ```tsx
+ * <TableHeader
+ *   columns={columns}
+ *   columnWidths={[20, 15, 10]}
+ *   borderChar="│"
+ *   sortState={{ key: 'name', direction: 'asc' }}
+ * />
+ * ```
+ */
+export declare function TableHeader({ columns, borderChar, sortState, style, }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/TableHeader.js

@@ -0,0 +1,81 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeader = TableHeader;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @fileoverview TableHeader component for rendering table headers.
+ * @module tinky-table/TableHeader
+ */
+var tinky_1 = require("tinky");
+/**
+ * Renders the sort indicator arrow.
+ *
+ * @param direction - Current sort direction
+ * @returns Sort indicator string
+ */
+/**
+ * Returns the visual character for the sort direction.
+ *
+ * @param direction - The current direction of sorting ('asc', 'desc', or null).
+ * @returns The character representing the sort order (e.g. " ▲" or " ▼").
+ */
+function getSortIndicator(direction) {
+    switch (direction) {
+        case "asc":
+            return " ▲";
+        case "desc":
+            return " ▼";
+        default:
+            return "";
+    }
+}
+/**
+ * TableHeader renders the header row of the table.
+ *
+ * Displays column titles with optional sort indicators.
+ * Column widths are handled by the parent Grid layout.
+ *
+ * @param props - Header properties
+ * @returns The rendered header row
+ *
+ * @example
+ * ```tsx
+ * <TableHeader
+ *   columns={columns}
+ *   columnWidths={[20, 15, 10]}
+ *   borderChar="│"
+ *   sortState={{ key: 'name', direction: 'asc' }}
+ * />
+ * ```
+ */
+function TableHeader(_a) {
+    var columns = _a.columns, _b = _a.borderChar, borderChar = _b === void 0 ? "│" : _b, sortState = _a.sortState, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(tinky_1.Box, __assign({ flexDirection: "row" }, style, { children: columns.map(function (col, index) {
+            var _a;
+            var isLast = index === columns.length - 1;
+            // Get title as string
+            var titleText = String((_a = col.title) !== null && _a !== void 0 ? _a : col.key);
+            // Add sort indicator if this column is sorted
+            var sortIndicator = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === col.key
+                ? getSortIndicator(sortState.direction)
+                : "";
+            // Map align to justifyContent
+            var justifyContent = col.align === "right"
+                ? "flex-end"
+                : col.align === "center"
+                    ? "center"
+                    : "flex-start";
+            return ((0, jsx_runtime_1.jsxs)(tinky_1.Box, { flexDirection: "row", flexGrow: 1, children: [(0, jsx_runtime_1.jsx)(tinky_1.Box, { flexGrow: 1, justifyContent: justifyContent, children: (0, jsx_runtime_1.jsxs)(tinky_1.Text, { bold: true, wrap: "truncate", children: [titleText, sortIndicator] }) }), !isLast && (0, jsx_runtime_1.jsx)(tinky_1.Text, { children: borderChar })] }, col.key));
+        }) })));
+}

package/lib/components/TableRow.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @fileoverview TableRow component for rendering table rows.
+ * @module tinky-table/TableRow
+ */
+import { type TableRowProps } from "../types.js";
+/**
+ * TableRow renders a single row in the table.
+ *
+ * Uses flexbox layout to arrange cells horizontally.
+ *
+ * @param props - Row properties
+ * @returns The rendered row
+ *
+ * @example
+ * ```tsx
+ * <TableRow columnWidths={[20, 15, 10]}>
+ *   <TableCell>Alice</TableCell>
+ *   <TableCell>alice@example.com</TableCell>
+ *   <TableCell>28</TableCell>
+ * </TableRow>
+ * ```
+ */
+export declare function TableRow({ children, style }: TableRowProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/TableRow.js

@@ -0,0 +1,41 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = TableRow;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @fileoverview TableRow component for rendering table rows.
+ * @module tinky-table/TableRow
+ */
+var tinky_1 = require("tinky");
+/**
+ * TableRow renders a single row in the table.
+ *
+ * Uses flexbox layout to arrange cells horizontally.
+ *
+ * @param props - Row properties
+ * @returns The rendered row
+ *
+ * @example
+ * ```tsx
+ * <TableRow columnWidths={[20, 15, 10]}>
+ *   <TableCell>Alice</TableCell>
+ *   <TableCell>alice@example.com</TableCell>
+ *   <TableCell>28</TableCell>
+ * </TableRow>
+ * ```
+ */
+function TableRow(_a) {
+    var children = _a.children, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(tinky_1.Box, __assign({ flexDirection: "row" }, style, { children: children })));
+}

package/lib/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * tinky-table - A feature-rich Table component for tinky.
+ *
+ * @packageDocumentation
+ * @module tinky-table
+ *
+ * @example
+ * ```tsx
+ * import { Table } from 'tinky-table';
+ *
+ * const data = [
+ *   { name: 'Alice', age: 28 },
+ *   { name: 'Bob', age: 32 },
+ * ];
+ *
+ * const columns = [
+ *   { key: 'name', title: 'Name', width: 20 },
+ *   { key: 'age', title: 'Age', width: 10, align: 'right' },
+ * ];
+ *
+ * <Table data={data} columns={columns} />
+ * ```
+ */
+export { Table } from "./components/Table.js";
+export { TableCell } from "./components/TableCell.js";
+export { TableRow } from "./components/TableRow.js";
+export { TableHeader } from "./components/TableHeader.js";
+export type { TableProps, ColumnDef, ColumnAlign, ColumnWidth, SortDirection, TableBorderStyle, RowData, PaginationConfig, TableCellProps, TableRowProps, TableHeaderProps, BorderChars, } from "./types.js";
+export type { Styles } from "tinky";
+export { getBorderChars, renderSeparator } from "./utils/border.js";
+export { columnsToGridTemplate, type GridTemplateValue, } from "./utils/column-width.js";

package/lib/index.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * tinky-table - A feature-rich Table component for tinky.
+ *
+ * @packageDocumentation
+ * @module tinky-table
+ *
+ * @example
+ * ```tsx
+ * import { Table } from 'tinky-table';
+ *
+ * const data = [
+ *   { name: 'Alice', age: 28 },
+ *   { name: 'Bob', age: 32 },
+ * ];
+ *
+ * const columns = [
+ *   { key: 'name', title: 'Name', width: 20 },
+ *   { key: 'age', title: 'Age', width: 10, align: 'right' },
+ * ];
+ *
+ * <Table data={data} columns={columns} />
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnsToGridTemplate = exports.renderSeparator = exports.getBorderChars = exports.TableHeader = exports.TableRow = exports.TableCell = exports.Table = void 0;
+// Main component
+var Table_js_1 = require("./components/Table.js");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_js_1.Table; } });
+// Sub-components
+var TableCell_js_1 = require("./components/TableCell.js");
+Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return TableCell_js_1.TableCell; } });
+var TableRow_js_1 = require("./components/TableRow.js");
+Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return TableRow_js_1.TableRow; } });
+var TableHeader_js_1 = require("./components/TableHeader.js");
+Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return TableHeader_js_1.TableHeader; } });
+// Utilities
+var border_js_1 = require("./utils/border.js");
+Object.defineProperty(exports, "getBorderChars", { enumerable: true, get: function () { return border_js_1.getBorderChars; } });
+Object.defineProperty(exports, "renderSeparator", { enumerable: true, get: function () { return border_js_1.renderSeparator; } });
+var column_width_js_1 = require("./utils/column-width.js");
+Object.defineProperty(exports, "columnsToGridTemplate", { enumerable: true, get: function () { return column_width_js_1.columnsToGridTemplate; } });

package/lib/types.d.ts

@@ -0,0 +1,276 @@
+/**
+ * @fileoverview Type definitions for tinky-table component.
+ * @module tinky-table/types
+ */
+import { type ReactNode } from "react";
+import { type Styles } from "tinky";
+/**
+ * Column alignment options.
+ */
+export type ColumnAlign = "left" | "center" | "right";
+/**
+ * Column width specification.
+ * - `number`: Fixed width in characters
+ * - `${number}%`: Percentage of table width
+ * - `'auto'`: Automatically calculated based on content and available space
+ */
+export type ColumnWidth = number | `${number}%` | "auto";
+/**
+ * Sort direction for sortable columns.
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * Border style options for the table.
+ */
+export type TableBorderStyle = "single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic" | "none";
+/**
+ * Column definition for the table.
+ * @template T - The type of data in each row
+ */
+export interface ColumnDef<T> {
+    /**
+     * Unique identifier for the column.
+     */
+    readonly key: string;
+    /**
+     * Header title to display.
+     */
+    readonly title: ReactNode;
+    /**
+     * The key in the data object to extract the cell's value from.
+     *
+     * Useful when the column `key` does not match the property name in the data object.
+     * If not specified, the column's `key` will be used as the property identifier.
+     */
+    readonly dataKey?: keyof T;
+    /**
+     * Column width.
+     * @default 'auto'
+     */
+    readonly width?: ColumnWidth;
+    /**
+     * Minimum column width in characters.
+     */
+    readonly minWidth?: number;
+    /**
+     * Maximum column width in characters.
+     */
+    readonly maxWidth?: number;
+    /**
+     * Text alignment within the column.
+     * @default 'left'
+     */
+    readonly align?: ColumnAlign;
+    /**
+     * Whether this column is sortable.
+     * @default false
+     */
+    readonly sortable?: boolean;
+    /**
+     * Custom render function for the cell content.
+     *
+     * Allows rendering complex React nodes (components, styled text, etc.) instead of
+     * just the raw value.
+     *
+     * @param value - The value extracted from the row using key/dataKey.
+     * @param row - The complete data object for the current row.
+     * @param rowIndex - The index of the row in the current page/dataset.
+     * @returns A ReactNode to be rendered within the cell.
+     */
+    readonly render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
+}
+/**
+ * Base type constraint for row data.
+ */
+export type RowData = Record<string, unknown>;
+/**
+ * Pagination configuration.
+ */
+export interface PaginationConfig {
+    /**
+     * Current page (1-indexed).
+     */
+    readonly page: number;
+    /**
+     * Number of rows per page.
+     */
+    readonly pageSize: number;
+    /**
+     * Total number of rows.
+     */
+    readonly total: number;
+    /**
+     * Callback when page changes.
+     */
+    readonly onChange?: (page: number) => void;
+}
+/**
+ * Props for the Table component.
+ * @template T - The type of data in each row
+ */
+export interface TableProps<T extends RowData> {
+    /**
+     * Array of data to display in the table.
+     */
+    readonly data: T[];
+    /**
+     * Column definitions.
+     */
+    readonly columns: ColumnDef<T>[];
+    /**
+     * The visual style of the table borders.
+     *
+     * Options:
+     * - `'single'`: Thin single lines (default).
+     * - `'double'`: Double lines.
+     * - `'round'`: Rounded corners with single lines.
+     * - `'bold'`: Thick/Bold lines.
+     * - `'classic'`: ASCII characters (+, -, |).
+     * - `'none'`: No visible borders.
+     *
+     * @default 'single'
+     */
+    readonly borderStyle?: TableBorderStyle;
+    /**
+     * The total width of the table.
+     *
+     * - `number`: Fixed width in characters.
+     * - `'auto'`: Expands to fill the available terminal width.
+     * - `${number}%`: Percentage of the parent container's width.
+     *
+     * @default 'auto'
+     */
+    readonly width?: number | `${number}%` | "auto";
+    /**
+     * Whether to show the table header.
+     * @default true
+     */
+    readonly showHeader?: boolean;
+    /**
+     * Content to show when data is empty.
+     * @default 'No data'
+     */
+    readonly emptyText?: ReactNode;
+    /**
+     * Sort state for the table.
+     */
+    readonly sortState?: {
+        readonly key: string;
+        readonly direction: SortDirection;
+    };
+    /**
+     * Callback when sort state changes.
+     */
+    readonly onSortChange?: (key: string, direction: SortDirection) => void;
+    /**
+     * Pagination configuration.
+     */
+    readonly pagination?: PaginationConfig;
+    /**
+     * Custom style for the header row.
+     */
+    readonly headerStyle?: Partial<Styles>;
+    /**
+     * Custom style function for data rows.
+     * @param row - The row data
+     * @param index - The row index
+     * @returns Style object for the row
+     */
+    readonly rowStyle?: (row: T, index: number) => Partial<Styles>;
+    /**
+     * Custom style for cells.
+     */
+    readonly cellStyle?: Partial<Styles>;
+}
+/**
+ * Props for TableCell component.
+ */
+export interface TableCellProps {
+    /**
+     * Cell content.
+     */
+    readonly children: ReactNode;
+    /**
+     * Cell width in characters.
+     */
+    readonly width: number;
+    /**
+     * Text alignment.
+     * @default 'left'
+     */
+    readonly align?: ColumnAlign;
+    /**
+     * Whether this is the last cell in the row.
+     * @default false
+     */
+    readonly isLast?: boolean;
+    /**
+     * Border character for column separator.
+     */
+    readonly borderChar?: string;
+}
+/**
+ * Props for TableRow component.
+ */
+export interface TableRowProps {
+    /**
+     * Row content (TableCell components).
+     */
+    readonly children: ReactNode;
+    /**
+     * Column widths for grid layout.
+     */
+    readonly columnWidths: number[];
+    /**
+     * Custom row style.
+     */
+    readonly style?: Partial<Styles>;
+}
+/**
+ * Props for TableHeader component.
+ */
+export interface TableHeaderProps {
+    /**
+     * Column definitions.
+     */
+    readonly columns: ColumnDef<RowData>[];
+    /**
+     * Calculated column widths.
+     */
+    readonly columnWidths: number[];
+    /**
+     * Border character for column separator.
+     */
+    readonly borderChar?: string;
+    /**
+     * Current sort state.
+     */
+    readonly sortState?: {
+        readonly key: string;
+        readonly direction: SortDirection;
+    };
+    /**
+     * Custom header style.
+     */
+    readonly style?: Partial<Styles>;
+}
+/**
+ * Border characters for table rendering.
+ */
+export interface BorderChars {
+    readonly top: string;
+    readonly bottom: string;
+    readonly left: string;
+    readonly right: string;
+    readonly topLeft: string;
+    readonly topRight: string;
+    readonly bottomLeft: string;
+    readonly bottomRight: string;
+    readonly cross: string;
+    readonly topCross: string;
+    readonly bottomCross: string;
+    readonly leftCross: string;
+    readonly rightCross: string;
+    readonly horizontal: string;
+    readonly vertical: string;
+}

package/lib/types.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * @fileoverview Type definitions for tinky-table component.
+ * @module tinky-table/types
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/border.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Border character mappings for different table styles.
+ * @module tinky-table/utils/border
+ */
+import { type BorderChars, type TableBorderStyle } from "../types.js";
+/**
+ * Gets the border characters for a given table border style.
+ *
+ * @param style - The border style name
+ * @returns The corresponding border character set
+ *
+ * @example
+ * ```ts
+ * const chars = getBorderChars('single');
+ * console.log(chars.topLeft); // '┌'
+ * ```
+ */
+export declare function getBorderChars(style: TableBorderStyle): BorderChars;
+/**
+ * Renders a horizontal separator line for the table.
+ *
+ * @param columnWidths - Array of column widths
+ * @param chars - Border character set
+ * @param position - Position of the separator ('top' | 'middle' | 'bottom')
+ * @returns The formatted separator string
+ *
+ * @example
+ * ```ts
+ * const sep = renderSeparator([10, 15, 8], chars, 'top');
+ * // Returns: '┌──────────┬───────────────┬────────┐'
+ * ```
+ */
+export declare function renderSeparator(columnWidths: number[], chars: BorderChars, position: "top" | "middle" | "bottom"): string;