Merge branch 'develop' of github.com:privatenumber/terminal-columns

README.md

@@ -3,16 +3,17 @@
 Readable tables for the terminal.
 
 <p align="center">
-    <img src=".github/demo.gif" width="400">
+    <img src=".github/demo.gif" width="450">
     <br>
     <em>Tables can be automatically responsive!</em>
 </p>
 
 ### Features
-- Wrap content to fit the column width
-- Supports column widths `auto`, `content-width`, viewport percents & static values
-- Supports horizontal & vertical padding
-- Allow rows to overflow into multiple rows
+- Content wrapped to fit column width
+- Column widths `auto`, `content-width`, viewport percents & static values
+- Align left & right
+- Horizontal & vertical padding
+- Rows can overflow into multiple rows
 - Easy to make responsive tables
 
 → [Try it out online](https://stackblitz.com/edit/terminal-columns-demo?devtoolsheight=50&file=examples/responsive-table.js&view=editor)
@@ -116,6 +117,20 @@ terminalColumns(
 )
 ```
 
+### Right align text
+You can align the content of the column by setting `align: 'right'`.
+
+```ts
+terminalColumns(
+    tableData,
+    [
+        {
+            align: 'right'
+        }
+    ]
+)
+```
+
 ### Responsive table by terminal width
 You can make the table responsive by passing in a function that computes the column width allocation based on the detected viewport width.
 
@@ -220,6 +235,7 @@ type ColumnMeta = {
     paddingLeft?: number
     paddingTop?: number
     paddingBottom?: number
+    align?: 'left' | 'right'
 }
 ```
 
@@ -266,4 +282,9 @@ Type: `number`
 
 How many new lines to the bottom the column should have
 
+##### align
+Type: `'left' | 'right'`
+
+Default: `'left'`
 
+Whether to align the text to the left or right.

examples/lorem-ipsum.ts

@@ -23,6 +23,7 @@ const renderTable = (stdoutColumns: number) => {
 		stdoutColumns,
 		columns: [
 			{
+				align: 'right',
 				paddingRight: 4,
 				paddingBottom: 1,
 			},

src/types.ts

@@ -2,24 +2,20 @@ export type Row = string[];
 
 export type ColumnWidth = number | 'content-width' | 'auto' | string;
 
+type Alignment = 'left' | 'right';
+
 export type ColumnMeta<Width = ColumnWidth> ={
 	width?: Width;
-	// TODO: align
-	// align?: string;
+	align?: Alignment;
 	paddingRight?: number;
 	paddingLeft?: number;
 	paddingTop?: number;
 	paddingBottom?: number;
 };
 
-export type InternalColumnMeta<Width = ColumnWidth> = {
-	width: Width;
+export type InternalColumnMeta<Width = ColumnWidth> = Required<ColumnMeta<Width>> & {
 	autoOverflow?: number;
 	contentWidth: number;
-	paddingRight: number;
-	paddingLeft: number;
-	paddingTop: number;
-	paddingBottom: number;
 	paddingLeftString: string;
 	paddingRightString: string;
 	horizontalPadding: number;

src/utils/compute-column-widths.ts

@@ -8,6 +8,7 @@ const isPercentPattern = /^\d+%$/;
 
 const defaultColumnMetas: InternalColumnMeta = {
 	width: 'auto',
+	align: 'left',
 	contentWidth: 0,
 	paddingLeft: 0,
 	paddingRight: 0,

src/utils/render-row.ts

@@ -52,13 +52,20 @@ export function renderRow(
 			const rowLine = subRowWithData
 				.map((column) => {
 					const cellLine = column.lines[i] ?? '';
+					const lineFiller = ' '.repeat(column.width - stringWidth(cellLine));
+					let text = column.paddingLeftString;
 
-					return (
-						column.paddingLeftString
-						+ cellLine
-						+ ' '.repeat(column.width - stringWidth(cellLine))
-						+ column.paddingRightString
-					);
+					if (column.align === 'right') {
+						text += lineFiller;
+					}
+
+					text += cellLine;
+
+					if (column.align === 'left') {
+						text += lineFiller;
+					}
+
+					return text + column.paddingRightString;
 				})
 				.join('');