feat: support vertical orientation

oclif · Sep 5, 2024 · 2dc2609 · 2dc2609
1 parent e758b0e
commit 2dc2609
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/examples/basic.ts b/examples/basic.ts
@@ -1846,12 +1846,13 @@ makeTable({
   borderStyle: 'headers-only-with-underline',
   columns: ['version', 'channel', 'location'],
   data: versions,
-  // filter: (row) => /^.+$/.test(row.channel),
+  filter: (row) => /^.+$/.test(row.channel),
   headerOptions: {
     bold: true,
     color: '#905de8',
     formatter: 'capitalCase',
   },
+  orientation: 'vertical',
   overflow: 'wrap',
   sort: {
     channel(a, b) {
@@ -1867,7 +1868,9 @@ makeTable({
     },
   },
 })
+
 console.log()
+
 makeTable({
   // align: 'center',
   borderStyle: 'headers-only-with-underline',
@@ -1880,6 +1883,7 @@ makeTable({
     color: 'blueBright',
     formatter: 'capitalCase',
   },
+  orientation: 'vertical',
   overflow: 'wrap',
   sort: {
     fullName: 'asc',

diff --git a/src/table.tsx b/src/table.tsx
@@ -64,6 +64,7 @@ export function Table<T extends ScalarDict>(props: TableProps<T>) {
     data,
     filter,
     maxWidth,
+    orientation = 'horizontal',
     overflow = 'truncate',
     padding = 1,
     sort,
@@ -134,6 +135,35 @@ export function Table<T extends ScalarDict>(props: TableProps<T>) {
     skeleton: BORDER_SKELETONS[config.borderStyle].separator,
   })
 
+  if (orientation === 'vertical') {
+    return (
+      <Box flexDirection="column" width={determineWidthToUse(columns, config.maxWidth)} paddingBottom={1}>
+        {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 (
+            <Box key={key} borderTop borderBottom={false} borderLeft={false} borderRight={false} flexDirection="column" borderStyle="single">
+              {/* print all data in key:value pairs */}
+              {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 (
+                  <Box key={`${key}-cell-${column.key}`} flexWrap='wrap'>
+                    <Text {...config.headerOptions}>{keyName}{keyPadding}</Text>
+                    <Text wrap={overflow}>{value}</Text>
+                  </Box>
+                )
+              })}
+            </Box>
+          )
+        })}
+      </Box>
+    )
+  }
+
   return (
     <Box flexDirection="column" width={determineWidthToUse(columns, config.maxWidth)} paddingBottom={1}>
       {headerComponent({columns, data: {}, key: 'header'})}
@@ -266,7 +296,6 @@ export function Skeleton(props: React.PropsWithChildren & {readonly height?: num
  * @param options see {@link TableProps}
  */
 export function makeTable<T extends ScalarDict>(options: TableProps<T>): void {
-  const {data, ...props} = options || {data: []}
-  const instance = render(<Table data={data} {...props} />)
+  const instance = render(<Table {...options} />)
   instance.unmount()
 }
diff --git a/src/types.ts b/src/types.ts
@@ -108,11 +108,11 @@ export type TableProps<T extends ScalarDict> = {
    */
   headerOptions?: HeaderOptions
   /**
-   * Border style for the table. Defaults to 'all'.
+   * Border style for the table. Defaults to 'all'. Only applies to horizontal orientation.
    */
   borderStyle?: BorderStyle
   /**
-   * Align data in columns. Defaults to 'left'.
+   * Align data in columns. Defaults to 'left'. Only applies to horizontal orientation.
    */
   align?: ColumnAlignment
   /**
@@ -148,6 +148,25 @@ export type TableProps<T extends ScalarDict> = {
    * ```
    */
   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'
 }
 
 export type Config<T> = {