imporve inflection table

src/App.tsx

@@ -16,10 +16,11 @@ import useStickyState from "./components/src/useStickyState";
 import EPExplorer from "./components/src/ep-explorer/EPExplorer";
 import VPBuilderDemo from "./demo-components/VPBuilderDemo";
 import { entryFeeder } from "./demo-components/entryFeeder";
-import { Hider } from "./components/library";
+import { Hider, inflectWord } from "./components/library";
 import InflectionDemo from "./demo-components/InflectionDemo";
 import SpellingDemo from "./demo-components/SpellingDemo";
 import ParserDemo from "./demo-components/ParserDemo";
+// import InflectionTable from "./components/src/InflectionsTable";
 
 function App() {
   const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(
@@ -39,6 +40,18 @@ function App() {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
 
+  const infout = inflectWord({
+    ts: 1527815306,
+    i: 9623,
+    p: "ستړی",
+    f: "stúRay",
+    g: "stuRay",
+    e: "tired",
+    r: 4,
+    c: "adj. / adv.",
+    a: 1,
+  });
+
   return (
     <>
       <main className="flex-shrink-0 mb-4">
@@ -97,6 +110,13 @@ function App() {
               on GitHub
             </p>
           </div>
+          {/* for testing inflection table */}
+          {/* {typeof infout === "object" && infout.inflections && (
+            <InflectionTable
+              inf={infout.inflections}
+              textOptions={textOptions}
+            />
+          )} */}
           <h2 className="mb-3">Demos:</h2>
           <Hider
             label="Verb Conjugation / Verb Phrase Engine"

src/components/src/InflectionsTable.tsx

@@ -39,10 +39,14 @@ import { isPluralInflections } from "../../lib/src/p-text-helpers";
 //     </>;
 // }
 
-const InflectionTable = ({ inf, textOptions, hideTitle }: {
-    inf: T.Inflections | T.PluralInflections,
-    textOptions: T.TextOptions,
-    hideTitle?: boolean,
+const InflectionTable = ({
+  inf,
+  textOptions,
+  hideTitle,
+}: {
+  inf: T.Inflections | T.PluralInflections;
+  textOptions: T.TextOptions;
+  hideTitle?: boolean;
 }) => {
   // const [showingExplanation, setShowingExplanation] = useState(false);
   /* istanbul ignore next */ // Insanely can't see the modal to close it
@@ -51,26 +55,73 @@ const InflectionTable = ({ inf, textOptions, hideTitle }: {
   const isPluralInfs = isPluralInflections(inf);
   return (
     <div className={!hideTitle ? "" : "mt-4"}>
-            {!hideTitle && <div style={{ display: "flex", justifyContent: !isPluralInfs ? "space-between" : "left" }}>
+      {!hideTitle && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: !isPluralInfs ? "space-between" : "left",
+          }}
+        >
           {!isPluralInfs && <h5>Inflections</h5>}
           {/* {!isPluralInfs && <div className="clickable mr-2" onClick={handleShowExplanation} data-testid="help-button">
                     <i className={`fa fa-question-circle`}></i>
                 </div>} */}
-            </div>}
-            <table className="table" style={{ tableLayout: "fixed" }}>
+        </div>
+      )}
+      <table
+        className="table"
+        style={{ tableLayout: "fixed", textAlign: "center" }}
+      >
         <thead>
           <tr>
             <th scope="col" style={{ width: "3.5rem" }}></th>
-                        {"masc" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Masculine</th>}
-                        {"fem" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Feminine</th>}
+            {"masc" in inf && (
+              <th
+                scope="col"
+                style={{
+                  maxWidth: "10rem",
+                  textAlign: "center",
+                  borderLeft: "1px solid #dee2e6",
+                  ...("fem" in inf
+                    ? {
+                        borderRight: "1px solid #dee2e6",
+                      }
+                    : {}),
+                }}
+              >
+                Masculine
+              </th>
+            )}
+            {"fem" in inf && (
+              <th
+                scope="col"
+                style={{ maxWidth: "10rem", textAlign: "center" }}
+              >
+                Feminine
+              </th>
+            )}
           </tr>
         </thead>
         <tbody>
-                    {(!isPluralInfs ? ["Plain", "1st", "2nd"] : ["Plural", "2nd Inf."]).map((title, i) => (
+          {(!isPluralInfs
+            ? ["Plain", "1st", "2nd"]
+            : ["Plural", "2nd Inf."]
+          ).map((title, i) => (
             <tr key={title}>
-                            <th scope="row">{title}</th>
-                            {"masc" in inf && <TableCell item={inf.masc[i]} textOptions={textOptions} />}
-                            {"fem" in inf && <TableCell item={inf.fem[i]} textOptions={textOptions} />}
+              <th scope="row" style={{ textAlign: "left" }}>
+                {title}
+              </th>
+              {"masc" in inf && (
+                <TableCell
+                  item={inf.masc[i]}
+                  textOptions={textOptions}
+                  colSpan={"fem" in inf && i === 2 ? 2 : 1}
+                  center
+                />
+              )}
+              {"fem" in inf && i < 2 && (
+                <TableCell item={inf.fem[i]} textOptions={textOptions} center />
+              )}
             </tr>
           ))}
         </tbody>

src/components/src/TableCell.tsx

@@ -24,11 +24,13 @@ function TableCell({
   textOptions,
   center,
   noBorder,
+  colSpan,
 }: {
   item: T.PsString[];
   textOptions: T.TextOptions;
   center?: boolean;
   noBorder?: boolean;
+  colSpan?: 1 | 2;
 }) {
   const [version, setVersion] = useState(0);
   useEffect(() => setVersion(0), [item]);
@@ -37,7 +39,12 @@ function TableCell({
   }
   const w = item[version] || item[0];
   return (
-    <td style={{ ...(noBorder ? { border: "none" } : {}) }}>
+    <td
+      colSpan={colSpan || 1}
+      style={{
+        ...(noBorder ? { border: "none" } : { border: "2px solid #dee2e6" }),
+      }}
+    >
       <div
         style={{
           display: "flex",