@oclif/table 0.1.9 → 0.1.11

package/lib/skeletons.d.ts

@@ -1,4 +1,4 @@
-export declare const BORDER_STYLES: readonly ["all", "headers-only-with-outline", "headers-only-with-underline", "headers-only", "horizontal-with-outline", "horizontal", "none", "outline", "vertical-with-outline", "vertical"];
+export declare const BORDER_STYLES: readonly ["all", "headers-only-with-outline", "headers-only-with-underline", "headers-only", "horizontal-with-outline", "horizontal", "none", "outline", "vertical-with-outline", "vertical-rows-with-outline", "vertical"];
 export type BorderStyle = (typeof BORDER_STYLES)[number];
 type Skeleton = {
     cross: string;

package/lib/skeletons.js

@@ -8,6 +8,7 @@ export const BORDER_STYLES = [
     'none',
     'outline',
     'vertical-with-outline',
+    'vertical-rows-with-outline',
     'vertical',
 ];
 export const BORDER_SKELETONS = {
@@ -317,6 +318,44 @@ export const BORDER_SKELETONS = {
             right: '',
         },
     },
+    'vertical-rows-with-outline': {
+        data: {
+            cross: '│',
+            left: '│',
+            line: ' ',
+            right: '│',
+        },
+        footer: {
+            cross: '┴',
+            left: '└',
+            line: '─',
+            right: '┘',
+        },
+        header: {
+            cross: '─',
+            left: '┌',
+            line: '─',
+            right: '┐',
+        },
+        headerFooter: {
+            cross: '┬',
+            left: '├',
+            line: '─',
+            right: '┤',
+        },
+        heading: {
+            cross: ' ',
+            left: '│',
+            line: ' ',
+            right: '│',
+        },
+        separator: {
+            cross: '',
+            left: '',
+            line: '',
+            right: '',
+        },
+    },
     'vertical-with-outline': {
         data: {
             cross: '│',

package/lib/table.js

@@ -82,7 +82,7 @@ function formatTextWithMargins({ horizontalAlignment, overflow, padding, value,
     // https://github.com/Shopify/cli/pull/995
     const valueWithNoZeroWidthChars = String(value).replaceAll('​', ' ');
     const spaceForText = width - padding * 2;
-    if (stripAnsi(valueWithNoZeroWidthChars).length < spaceForText) {
+    if (stripAnsi(valueWithNoZeroWidthChars).length <= spaceForText) {
         const spaces = width - stripAnsi(valueWithNoZeroWidthChars).length;
         return {
             text: valueWithNoZeroWidthChars,
@@ -92,11 +92,34 @@ function formatTextWithMargins({ horizontalAlignment, overflow, padding, value,
     if (overflow === 'wrap') {
         const wrappedText = wrapAnsi(valueWithNoZeroWidthChars, spaceForText, { hard: true, trim: true, wordWrap: true });
         const { marginLeft, marginRight } = calculateMargins(width - determineWidthOfWrappedText(stripAnsi(wrappedText)));
-        const text = wrappedText.replaceAll('\n', `${' '.repeat(marginRight)}\n${' '.repeat(marginLeft)}`);
+        const lines = wrappedText.split('\n').map((line, idx) => {
+            const { marginLeft: lineSpecificLeftMargin } = calculateMargins(width - stripAnsi(line).length);
+            if (horizontalAlignment === 'left') {
+                if (idx === 0) {
+                    // if it's the first line, only add margin to the right side (The left margin will be applied later)
+                    return `${line}${' '.repeat(marginRight)}`;
+                }
+                // if left alignment, add the overall margin to the left side and right sides
+                return `${' '.repeat(marginLeft)}${line}${' '.repeat(marginRight)}`;
+            }
+            if (horizontalAlignment === 'center') {
+                if (idx === 0) {
+                    // if it's the first line, only add margin to the right side (The left margin will be applied later)
+                    return `${line}${' '.repeat(marginRight)}`;
+                }
+                // if center alignment, add line specific margin to the left side and the overall margin to the right side
+                return `${' '.repeat(lineSpecificLeftMargin)}${line}${' '.repeat(marginRight)}`;
+            }
+            // right alignment
+            if (idx === 0) {
+                return `${' '.repeat(Math.max(0, lineSpecificLeftMargin - marginLeft))}${line}${' '.repeat(marginRight)}`;
+            }
+            return `${' '.repeat(lineSpecificLeftMargin)}${line}${' '.repeat(marginRight)}`;
+        });
         return {
             marginLeft,
             marginRight,
-            text,
+            text: lines.join('\n'),
         };
     }
     const text = cliTruncate(valueWithNoZeroWidthChars, spaceForText, { position: determineTruncatePosition(overflow) });
@@ -107,7 +130,7 @@ function formatTextWithMargins({ horizontalAlignment, overflow, padding, value,
     };
 }
 export function Table(props) {
-    const { data, filter, horizontalAlignment = 'left', maxWidth, noStyle = false, orientation = 'horizontal', overflow = 'truncate', padding = 1, sort, title, verticalAlignment = 'top', } = props;
+    const { data, filter, horizontalAlignment = 'left', maxWidth, noStyle = false, overflow = 'truncate', padding = 1, sort, title, verticalAlignment = 'top', } = props;
     const headerOptions = noStyle ? {} : { bold: true, color: 'blue', ...props.headerOptions };
     const borderStyle = noStyle ? 'none' : (props.borderStyle ?? 'all');
     const borderColor = noStyle ? undefined : props.borderColor;
@@ -165,26 +188,6 @@ export function Table(props) {
         props: borderProps,
         skeleton: BORDER_SKELETONS[config.borderStyle].separator,
     });
-    if (orientation === 'vertical') {
-        return (React.createElement(Box, { flexDirection: "column", width: determineWidthToUse(columns, config.maxWidth), paddingBottom: 1 },
-            title && React.createElement(Text, { ...titleOptions }, title),
-            processedData.map((row, index) => {
-                // Calculate the hash of the row based on its value and position
-                const key = `row-${sha1(row)}-${index}`;
-                const maxKeyLength = Math.max(...Object.values(headings).map((c) => c.length));
-                // Construct a row.
-                return (React.createElement(Box, { key: key, borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, flexDirection: "column", borderStyle: noStyle ? undefined : 'single', borderColor: borderColor }, columns.map((column) => {
-                    const value = (row[column.column] ?? '').toString();
-                    const keyName = (headings[column.key] ?? column.key).toString();
-                    const keyPadding = ' '.repeat(maxKeyLength - keyName.length + padding);
-                    return (React.createElement(Box, { key: `${key}-cell-${column.key}`, flexWrap: "wrap" },
-                        React.createElement(Text, { ...config.headerOptions },
-                            keyName,
-                            keyPadding),
-                        React.createElement(Text, { wrap: overflow }, value)));
-                })));
-            })));
-    }
     return (React.createElement(Box, { flexDirection: "column", width: determineWidthToUse(columns, config.maxWidth) },
         title && React.createElement(Text, { ...titleOptions }, title),
         headerComponent({ columns, data: {}, key: 'header' }),
@@ -278,8 +281,8 @@ export function printTables(tables, options) {
     const columns = process.stdout.columns - (leftMargin + rightMargin);
     const processed = tables.map((table) => ({
         ...table,
-        // adjust maxWidth to account for margin
-        maxWidth: determineConfiguredWidth(table.maxWidth, columns),
+        // adjust maxWidth to account for margin and columnGap
+        maxWidth: determineConfiguredWidth(table.maxWidth, columns) - (options?.columnGap ?? 0) * tables.length,
     }));
     const instance = render(React.createElement(Container, { ...options }, processed.map((table) => (React.createElement(Table, { key: sha1(table), ...table })))));
     instance.unmount();

package/lib/types.d.ts

@@ -76,7 +76,7 @@ export type TableOptions<T extends Record<string, unknown>> = {
      *
      * If you provide a number or percentage that is larger than the terminal width, it will default to the terminal width.
      *
-     * If you provide a number or percentage that is too small to fit the table, it will default to the width of the table.
+     * If you provide a number or percentage that is too small to fit the table, it will default to the minimum width of the table.
      */
     maxWidth?: Percentage | number;
     /**
@@ -88,7 +88,7 @@ export type TableOptions<T extends Record<string, unknown>> = {
      */
     headerOptions?: HeaderOptions;
     /**
-     * Border style for the table. Defaults to 'all'. Only applies to horizontal orientation.
+     * Border style for the table. Defaults to 'all'.
      */
     borderStyle?: BorderStyle;
     /**
@@ -96,7 +96,7 @@ export type TableOptions<T extends Record<string, unknown>> = {
      */
     borderColor?: SupportedColor;
     /**
-     * Align data in columns. Defaults to 'left'. Only applies to horizontal orientation.
+     * Align data in columns. Defaults to 'left'.
      */
     horizontalAlignment?: HorizontalAlignment;
     /**
@@ -133,26 +133,7 @@ export type TableOptions<T extends Record<string, unknown>> = {
      */
     sort?: Sort<T>;
     /**
-     * The orientation of the table. Defaults to 'horizontal'.
-     *
-     * If 'vertical', individual records will be displayed vertically in key:value pairs.
-     *
-     * @example
-     * ```
-     * ─────────────
-     *  Name Alice
-     *  Id   36329
-     *  Age  20
-     * ─────────────
-     *  Name Bob
-     *  Id   49032
-     *  Age  21
-     * ─────────────
-     * ```
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * Vertical alignment of cell content. Defaults to 'top'. Only applies to horizontal orientation.
+     * Vertical alignment of cell content. Defaults to 'top'.
      */
     verticalAlignment?: VerticalAlignment;
     /**

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@oclif/table",
   "description": "Display table in terminal",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "author": "Salesforce",
-  "bugs": "https://github.com/oclif/multi-stage-output/issues",
+  "bugs": "https://github.com/oclif/table/issues",
   "dependencies": {
     "@oclif/core": "^4",
-    "@types/react": "^18.3.3",
     "change-case": "^5.4.4",
     "cli-truncate": "^4.0.0",
     "ink": "^5.0.1",
@@ -20,9 +19,10 @@
     "@commitlint/config-conventional": "^19",
     "@oclif/prettier-config": "^0.2.1",
     "@types/chai": "^4.3.16",
-    "@types/mocha": "^10.0.7",
+    "@types/mocha": "^10.0.8",
     "@types/node": "^18",
     "@types/object-hash": "^3.0.6",
+    "@types/react": "^18.3.10",
     "@types/sinon": "^17.0.3",
     "ansis": "^3.3.2",
     "chai": "^4.5.0",
@@ -33,7 +33,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-xo": "^0.45.0",
     "eslint-config-xo-react": "^0.27.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.6",
     "ink-testing-library": "^4.0.0",
@@ -52,7 +52,7 @@
   "files": [
     "/lib"
   ],
-  "homepage": "https://github.com/oclif/core",
+  "homepage": "https://github.com/oclif/table",
   "keywords": [
     "oclif",
     "cli",
@@ -62,7 +62,7 @@
   "exports": {
     ".": "./lib/index.js"
   },
-  "repository": "oclif/core",
+  "repository": "oclif/table",
   "publishConfig": {
     "access": "public"
   },