fix(table): style problem in table grid

Author: loggerhead

src/app/globals.css

@@ -54,8 +54,6 @@
       "Courier New", monospace;
     --max-key-length: 300px;
     --max-value-length: 500px;
-    --tbl-key-bg-color: rgb(242, 242, 242);
-    --tbl-border: 1px solid #e0e0e080;
 
     --bg-key: #e0e0e04d;
     --hl-key: #a31515;
@@ -296,19 +294,17 @@ https://stackoverflow.com/questions/47017753/monaco-editor-dynamically-resizable
   padding: 4px 6px;
   text-align: left;
   vertical-align: top;
+  border-collapse: collapse;
 }
 
 .tbl-header {
-  max-width: var(--max-value-length);
-  background-color: var(--tbl-key-bg-color);
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
   font-weight: 400;
 }
 
 .tbl-value {
-  max-width: var(--max-value-length);
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -318,13 +314,28 @@ https://stackoverflow.com/questions/47017753/monaco-editor-dynamically-resizable
   color: var(--hl-index);
   font-family: var(--graph-font-family);
   vertical-align: top;
-  border: var(--tbl-border);
 }
 
 .tbl-expander {
   cursor: pointer;
 }
 
+.tbl-b-l {
+  border-left-width: 1px;
+}
+
+.tbl-b-r {
+  border-right-width: 1px;
+}
+
+.tbl-b-t {
+  border-top-width: 1px;
+}
+
+.tbl-b-b {
+  border-bottom-width: 1px;
+}
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }

src/containers/editor/components/InitialSetup.tsx

