add table to list view

frontend/app/Main.hs

@@ -147,6 +147,23 @@ header section {
   margin-left: auto; }
 header section:first-child {
   margin-left: 0; }
+
+/* table layout */
+th, td {
+  text-align: left;
+  padding: 0 16px;
+  line-height: 52px;
+  text-overflow: ellipsis;
+}
+
+/* table borders */
+table {
+  border-collapse: collapse;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray; }
+th, td {
+  border-top: 1px solid gray;
+  border-bottom: 1px solid gray; }
 |]
         )
     ]

frontend/app/Page/ListCollection.hs

@@ -48,8 +48,8 @@ updateModel (FormSubmitted output) m =
 viewModel :: Model -> View Action
 viewModel m =
   div_ [] $
-    [ viewSchema m.schema,
-      viewPosts m.posts,
+    [ schemaTable m.schema m.posts,
+      viewSchema m.schema,
       viewForm m.input m.schema,
       viewInput m.input
     ]
@@ -63,8 +63,3 @@ viewForm input =
 viewInput :: A.Value -> View Action
 viewInput input =
   pre_ [] [text (toMisoString (A.encode input))]
-
-viewPosts :: [A.Value] -> View Action
-viewPosts posts = ol_ [] (viewPost <$> posts)
-  where
-    viewPost post = pre_ [] [text (toMisoString (A.encode post))]

frontend/app/Schema.hs

@@ -4,6 +4,7 @@
 module Schema
   ( Schema,
     viewSchema,
+    schemaTable,
     schemaForm,
   )
 where
@@ -65,6 +66,35 @@ viewSchema schema =
         )
           <$> (M.toList properties)
 
+schemaTable :: Schema -> [A.Value] -> View action
+schemaTable schema values =
+  table_ [] [thead, tbody]
+  where
+    thead =
+      thead_ [] $
+        case schema.type_ of
+          Object properties ->
+            [ tr_ [] $
+                [ th_ [] [text (toMisoString k)]
+                  | k <- M.keys properties
+                ]
+            ]
+    tbody = tbody_ [] $
+      case schema.type_ of
+        Object properties ->
+          [ tr_
+              []
+              [ td_ [] $
+                  [ text $
+                      case getO (AK.fromString k) value of
+                        A.String s -> toMisoString s
+                        value -> toMisoString (A.encode value)
+                  ]
+                | k <- M.keys properties
+              ]
+            | value <- values
+          ]
+
 schemaForm :: Schema -> F.Form A.Value A.Value
 schemaForm schema =
   fmap mergeJson . sequence $