tinky-table 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Table.js +35 -57
- package/lib/components/TableCell.js +5 -9
- package/lib/components/TableHeader.js +10 -26
- package/lib/components/TableRow.js +4 -19
- package/lib/index.js +6 -16
- package/lib/types.js +1 -2
- package/lib/utils/border.js +14 -19
- package/lib/utils/column-width.js +5 -9
- package/package.json +7 -3
package/lib/components/Table.js
CHANGED
|
@@ -1,29 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Table = Table;
|
|
18
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
19
2
|
/**
|
|
20
3
|
* @fileoverview Main Table component for tinky-table.
|
|
21
4
|
* @module tinky-table/Table
|
|
22
5
|
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { Box, Text, Separator } from "tinky";
|
|
8
|
+
import { getBorderChars } from "../utils/border.js";
|
|
9
|
+
import { columnsToGridTemplate, } from "../utils/column-width.js";
|
|
27
10
|
/**
|
|
28
11
|
* Get value from row data by column definition.
|
|
29
12
|
*/
|
|
@@ -36,8 +19,7 @@ var column_width_js_1 = require("../utils/column-width.js");
|
|
|
36
19
|
* @returns The value extracted from the row.
|
|
37
20
|
*/
|
|
38
21
|
function getCellValue(row, col) {
|
|
39
|
-
|
|
40
|
-
var key = (_a = col.dataKey) !== null && _a !== void 0 ? _a : col.key;
|
|
22
|
+
const key = col.dataKey ?? col.key;
|
|
41
23
|
return row[key];
|
|
42
24
|
}
|
|
43
25
|
/**
|
|
@@ -72,25 +54,24 @@ function renderSortIndicator(direction) {
|
|
|
72
54
|
* @internal
|
|
73
55
|
* @param props - Component properties
|
|
74
56
|
*/
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var leftChar = position === "top"
|
|
57
|
+
const TableSeparator = React.memo(function TableSeparator({ columns, gridTemplate, borderChars, noBorder, position, }) {
|
|
58
|
+
const leftChar = position === "top"
|
|
78
59
|
? borderChars.topLeft
|
|
79
60
|
: position === "bottom"
|
|
80
61
|
? borderChars.bottomLeft
|
|
81
62
|
: borderChars.leftCross;
|
|
82
|
-
|
|
63
|
+
const rightChar = position === "top"
|
|
83
64
|
? borderChars.topRight
|
|
84
65
|
: position === "bottom"
|
|
85
66
|
? borderChars.bottomRight
|
|
86
67
|
: borderChars.rightCross;
|
|
87
|
-
|
|
68
|
+
const crossChar = position === "top"
|
|
88
69
|
? borderChars.topCross
|
|
89
70
|
: position === "bottom"
|
|
90
71
|
? borderChars.bottomCross
|
|
91
72
|
: borderChars.cross;
|
|
92
73
|
// Memoize the horizontal line to avoid recreating on each render
|
|
93
|
-
return ((
|
|
74
|
+
return (_jsxs(Box, { display: "grid", gridTemplateColumns: gridTemplate, children: [!noBorder && _jsx(Text, { children: leftChar }), columns.map((_, i) => (_jsxs(React.Fragment, { children: [_jsx(Separator, { char: borderChars.horizontal }), !noBorder && (_jsx(Text, { children: i === columns.length - 1 ? rightChar : crossChar }))] }, i)))] }));
|
|
94
75
|
});
|
|
95
76
|
/**
|
|
96
77
|
* Memoized row component to prevent unnecessary re-renders.
|
|
@@ -106,33 +87,31 @@ var TableSeparator = react_1.default.memo(function TableSeparator(_a) {
|
|
|
106
87
|
* @internal
|
|
107
88
|
* @template T - The row data type.
|
|
108
89
|
*/
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
var content = col.render
|
|
90
|
+
const MemoizedTableRow = React.memo(function TableRowInner({ row, rowIndex, columns, gridTemplate, borderChars, noBorder, rowStyle, }) {
|
|
91
|
+
const customRowStyle = rowStyle?.(row, rowIndex);
|
|
92
|
+
return (_jsxs(Box, { display: "grid", gridTemplateColumns: gridTemplate, ...customRowStyle, children: [!noBorder && _jsx(Text, { children: borderChars.vertical }), columns.map((col) => {
|
|
93
|
+
const value = getCellValue(row, col);
|
|
94
|
+
const content = col.render
|
|
115
95
|
? col.render(value, row, rowIndex)
|
|
116
|
-
: String(value
|
|
117
|
-
|
|
96
|
+
: String(value ?? "");
|
|
97
|
+
const align = col.align === "right"
|
|
118
98
|
? "flex-end"
|
|
119
99
|
: col.align === "center"
|
|
120
100
|
? "center"
|
|
121
101
|
: "flex-start";
|
|
122
|
-
return ((
|
|
123
|
-
})] }))
|
|
102
|
+
return (_jsxs(React.Fragment, { children: [_jsx(Box, { flexGrow: 1, justifyContent: align, children: typeof content === "string" ? (_jsx(Text, { wrap: "truncate", children: content })) : (content) }), !noBorder && _jsx(Text, { children: borderChars.vertical })] }, col.key));
|
|
103
|
+
})] }));
|
|
124
104
|
});
|
|
125
|
-
function Table(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
var noBorder = borderStyle === "none";
|
|
105
|
+
export function Table({ data, columns, borderStyle = "single", showHeader = true, emptyText = "No data", sortState, pagination, headerStyle, rowStyle, }) {
|
|
106
|
+
const borderChars = getBorderChars(borderStyle);
|
|
107
|
+
const contentWidths = React.useMemo(() => columnsToGridTemplate(columns), [columns]);
|
|
108
|
+
const noBorder = borderStyle === "none";
|
|
130
109
|
// Build grid template: border, col, border, col, ..., border
|
|
131
|
-
|
|
132
|
-
|
|
110
|
+
const gridTemplate = React.useMemo(() => {
|
|
111
|
+
const gt = [];
|
|
133
112
|
if (!noBorder)
|
|
134
113
|
gt.push(1); // Left border
|
|
135
|
-
contentWidths.forEach(
|
|
114
|
+
contentWidths.forEach((w) => {
|
|
136
115
|
gt.push(w);
|
|
137
116
|
if (!noBorder)
|
|
138
117
|
gt.push(1); // Right/Sep border
|
|
@@ -140,22 +119,21 @@ function Table(_a) {
|
|
|
140
119
|
return gt;
|
|
141
120
|
}, [contentWidths, noBorder]);
|
|
142
121
|
// Pagination logic
|
|
143
|
-
|
|
122
|
+
let displayData = data;
|
|
144
123
|
if (pagination) {
|
|
145
|
-
|
|
146
|
-
|
|
124
|
+
const start = (pagination.page - 1) * pagination.pageSize;
|
|
125
|
+
const end = start + pagination.pageSize;
|
|
147
126
|
displayData = data.slice(start, end);
|
|
148
127
|
}
|
|
149
|
-
return ((
|
|
150
|
-
|
|
151
|
-
var sortIndicator = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === col.key
|
|
128
|
+
return (_jsxs(Box, { flexDirection: "column", children: [!noBorder && (_jsx(TableSeparator, { position: "top", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder })), showHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "grid", gridTemplateColumns: gridTemplate, ...headerStyle, children: [!noBorder && _jsx(Text, { children: borderChars.vertical }), columns.map((col) => {
|
|
129
|
+
const sortIndicator = sortState?.key === col.key
|
|
152
130
|
? renderSortIndicator(sortState.direction)
|
|
153
131
|
: "";
|
|
154
|
-
|
|
132
|
+
const align = col.align === "right"
|
|
155
133
|
? "flex-end"
|
|
156
134
|
: col.align === "center"
|
|
157
135
|
? "center"
|
|
158
136
|
: "flex-start";
|
|
159
|
-
return ((
|
|
160
|
-
})] })
|
|
137
|
+
return (_jsxs(React.Fragment, { children: [_jsx(Box, { flexGrow: 1, justifyContent: align, children: _jsxs(Text, { bold: true, wrap: "truncate", children: [String(col.title ?? col.key), sortIndicator] }) }), !noBorder && (_jsx(Text, { children: borderChars.vertical }))] }, col.key));
|
|
138
|
+
})] }), !noBorder && (_jsx(TableSeparator, { position: "middle", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder }))] })), displayData.length === 0 ? (_jsx(Box, { justifyContent: "center", borderStyle: !noBorder ? borderStyle : undefined, children: _jsx(Text, { children: emptyText }) })) : (displayData.map((row, rowIndex) => (_jsx(MemoizedTableRow, { row: row, rowIndex: rowIndex, columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder, rowStyle: rowStyle }, rowIndex)))), !noBorder && displayData.length > 0 && (_jsx(TableSeparator, { position: "bottom", columns: columns, gridTemplate: gridTemplate, borderChars: borderChars, noBorder: noBorder })), pagination && (_jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["Page ", pagination.page, " of", " ", Math.ceil(pagination.total / pagination.pageSize)] }) }))] }));
|
|
161
139
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TableCell = TableCell;
|
|
4
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
2
|
/**
|
|
6
3
|
* @fileoverview TableCell component for rendering individual table cells.
|
|
7
4
|
* @module tinky-table/TableCell
|
|
8
5
|
*/
|
|
9
|
-
|
|
6
|
+
import { Box, Text } from "tinky";
|
|
10
7
|
/**
|
|
11
8
|
* TableCell renders an individual cell in the table.
|
|
12
9
|
*
|
|
@@ -23,13 +20,12 @@ var tinky_1 = require("tinky");
|
|
|
23
20
|
* </TableCell>
|
|
24
21
|
* ```
|
|
25
22
|
*/
|
|
26
|
-
function TableCell(
|
|
27
|
-
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;
|
|
23
|
+
export function TableCell({ children, align = "left", isLast = false, borderChar = "│", }) {
|
|
28
24
|
// Map align to justifyContent
|
|
29
|
-
|
|
25
|
+
const justifyContent = align === "right"
|
|
30
26
|
? "flex-end"
|
|
31
27
|
: align === "center"
|
|
32
28
|
? "center"
|
|
33
29
|
: "flex-start";
|
|
34
|
-
return ((
|
|
30
|
+
return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, justifyContent: justifyContent, children: _jsx(Text, { wrap: "truncate", children: children }) }), !isLast && _jsx(Text, { children: borderChar })] }));
|
|
35
31
|
}
|
|
@@ -1,23 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.TableHeader = TableHeader;
|
|
15
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
16
2
|
/**
|
|
17
3
|
* @fileoverview TableHeader component for rendering table headers.
|
|
18
4
|
* @module tinky-table/TableHeader
|
|
19
5
|
*/
|
|
20
|
-
|
|
6
|
+
import { Box, Text } from "tinky";
|
|
21
7
|
/**
|
|
22
8
|
* Renders the sort indicator arrow.
|
|
23
9
|
*
|
|
@@ -59,23 +45,21 @@ function getSortIndicator(direction) {
|
|
|
59
45
|
* />
|
|
60
46
|
* ```
|
|
61
47
|
*/
|
|
62
|
-
function TableHeader(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
var _a;
|
|
66
|
-
var isLast = index === columns.length - 1;
|
|
48
|
+
export function TableHeader({ columns, borderChar = "│", sortState, style, }) {
|
|
49
|
+
return (_jsx(Box, { flexDirection: "row", ...style, children: columns.map((col, index) => {
|
|
50
|
+
const isLast = index === columns.length - 1;
|
|
67
51
|
// Get title as string
|
|
68
|
-
|
|
52
|
+
const titleText = String(col.title ?? col.key);
|
|
69
53
|
// Add sort indicator if this column is sorted
|
|
70
|
-
|
|
54
|
+
const sortIndicator = sortState?.key === col.key
|
|
71
55
|
? getSortIndicator(sortState.direction)
|
|
72
56
|
: "";
|
|
73
57
|
// Map align to justifyContent
|
|
74
|
-
|
|
58
|
+
const justifyContent = col.align === "right"
|
|
75
59
|
? "flex-end"
|
|
76
60
|
: col.align === "center"
|
|
77
61
|
? "center"
|
|
78
62
|
: "flex-start";
|
|
79
|
-
return ((
|
|
80
|
-
}) }))
|
|
63
|
+
return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Box, { flexGrow: 1, justifyContent: justifyContent, children: _jsxs(Text, { bold: true, wrap: "truncate", children: [titleText, sortIndicator] }) }), !isLast && _jsx(Text, { children: borderChar })] }, col.key));
|
|
64
|
+
}) }));
|
|
81
65
|
}
|
|
@@ -1,23 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.TableRow = TableRow;
|
|
15
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
2
|
/**
|
|
17
3
|
* @fileoverview TableRow component for rendering table rows.
|
|
18
4
|
* @module tinky-table/TableRow
|
|
19
5
|
*/
|
|
20
|
-
|
|
6
|
+
import { Box } from "tinky";
|
|
21
7
|
/**
|
|
22
8
|
* TableRow renders a single row in the table.
|
|
23
9
|
*
|
|
@@ -35,7 +21,6 @@ var tinky_1 = require("tinky");
|
|
|
35
21
|
* </TableRow>
|
|
36
22
|
* ```
|
|
37
23
|
*/
|
|
38
|
-
function TableRow(
|
|
39
|
-
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(tinky_1.Box, __assign({ flexDirection: "row" }, style, { children: children })));
|
|
24
|
+
export function TableRow({ children, style }) {
|
|
25
|
+
return (_jsx(Box, { flexDirection: "row", ...style, children: children }));
|
|
41
26
|
}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* tinky-table - A feature-rich Table component for tinky.
|
|
4
3
|
*
|
|
@@ -22,21 +21,12 @@
|
|
|
22
21
|
* <Table data={data} columns={columns} />
|
|
23
22
|
* ```
|
|
24
23
|
*/
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.columnsToGridTemplate = exports.renderSeparator = exports.getBorderChars = exports.TableHeader = exports.TableRow = exports.TableCell = exports.Table = void 0;
|
|
27
24
|
// Main component
|
|
28
|
-
|
|
29
|
-
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_js_1.Table; } });
|
|
25
|
+
export { Table } from "./components/Table.js";
|
|
30
26
|
// Sub-components
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return TableRow_js_1.TableRow; } });
|
|
35
|
-
var TableHeader_js_1 = require("./components/TableHeader.js");
|
|
36
|
-
Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return TableHeader_js_1.TableHeader; } });
|
|
27
|
+
export { TableCell } from "./components/TableCell.js";
|
|
28
|
+
export { TableRow } from "./components/TableRow.js";
|
|
29
|
+
export { TableHeader } from "./components/TableHeader.js";
|
|
37
30
|
// Utilities
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
Object.defineProperty(exports, "renderSeparator", { enumerable: true, get: function () { return border_js_1.renderSeparator; } });
|
|
41
|
-
var column_width_js_1 = require("./utils/column-width.js");
|
|
42
|
-
Object.defineProperty(exports, "columnsToGridTemplate", { enumerable: true, get: function () { return column_width_js_1.columnsToGridTemplate; } });
|
|
31
|
+
export { getBorderChars, renderSeparator } from "./utils/border.js";
|
|
32
|
+
export { columnsToGridTemplate, } from "./utils/column-width.js";
|
package/lib/types.js
CHANGED
package/lib/utils/border.js
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* @fileoverview Border character mappings for different table styles.
|
|
4
3
|
* @module tinky-table/utils/border
|
|
5
4
|
*/
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.getBorderChars = getBorderChars;
|
|
8
|
-
exports.renderSeparator = renderSeparator;
|
|
9
5
|
/**
|
|
10
6
|
* Border characters for the 'single' style (thin lines).
|
|
11
7
|
*/
|
|
12
|
-
|
|
8
|
+
const SINGLE_BORDER = {
|
|
13
9
|
top: "─",
|
|
14
10
|
bottom: "─",
|
|
15
11
|
left: "│",
|
|
@@ -29,7 +25,7 @@ var SINGLE_BORDER = {
|
|
|
29
25
|
/**
|
|
30
26
|
* Border characters for the 'double' style (double lines).
|
|
31
27
|
*/
|
|
32
|
-
|
|
28
|
+
const DOUBLE_BORDER = {
|
|
33
29
|
top: "═",
|
|
34
30
|
bottom: "═",
|
|
35
31
|
left: "║",
|
|
@@ -49,7 +45,7 @@ var DOUBLE_BORDER = {
|
|
|
49
45
|
/**
|
|
50
46
|
* Border characters for the 'round' style (rounded corners).
|
|
51
47
|
*/
|
|
52
|
-
|
|
48
|
+
const ROUND_BORDER = {
|
|
53
49
|
top: "─",
|
|
54
50
|
bottom: "─",
|
|
55
51
|
left: "│",
|
|
@@ -69,7 +65,7 @@ var ROUND_BORDER = {
|
|
|
69
65
|
/**
|
|
70
66
|
* Border characters for the 'bold' style (thick lines).
|
|
71
67
|
*/
|
|
72
|
-
|
|
68
|
+
const BOLD_BORDER = {
|
|
73
69
|
top: "━",
|
|
74
70
|
bottom: "━",
|
|
75
71
|
left: "┃",
|
|
@@ -89,7 +85,7 @@ var BOLD_BORDER = {
|
|
|
89
85
|
/**
|
|
90
86
|
* Border characters for the 'classic' style (ASCII only).
|
|
91
87
|
*/
|
|
92
|
-
|
|
88
|
+
const CLASSIC_BORDER = {
|
|
93
89
|
top: "-",
|
|
94
90
|
bottom: "-",
|
|
95
91
|
left: "|",
|
|
@@ -109,7 +105,7 @@ var CLASSIC_BORDER = {
|
|
|
109
105
|
/**
|
|
110
106
|
* Empty border (no visible border characters).
|
|
111
107
|
*/
|
|
112
|
-
|
|
108
|
+
const NO_BORDER = {
|
|
113
109
|
top: " ",
|
|
114
110
|
bottom: " ",
|
|
115
111
|
left: " ",
|
|
@@ -129,7 +125,7 @@ var NO_BORDER = {
|
|
|
129
125
|
/**
|
|
130
126
|
* Map of border styles to their character sets.
|
|
131
127
|
*/
|
|
132
|
-
|
|
128
|
+
const BORDER_STYLES = {
|
|
133
129
|
single: SINGLE_BORDER,
|
|
134
130
|
double: DOUBLE_BORDER,
|
|
135
131
|
round: ROUND_BORDER,
|
|
@@ -151,9 +147,8 @@ var BORDER_STYLES = {
|
|
|
151
147
|
* console.log(chars.topLeft); // '┌'
|
|
152
148
|
* ```
|
|
153
149
|
*/
|
|
154
|
-
function getBorderChars(style) {
|
|
155
|
-
|
|
156
|
-
return (_a = BORDER_STYLES[style]) !== null && _a !== void 0 ? _a : SINGLE_BORDER;
|
|
150
|
+
export function getBorderChars(style) {
|
|
151
|
+
return BORDER_STYLES[style] ?? SINGLE_BORDER;
|
|
157
152
|
}
|
|
158
153
|
/**
|
|
159
154
|
* Renders a horizontal separator line for the table.
|
|
@@ -169,22 +164,22 @@ function getBorderChars(style) {
|
|
|
169
164
|
* // Returns: '┌──────────┬───────────────┬────────┐'
|
|
170
165
|
* ```
|
|
171
166
|
*/
|
|
172
|
-
function renderSeparator(columnWidths, chars, position) {
|
|
173
|
-
|
|
167
|
+
export function renderSeparator(columnWidths, chars, position) {
|
|
168
|
+
const leftChar = position === "top"
|
|
174
169
|
? chars.topLeft
|
|
175
170
|
: position === "bottom"
|
|
176
171
|
? chars.bottomLeft
|
|
177
172
|
: chars.leftCross;
|
|
178
|
-
|
|
173
|
+
const rightChar = position === "top"
|
|
179
174
|
? chars.topRight
|
|
180
175
|
: position === "bottom"
|
|
181
176
|
? chars.bottomRight
|
|
182
177
|
: chars.rightCross;
|
|
183
|
-
|
|
178
|
+
const crossChar = position === "top"
|
|
184
179
|
? chars.topCross
|
|
185
180
|
: position === "bottom"
|
|
186
181
|
? chars.bottomCross
|
|
187
182
|
: chars.cross;
|
|
188
|
-
|
|
183
|
+
const segments = columnWidths.map((width) => chars.horizontal.repeat(width));
|
|
189
184
|
return leftChar + segments.join(crossChar) + rightChar;
|
|
190
185
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* @fileoverview Column width utilities for tinky-table.
|
|
4
3
|
* @module tinky-table/utils/column-width
|
|
5
4
|
*
|
|
6
5
|
* Provides utilities for converting column definitions to grid template format.
|
|
7
6
|
*/
|
|
8
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
-
exports.columnsToGridTemplate = columnsToGridTemplate;
|
|
10
7
|
/**
|
|
11
8
|
* Creates a fractional unit value for grid templates.
|
|
12
9
|
*
|
|
@@ -14,7 +11,7 @@ exports.columnsToGridTemplate = columnsToGridTemplate;
|
|
|
14
11
|
* @returns A TrackSizingFunction object
|
|
15
12
|
*/
|
|
16
13
|
function fr(value) {
|
|
17
|
-
return { min: "auto", max:
|
|
14
|
+
return { min: "auto", max: `${value}fr` };
|
|
18
15
|
}
|
|
19
16
|
/**
|
|
20
17
|
* Converts column width definitions to grid template format.
|
|
@@ -38,10 +35,9 @@ function fr(value) {
|
|
|
38
35
|
* // Returns: [20, fr(1), 10]
|
|
39
36
|
* ```
|
|
40
37
|
*/
|
|
41
|
-
function columnsToGridTemplate(columns) {
|
|
42
|
-
return columns.map(
|
|
43
|
-
|
|
44
|
-
var width = (_a = col.width) !== null && _a !== void 0 ? _a : "auto";
|
|
38
|
+
export function columnsToGridTemplate(columns) {
|
|
39
|
+
return columns.map((col) => {
|
|
40
|
+
const width = col.width ?? "auto";
|
|
45
41
|
if (typeof width === "number") {
|
|
46
42
|
return width;
|
|
47
43
|
}
|
|
@@ -51,7 +47,7 @@ function columnsToGridTemplate(columns) {
|
|
|
51
47
|
}
|
|
52
48
|
if (typeof width === "string" && width.endsWith("%")) {
|
|
53
49
|
// For percentage, use fr with the percentage value as relative weight
|
|
54
|
-
|
|
50
|
+
const percent = parseInt(width, 10);
|
|
55
51
|
return fr(percent);
|
|
56
52
|
}
|
|
57
53
|
return fr(1);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tinky-table",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A feature-rich, customizable Table component for tinky applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tinky",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"author": {
|
|
25
|
-
"name": "
|
|
25
|
+
"name": "ByteLand Technology Limited"
|
|
26
26
|
},
|
|
27
27
|
"type": "module",
|
|
28
28
|
"main": "./lib/index.js",
|
|
@@ -46,16 +46,20 @@
|
|
|
46
46
|
"@commitlint/cli": "^20.3.0",
|
|
47
47
|
"@commitlint/config-conventional": "^20.3.0",
|
|
48
48
|
"@semantic-release/changelog": "^6.0.3",
|
|
49
|
+
"@semantic-release/commit-analyzer": "^13.0.1",
|
|
49
50
|
"@semantic-release/git": "^10.0.1",
|
|
50
|
-
"@semantic-release/github": "^12.0.
|
|
51
|
+
"@semantic-release/github": "^12.0.2",
|
|
51
52
|
"@semantic-release/npm": "^13.1.3",
|
|
53
|
+
"@semantic-release/release-notes-generator": "^14.1.0",
|
|
52
54
|
"@types/bun": "^1.3.6",
|
|
55
|
+
"conventional-changelog-conventionalcommits": "^9.1.0",
|
|
53
56
|
"eslint": "^9.39.2",
|
|
54
57
|
"eslint-plugin-react": "^7.37.5",
|
|
55
58
|
"husky": "^9.1.7",
|
|
56
59
|
"jiti": "^2.6.1",
|
|
57
60
|
"lint-staged": "^16.2.7",
|
|
58
61
|
"prettier": "^3.7.4",
|
|
62
|
+
"semantic-release": "^25.0.2",
|
|
59
63
|
"typedoc": "^0.28.16",
|
|
60
64
|
"typedoc-plugin-markdown": "^4.9.0",
|
|
61
65
|
"typescript-eslint": "^8.53.0"
|