Display tables in alphabetic order.

lynxkite-app/web/src/workspace/nodes/NodeWithTableView.tsx

@@ -19,45 +19,45 @@ export default function NodeWithTableView(props: any) {
   const display = props.data.display?.value;
   const single =
     display?.dataframes && Object.keys(display?.dataframes).length === 1;
+  const dfs = Object.entries(display.dataframes || {});
+  dfs.sort();
   return (
     <LynxKiteNode {...props}>
       {display && [
-        Object.entries(display.dataframes || {}).map(
-          ([name, df]: [string, any]) => (
-            <React.Fragment key={name}>
-              {!single && (
-                <div
-                  key={`${name}-header`}
-                  className="df-head"
-                  onClick={() => setOpen({ ...open, [name]: !open[name] })}
-                >
-                  {name}
-                </div>
-              )}
-              {(single || open[name]) &&
-                (df.data.length > 1 ? (
-                  <Table
-                    key={`${name}-table`}
-                    columns={df.columns}
-                    data={df.data}
-                  />
-                ) : df.data.length ? (
-                  <dl key={`${name}-dl`}>
-                    {df.columns.map((c: string, i: number) => (
-                      <React.Fragment key={`${name}-${c}`}>
-                        <dt>{c}</dt>
-                        <dd>
-                          <Markdown>{toMD(df.data[0][i])}</Markdown>
-                        </dd>
-                      </React.Fragment>
-                    ))}
-                  </dl>
-                ) : (
-                  JSON.stringify(df.data)
-                ))}
-            </React.Fragment>
-          ),
-        ),
+        dfs.map(([name, df]: [string, any]) => (
+          <React.Fragment key={name}>
+            {!single && (
+              <div
+                key={`${name}-header`}
+                className="df-head"
+                onClick={() => setOpen({ ...open, [name]: !open[name] })}
+              >
+                {name}
+              </div>
+            )}
+            {(single || open[name]) &&
+              (df.data.length > 1 ? (
+                <Table
+                  key={`${name}-table`}
+                  columns={df.columns}
+                  data={df.data}
+                />
+              ) : df.data.length ? (
+                <dl key={`${name}-dl`}>
+                  {df.columns.map((c: string, i: number) => (
+                    <React.Fragment key={`${name}-${c}`}>
+                      <dt>{c}</dt>
+                      <dd>
+                        <Markdown>{toMD(df.data[0][i])}</Markdown>
+                      </dd>
+                    </React.Fragment>
+                  ))}
+                </dl>
+              ) : (
+                JSON.stringify(df.data)
+              ))}
+          </React.Fragment>
+        )),
         Object.entries(display.others || {}).map(([name, o]) => (
           <>
             <div