🚀 feat(tabletron): add new function to replace terminalColumns

📦 chore(package.json): add @types/node as a dev dependency
🐛 fix(index.ts): change default export to tabletron
The new function tabletron replaces the old terminalColumns function. It has the same functionality but with a new name. The package.json file now includes @types/node as a dev dependency. The default export in index.ts is now tabletron instead of terminalColumns.

examples/auto-resize.ts

@@ -0,0 +1,32 @@
+/**
+ * Demonstrates how 'auto' splits column widths by re-rendering on terminal resize.
+ *
+ * Run the example:
+ * $ npx esno examples/auto-resize.ts
+ */
+
+import { promisify } from 'node:util'
+import ansiEscapes from 'ansi-escapes'
+import color from '@nyxb/picocolors'
+import terminalColumns from '../src'
+
+const { red, blue, green } = color
+
+const tableData = [
+   [
+      red('A'.repeat(20)),
+      blue('B'.repeat(30)),
+      green('C'.repeat(40)),
+   ],
+]
+
+function renderTable() {
+   const table = terminalColumns(tableData)
+   process.stdout.write(ansiEscapes.clearTerminal + table)
+}
+
+process.stdout.on('resize', renderTable)
+renderTable()
+
+// Keep Node.js from exiting
+promisify(setTimeout)(60 * 60 * 1000)

examples/lorem-ipsum.ts

@@ -0,0 +1,58 @@
+/**
+ * Demonstrates responsive behavior by faking the terminal width
+ * (Demo in README)
+ *
+ * Run the example in 80x27:
+ * $ npx esno examples/lorem-ipsum.ts
+ */
+
+import ansiEscapes from 'ansi-escapes';
+import { bold, underline, italic } from 'colorette';
+import terminalColumns from '../src';
+
+const tableData = [
+	[
+		italic('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus at.'),
+		underline('Sit amet luctus venenatis lectus magna. Nisi porta lorem mollis aliquam ut porttitor leo a. Sem integer vitae justo eget magna. Erat pellentesque adipiscing commodo elit.'),
+		bold('Ultrices tincidunt arcu non sodales neque. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Libero enim sed faucibus turpis in eu mi bibendum neque.'),
+	],
+];
+
+const renderTable = (stdoutColumns: number) => {
+	const table = terminalColumns(tableData, {
+		stdoutColumns,
+		columns: [
+			{
+				align: 'right',
+				paddingRight: 4,
+				paddingBottom: 1,
+			},
+			{
+				paddingRight: 4,
+				paddingBottom: 1,
+			},
+		],
+	});
+
+	process.stdout.write(`${ansiEscapes.clearTerminal + table}\n\n\n`);
+};
+
+const stdoutWidth = process.stdout.columns;
+let tableWidth = process.stdout.columns;
+let movingDown = true;
+
+setInterval(() => {
+	if (movingDown) {
+		tableWidth -= 1;
+		if (tableWidth === 30) {
+			movingDown = false;
+		}
+	} else {
+		tableWidth += 1;
+		if (tableWidth === stdoutWidth) {
+			movingDown = true;
+		}
+	}
+
+	renderTable(tableWidth);
+}, 100);

examples/responsive-table.ts

@@ -0,0 +1,157 @@
+/**
+ * Demonstrates how to make a responsive table.
+ *
+ * Run the example:
+ * $ npx esno examples/responsive-table.ts
+ */
+import { promisify } from 'util';
+import ansiEscapes from 'ansi-escapes';
+import terminalColumns from '../src';
+
+const tableData = [
+	[
+		'Jacky',
+		'Mapp',
+		'Georgian',
+		'1992-08-09',
+	],
+	[
+		'Raphaela',
+		'Gaddes',
+		'Filipino',
+		'1991-07-22',
+	],
+	[
+		'Mellie',
+		'Hassey',
+		'Dhivehi',
+		'2000-02-06',
+	],
+	[
+		'Dru',
+		'Clout',
+		'Thai',
+		'1997-09-17',
+	],
+	[
+		'Sig',
+		'Evered',
+		'Telugu',
+		'1993-12-17',
+	],
+	[
+		'Velvet',
+		'Gambrell',
+		'Telugu',
+		'1995-10-18',
+	],
+	[
+		'Alta',
+		'Bagenal',
+		'Thai',
+		'1992-06-03',
+	],
+	[
+		'Jerrome',
+		'Fosten',
+		'Kashmiri',
+		'2000-09-11',
+	],
+	[
+		'Derk',
+		'Emons',
+		'Ndebele',
+		'1994-04-30',
+	],
+	[
+		'Glennis',
+		'Patmore',
+		'Swati',
+		'2000-06-05',
+	],
+];
+
+function breakpoints(stdoutColumns: number) {
+	// Large screens - auto
+	if (stdoutColumns > 100) {
+		return [
+			{
+				width: 'auto',
+				paddingLeft: 2,
+				paddingRight: 1,
+			},
+			{
+				width: 'auto',
+				paddingRight: 1,
+			},
+			{
+				width: 'auto',
+				paddingRight: 1,
+			},
+			{
+				width: 'auto',
+				paddingRight: 2,
+			},
+		];
+	}
+
+	// Smaller screens
+	if (stdoutColumns > 30) {
+		return [
+			{
+				width: '50%',
+				paddingLeft: 2,
+				paddingRight: 1,
+			},
+			{
+				width: '50%',
+				paddingRight: 2,
+			},
+			{
+				width: '50%',
+				paddingLeft: 2,
+				paddingRight: 1,
+			},
+			{
+				width: '50%',
+				paddingRight: 2,
+				paddingBottom: 1,
+			},
+		];
+	}
+
+	return {
+		// Remove responsiveness
+		stdoutColumns: 1000,
+		columns: [
+			{
+				width: 'content-width',
+				paddingLeft: 2,
+				paddingRight: 1,
+			},
+			{
+				width: 'content-width',
+				paddingRight: 1,
+			},
+			{
+				width: 'content-width',
+				paddingRight: 1,
+			},
+			{
+				width: 'content-width',
+				paddingRight: 2,
+			},
+		],
+	};
+}
+
+const renderTable = () => {
+	const table = terminalColumns(tableData, breakpoints);
+	process.stdout.write(ansiEscapes.clearTerminal + table);
+};
+
+process.stdout.on('resize', renderTable);
+renderTable();
+
+// Keep Node.js from exiting
+promisify(setTimeout)(60 * 60 * 1000);

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@nyxb/eslint-config": "0.0.53",
     "@nyxb/picocolors": "1.0.2",
+    "@types/node": "^20.2.1",
     "@types/wrap-ansi": "^8.0.1",
     "@vitest/coverage-c8": "^0.31.1",
     "ansi-escapes": "^6.2.0",

src/index.ts

@@ -1,9 +1,9 @@
-import { terminalColumns } from './terminal-columns'
+import { tabletron } from './tabletron'
 import { breakpoints } from './breakpoints'
 import type { Options } from './types'
 
 export {
-   terminalColumns as default,
+   tabletron as default,
    breakpoints,
    Options,
 }

src/terminal-columns.ts → src/tabletron.ts

@@ -8,7 +8,7 @@ import { getColumnContentWidths } from './utils/get-column-content-widths'
 import { computeColumnWidths } from './utils/compute-column-widths'
 import { renderRow } from './utils/render-row'
 
-export function terminalColumns(
+export function tabletron(
    tableData: Row[],
    options?: Options | OptionsFunction,
 ) {