Better borders on tableView

src/cg/layout.cg

@@ -22,12 +22,8 @@ layoutDir : Direction \ { w : Int, h : Int } \ List LayoutChild \ { ui : UI, w :
       childH = dir
         | Col \ allocated.s
         | Row \ crossSize;
-      posX = dir
-        | Col \ 0
-        | Row \ acc.pos;
-      posY = dir
-        | Col \ acc.pos
-        | Row \ 0;
+      posX = dir | Col \ 0 | Row \ acc.pos;
+      posY = dir | Col \ acc.pos | Row \ 0;
       rendered = ui.positioned { x = posX, y = posY, child = allocated.view { w = childW, h =  childH } };
       acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }) { pos = 0, children = [] } children;
   {
@@ -55,21 +51,40 @@ align = hAlign vAlign w h child \
     h = h
   };
 
-tableCell = isHeader idx ctx content \
+tableCell = isHeader colIdx ctx content \
   padding = 2;
   innerW = ctx.w - 2 * padding;
   innerH = ctx.h - 2 * padding;
   hAlign = isHeader | True \ Center | False \ Start;
   alignedContent = align hAlign Center innerW innerH (sizedText content);
+  leftBorder = colIdx == 0 | True \ Empty | _ \ ui.positioned {
+    x = 0,
+    y = 0,
+    child = ui.rect {
+      w = 1,
+      h = ctx.h,
+      color = "rgba(255,255,255,0.2)",
+      # strokeColor = "rgba(255,255,255,0.3)",
+      strokeWidth = 1
+    }
+  };
+
   ui.stack {
     children = [
-      ui.rect {
+      leftBorder,
+      # bottom border
+      ui.positioned {
+        x = 0,
+        y = ctx.h,
+        child = ui.rect {
           w = ctx.w,
-        h = ctx.h,
-        color = isHeader | True \ "rgba(255,255,255,0.2)" | False \ "transparent",
-        strokeColor = "rgba(255,255,255,0.3)",
-        strokeWidth = isHeader | True \ 0 | False \ 1
+          h = 1,
+          color = "rgba(255,255,255,0.2)",
+          # strokeColor = "rgba(255,255,255,0.3)",
+          strokeWidth = 1
+        }
       },
+      # content
       ui.positioned {
         x = padding,
         y = padding,