@@ -55,14 +55,14 @@ function useInitial() {
 
     // measure graph style
     const el = document.getElementById("width-measure")!;
+    const { maxWidth: maxValueWidth } = getComputedStyle(el.querySelector(".graph-v")!);
 
     {
       const span = el.querySelector("span")!;
       const { lineHeight } = getComputedStyle(span);
       const { borderWidth } = getComputedStyle(el);
       const { paddingLeft, paddingRight } = getComputedStyle(el.querySelector(".graph-kv")!);
       const { marginRight, maxWidth: maxKeyWidth } = getComputedStyle(el.querySelector(".graph-k")!);
-      const { maxWidth: maxValueWidth } = getComputedStyle(el.querySelector(".graph-v")!);
 
       const measured = {
         fontWidth: Math.ceil(span.offsetWidth / span.textContent!.length),
@@ -82,12 +82,13 @@ function useInitial() {
     {
       const span = el.querySelector("span")!;
       const { height: rowHeight } = getComputedStyle(el.querySelector(".tbl-row")!);
-      const { maxWidth: maxCellWidth, paddingLeft, paddingRight } = getComputedStyle(el.querySelector(".tbl-cell")!);
+      const { paddingLeft, paddingRight } = getComputedStyle(el.querySelector(".tbl-cell")!);
       const measured = {
         fontWidth: Math.ceil(span.offsetWidth / span.textContent!.length),
         rowHeight: px2num(rowHeight),
-        maxCellWidth: px2num(maxCellWidth),
+        maxCellWidth: px2num(maxValueWidth),
         padding: px2num(paddingLeft) + px2num(paddingRight),
+        scrollbarWidth: getScrollbarWidth(),
       };
 
       setupGlobalTableStyle(measured);
@@ -96,3 +97,20 @@ function useInitial() {
     }
   }, []);
 }
+
+// Calculate the scrollbar width
+function getScrollbarWidth() {
+  const outer = document.createElement("div");
+  outer.style.width = "100px";
+  outer.style.height = "100px";
+  outer.style.overflow = "scroll";
+  document.body.appendChild(outer);
+
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  document.body.removeChild(outer);
+  return scrollbarWidth;
+}

src/containers/editor/table/Cell.tsx

@@ -1,22 +1,45 @@
 import { memo } from "react";
-import { cellClassMap, globalStyle } from "@/lib/table/style";
+import { borderClassMap, cellClassMap, globalStyle } from "@/lib/table/style";
+import { isDummyType } from "@/lib/table/tableNode";
 import type { TableNode } from "@/lib/table/types";
 import { cn } from "@/lib/utils";
 
 interface CellProps extends Omit<TableNode, "next" | "heads"> {
-  index: number; // row number
+  rowInTable: number;
+  colInTable: number;
 }
 
+const headerBgClassNames = ["bg-stone-300", "bg-stone-100"];
+
 const Cell = memo((props: CellProps) => {
-  const isDummy = props.row !== props.index;
+  const isDummy = isDummyType(props.type);
+  const classNames = props.classNames ?? [];
+  const isFirstRow = props.row === props.rowInTable;
+  const isLastRow = props.row + props.span - 1 === props.rowInTable;
+  const bgClassName =
+    props.type === "header" || props.type === "dummyHeader" ? headerBgClassNames[props.level % 2] : "";
 
   return (
-    <span
-      className={cn("tbl-cell", cellClassMap[props.type], ...(props.classNames ?? []))}
-      style={{ width: `${props.width}px`, height: isDummy ? `${globalStyle.rowHeight}px` : undefined }}
+    <div
+      id={props.id}
+      data-type={props.type}
+      data-position={`${props.rowInTable},${props.colInTable}`}
+      data-level={props.level}
+      className={cn(
+        "tbl-cell tbl-b-l tbl-b-r",
+        isFirstRow ? "tbl-b-t hover:bg-blue-100 dark:hover:bg-blue-900" : "",
+        isLastRow ? "tbl-b-b" : "",
+        bgClassName,
+        cellClassMap[props.type],
+        ...classNames,
+      )}
+      style={{
+        width: `${props.width}px`,
+        height: isFirstRow ? undefined : `${globalStyle.rowHeight}px`,
+      }}
     >
       {isDummy ? undefined : props.text}
-    </span>
+    </div>
   );
 });
 Cell.displayName = "Cell";

src/containers/editor/table/Table.tsx

@@ -3,7 +3,6 @@
 import { useRef } from "react";
 import Background from "@/components/Background";
 import { globalStyle } from "@/lib/table/style";
-import { getRow } from "@/lib/table/tableNode";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import Cell from "./Cell";
 import { useOnResize } from "./useOnResize";
@@ -16,7 +15,7 @@ export function Table() {
   const tableTree = useTableTree();
   const { width, height } = useOnResize(containerRef, tableTree);
   const virtualizer = useVirtualizer({
-    count: tableTree.root.span,
+    count: tableTree.grid.length,
     getScrollElement: () => virtualRef.current,
     estimateSize: (i) => globalStyle.rowHeight,
     overscan: 10,
@@ -27,20 +26,24 @@ export function Table() {
       <div
         ref={virtualRef}
         className="bg-white"
-        style={{ width: `${width}px`, height: `${height}px`, overflow: "auto" }}
+        style={{
+          width: `${width + globalStyle.scrollbarWidth}px`,
+          height: `${height}px`,
+          overflow: "auto",
+        }}
       >
         <div style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}>
-          {virtualizer.getVirtualItems().map(({ index, start }) => (
+          {virtualizer.getVirtualItems().map(({ index: row, start }) => (
             <div
-              key={index}
+              key={row}
               className="tbl-row"
               style={{
                 height: globalStyle.rowHeight,
                 transform: `translateY(${start}px)`,
               }}
             >
-              {getRow(tableTree.root, index).map((nd) => (
-                <Cell key={nd.id} {...nd} index={index} />
+              {tableTree.grid[row].map((nd, col) => (
+                <Cell key={`${row}-${col}`} {...nd} rowInTable={row} colInTable={col} />
               ))}
             </div>
           ))}

src/containers/editor/table/useTableTree.ts

@@ -38,11 +38,7 @@ export function useTableTree() {
     (async () => {
       const t = await window.worker.createTable();
       setTableTree(t);
-      console.l(
-        "create a new table:",
-        treeVersion,
-        nodeTo2dArray(t.root, (nd, row) => (nd.row === row ? nd.text : "")),
-      );
+      console.l("create a new table:", treeVersion, t);
       t.width && count("tableModeView");
     })();
   }, [usable, isTableView, treeVersion, setTableTree]);