option to transpose table

src/app/globals.css

@@ -1,4 +1,5 @@
 :root {
+  --base_max_width: 1000px;
   --main_1: #735cd6;
   --main_2: #db52c9;
   --light_1: #a598e0;

src/app/page.module.css

@@ -3,7 +3,7 @@
 }
 
 .title_section {
-  max-width: 1000px;
+  max-width: var(--base_max_width);
   margin: 0 auto 2rem auto;
   padding: 0 3rem;
 }
@@ -20,7 +20,7 @@
 }
 
 .input_section {
-  max-width: 1000px;
+  max-width: var(--base_max_width);
   margin: 0 auto 2rem auto;
 }
 
@@ -55,17 +55,32 @@
 
 #output_table {
   margin: 0 auto;
+  font-size: 0.9rem;
 }
 
-#output_table tbody th:nth-child(1) {
+.output_table_regular tbody th:nth-child(1) {
   text-align: center;
 }
 
-#output_table td,
+.output_table_regular {
-#output_table th {
   white-space: nowrap;
 }
 
+.output_table_transposed th,
+.output_table_transposed td {
+  vertical-align: top;
+}
+
+.button_container {
+  max-width: var(--base_max_width);
+  margin: 1rem auto 1rem auto;
+}
+
+.button {
+  padding: 0.25rem 2rem;
+  display: block;
+}
+
 @media screen and (min-width: 40rem) {
   .main {
     padding: 2rem 3rem;

src/components/inspector.tsx

@@ -1,17 +1,33 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from '@/app/page.module.css'
 import { TextField } from './textfield';
 import { UtfdumpContextProvider } from '@/context/utfdump';
 import { OutputTable } from './output_table';
 
+const lsTransposeKey = 'transpose';
+const lsTrueStr = 't';
+const lsFalseStr = 'f';
+
 type InspectorProps = {
   sourceUrl: string,
 };
 
 export function Inspector(props: InspectorProps) {
   const [currentString, setCurrentString] = useState('');
+  const [transpose, setTranspose] = useState<boolean>(true);
+
+  useEffect(() => {
+    const lsTranspose = localStorage.getItem(lsTransposeKey) !== lsFalseStr;
+    setTranspose(lsTranspose);
+  }, []);
+
+  function toggleTranspose() {
+    const newTranspose = !transpose;
+    setTranspose(newTranspose);
+    localStorage.setItem(lsTransposeKey, newTranspose ? lsTrueStr : lsFalseStr);
+  }
 
   return (
     <UtfdumpContextProvider>
@@ -30,7 +46,11 @@ export function Inspector(props: InspectorProps) {
           </div>
         </section>
 
-        <OutputTable currentString={currentString} />
+        <OutputTable
+          currentString={currentString}
+          transpose={transpose}
+          toggleTranspose={toggleTranspose}
+        />
       </section>
     </UtfdumpContextProvider>
   );

src/components/output_table.tsx

@@ -3,10 +3,16 @@ import styles from '@/app/page.module.css'
 import { UtfdumpContext } from '@/context/utfdump';
 import { EncodedCodepoint } from 'utfdump_wasm';
 
-export function OutputTable(props: { currentString: string }) {
+export function OutputTable(props: {
+  currentString: string,
+  transpose: boolean,
+  toggleTranspose: () => void
+}) {
   const ctx = useContext(UtfdumpContext);
-  
+
+  let nonEmpty = false;
   let rows = [];
+  let transposedData: React.JSX.Element[][] = [[], [], [], [], [], [], [], [], [], [], [], [], [], []];
 
   if (ctx.utfdump) {
     for (const codepointStr of props.currentString) {
@@ -38,24 +44,60 @@ export function OutputTable(props: { currentString: string }) {
             charDisplayStr = '\u25cc' + charDisplayStr;
           }
 
-          rows.push((
+          const elemChar = <th>{charDisplayStr}</th>;
-            <tr>
+          const elemName = <td>{charData.name()}</td>;
-              <th>{charDisplayStr}</th>
+          const elemCode = <td>U+{codepoint.toString(16).padStart(4, '0')}</td>;
-              <td>{charData.name()}</td>
+          const elemUtf8 = <td>{encodedUtf8Str}</td>;
-              <td>U+{codepoint.toString(16).padStart(4, '0')}</td>
+          const elemUtf16 = <td>{encodedUtf16Str}</td>;
-              <td>{encodedUtf8Str}</td>
+          const elemCategory = <td>{charData.category_full()}</td>;
-              <td>{encodedUtf16Str}</td>
+          const elemCombining = <td>{combiningClassName || combiningClassNum}</td>;
-              <td>{charData.category_full()}</td>
+          const elemBidi = <td>{charData.bidi_full()}</td>;
-              <td>{combiningClassName || combiningClassNum}</td>
+          const elemMirrored = <td>{charData.mirrored() ? 'Yes' : 'No'}</td>;
-              <td>{charData.bidi_full()}</td>
+          const elemDecomp = <td>{optCharCodes(charData.decomp_string())}</td>;
-              <td>{charData.mirrored() ? 'Yes' : 'No'}</td>
+          const elemUpper = <td>{optCharCodes(charData.uppercase_string())}</td>;
-              <td>{optCharCodes(charData.decomp_string())}</td>
+          const elemLower = <td>{optCharCodes(charData.lowercase_string())}</td>;
-              <td>{optCharCodes(charData.uppercase_string())}</td>
+          const elemTitle = <td>{optCharCodes(charData.titlecase_string())}</td>;
-              <td>{optCharCodes(charData.lowercase_string())}</td>
+          const elemNumeric = <td>{charData.numeric_value()}</td>;
-              <td>{optCharCodes(charData.titlecase_string())}</td>
+
-              <td>{charData.numeric_value()}</td>
+          if (props.transpose) {
-            </tr>
+            transposedData[0].push(elemChar);
-          ));
+            transposedData[1].push(elemName);
+            transposedData[2].push(elemCode);
+            transposedData[3].push(elemUtf8);
+            transposedData[4].push(elemUtf16);
+            transposedData[5].push(elemCategory);
+            transposedData[6].push(elemCombining);
+            transposedData[7].push(elemBidi);
+            transposedData[8].push(elemMirrored);
+            transposedData[9].push(elemDecomp);
+            transposedData[10].push(elemUpper);
+            transposedData[11].push(elemLower);
+            transposedData[12].push(elemTitle);
+            transposedData[13].push(elemNumeric);
+          }
+
+          else {
+            rows.push((
+              <tr>
+                {elemChar}
+                {elemName}
+                {elemCode}
+                {elemUtf8}
+                {elemUtf16}
+                {elemCategory}
+                {elemCombining}
+                {elemBidi}
+                {elemMirrored}
+                {elemDecomp}
+                {elemUpper}
+                {elemLower}
+                {elemTitle}
+                {elemNumeric}
+              </tr>
+            ));
+          }
+
+          nonEmpty = true;
   
           charData.free();
         }
@@ -69,40 +111,83 @@ export function OutputTable(props: { currentString: string }) {
 
   let table;
   
-  if (rows.length > 0) {
+  if (nonEmpty) {
-    table = (
+    if (props.transpose) {
-      <table id={styles.output_table}>
+      table = (
-        <thead>
+        <table id={styles.output_table} className={styles.output_table_transposed}>
-          <tr>
+          <thead>
-            <th></th>
+            <tr><th></th>{transposedData[0]}</tr>
-            <th>Name</th>
+          </thead>
-            <th>Code</th>
+          <tbody>
-            <th>UTF-8</th>
+            <tr><th>Name</th>{transposedData[1]}</tr>
-            <th>UTF-16LE</th>
+            <tr><th>Code</th>{transposedData[2]}</tr>
-            <th>Category</th>
+            <tr><th>UTF-8</th>{transposedData[3]}</tr>
-            <th>Combining</th>
+            <tr><th>UTF-16LE</th>{transposedData[4]}</tr>
-            <th>Bidirectional</th>
+            <tr><th>Category</th>{transposedData[5]}</tr>
-            <th>Mirrored</th>
+            <tr><th>Combining</th>{transposedData[6]}</tr>
-            <th>Decomp</th>
+            <tr><th>Bidirectional</th>{transposedData[7]}</tr>
-            <th>Upper</th>
+            <tr><th>Mirrored</th>{transposedData[8]}</tr>
-            <th>Lower</th>
+            <tr><th>Decomp</th>{transposedData[9]}</tr>
-            <th>Title</th>
+            <tr><th>Upper</th>{transposedData[10]}</tr>
-            <th>Numeric</th>
+            <tr><th>Lower</th>{transposedData[11]}</tr>
-          </tr>
+            <tr><th>Title</th>{transposedData[12]}</tr>
-        </thead>
+            <tr><th>Numeric</th>{transposedData[13]}</tr>
-        <tbody>
+          </tbody>
-          {rows}
+        </table>
-        </tbody>
+      );
-      </table>
+    }
-    );
+
+    else {
+      table = (
+        <table id={styles.output_table} className={styles.output_table_regular}>
+          <thead>
+            <tr>
+              <th></th>
+              <th>Name</th>
+              <th>Code</th>
+              <th>UTF-8</th>
+              <th>UTF-16LE</th>
+              <th>Category</th>
+              <th>Combining</th>
+              <th>Bidirectional</th>
+              <th>Mirrored</th>
+              <th>Decomp</th>
+              <th>Upper</th>
+              <th>Lower</th>
+              <th>Title</th>
+              <th>Numeric</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+      );
+    }
   } else {
     table = (<></>);
   }
 
+  let transposeButton;
+  if (nonEmpty) {
+    transposeButton = (
+      <button className={styles.button} onClick={props.toggleTranspose}>
+        Flip table
+      </button>
+    );
+  } else {
+    transposeButton = (<></>);
+  }
+
   return (
-    <section className={styles.table_container}>
+    <section className={styles.output_section}>
-      <div className={styles.overflow_scroll}>
+      <div className={styles.button_container}>
-        {table}
+        {transposeButton}
+      </div>
+      <div className={styles.table_container}>
+        <div className={styles.overflow_scroll}>
+          {table}
+        </div>
       </div>
     </section>
   );