diff --git a/examples/overflow.ts b/examples/overflow.ts index cb6a4f5..e5253e5 100644 --- a/examples/overflow.ts +++ b/examples/overflow.ts @@ -60,22 +60,6 @@ printTable({ titleOptions: {bold: true}, }) -// I would expect this for wrapping on align-center: -// -// Wrap (aligned center) -// ┌───────┬─────────┬─────┬───────────────────────────────────────────────────────────────────────────┐ -// │ Id │ Name │ Age │ Description │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 36329 │ Alice │ 20 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 49032 │ Bob │ 21 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 51786 │ Charlie │ 22 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// └───────┴─────────┴─────┴───────────────────────────────────────────────────────────────────────────┘ - printTable({ columns: ['id', 'name', 'age', 'description'], data, @@ -100,22 +84,6 @@ printTable({ titleOptions: {bold: true}, }) -// Similar for align-right: -// -// Wrap (aligned right) -// ┌───────┬─────────┬─────┬───────────────────────────────────────────────────────────────────────────┐ -// │ Id │ Name │ Age │ Description │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 36329 │ Alice │ 20 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 49032 │ Bob │ 21 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤ -// │ 51786 │ Charlie │ 22 │ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │ -// │ │ │ │ tempor incididunt ut labore et dolore magna aliqua. │ -// └───────┴─────────┴─────┴───────────────────────────────────────────────────────────────────────────┘ - printTable({ columns: ['id', 'name', 'age', 'description'], data, diff --git a/src/table.tsx b/src/table.tsx index d1948b7..96a63e2 100644 --- a/src/table.tsx +++ b/src/table.tsx @@ -128,7 +128,7 @@ function formatTextWithMargins({ 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, @@ -139,12 +139,28 @@ function formatTextWithMargins({ 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 lineMargins = calculateMargins(spaceForText - stripAnsi(line).length) + if (idx === 0) { + return `${line}${' '.repeat(lineMargins.marginRight)}` + } + + if (horizontalAlignment === 'left') { + return `${' '.repeat(marginLeft)}${line}${' '.repeat(lineMargins.marginRight)}` + } + + if (horizontalAlignment === 'right') { + return `${' '.repeat(lineMargins.marginLeft + marginLeft)}${line}${' '.repeat(marginRight)}` + } + + return `${' '.repeat(lineMargins.marginLeft + marginLeft)}${line}${' '.repeat(lineMargins.marginRight)}` + }) return { marginLeft, marginRight, - text, + text: lines.join('\n'), } } @@ -289,6 +305,7 @@ function row>(config: RowConfig): (props: RowP value, width, }) + // console.log(text, {marginLeft, marginRight}, text.match(/ +$/)?.[0]?.length) const alignItems = verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end'