fix: table shows wrong width with 3 columns (#29)

Author: imwithye

markdown/02_table_example.md

@@ -17,7 +17,17 @@
 |  A3  |  B3  |  C3  |  D3  |  E3  |  F3  |  G3  |  H3  |  I3  |  J3   |
 |  A4  |  B4  |  C4  |  D4  |  E4  |  F4  |  G4  |  H4  |  I4  |  J4   |
 
-## Table With Long Text
+## Table With Long Text 1
+
+| Task | Priority | Deadline |
+|------|----------|----------|
+| Complete project documentation | High priority | End of week |
+| Review team performance metrics | Medium priority | Next Monday |
+| Schedule client meeting | Urgent priority | Tomorrow morning |
+| Update software dependencies | Low priority | End of month |
+| Prepare quarterly report | High priority | Friday afternoon |
+
+## Table With Long Text 2
 
 | Product Name | Category | Description | Price | Stock | Supplier | Location | Rating | Reviews | Status |
 |--------------|----------|-------------|-------|-------|----------|----------|--------|---------|--------|

src/renderers/table.tsx

@@ -51,15 +51,22 @@ const TableContextProvider = ({
   columnCount,
   children,
 }: TableContextProviderProps) => {
+  const { contentSize } = useMarkdownContext();
   const [columnWidths, setColumnWidths] = useState<number[]>(
     Array(columnCount).fill(0),
   );
 
   const setColumnWidth = useCallback(
     (index: number, width: number) => {
+      console.log("setColumnWidth", index, width);
       setColumnWidths((prev) => {
+        const minWidth = Math.max(contentSize.width / columnCount, 64);
+        const maxWidth = Math.min(contentSize.width, 180);
         const old = prev[index] ?? 0;
-        const newWidth = Math.min(Math.max(Math.max(old, width), 64), 180);
+        const newWidth = Math.min(
+          Math.max(Math.max(old, width), minWidth),
+          maxWidth,
+        );
         if (newWidth === old) return prev;
 
         const newColumnWidth = [
@@ -70,7 +77,7 @@ const TableContextProvider = ({
         return newColumnWidth;
       });
     },
-    [setColumnWidths],
+    [contentSize, columnCount, setColumnWidths],
   );
 
   return (
@@ -149,6 +156,11 @@ export const TableCellRenderer = ({
   const style = mergeStyles(styles.tableCell, {
     fontWeight: rowIndex === 0 ? "bold" : "normal",
   });
+  const measuredStyle = mergeStyles(style, {
+    width: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
+  });
 
   const padding = 8;
   const onTextLayout = useCallback(
@@ -171,21 +183,31 @@ export const TableCellRenderer = ({
   );
 
   return (
-    <View
-      style={{
-        width: width,
-        minHeight: 32,
-        padding: padding,
-        justifyContent: "center",
-      }}
-    >
-      <Text style={style}>{content}</Text>
+    <>
+      <View
+        style={{
+          width: width,
+          minHeight: 32,
+          padding: padding,
+          justifyContent: "center",
+        }}
+      >
+        <Text style={style}>{content}</Text>
+      </View>
       <Text
-        style={[style, { position: "absolute", opacity: 0, zIndex: -100 }]}
+        style={[
+          measuredStyle,
+          {
+            position: "absolute",
+            opacity: 0,
+            zIndex: -1000,
+          },
+        ]}
         onLayout={onTextLayout}
+        numberOfLines={1}
       >
         {content}
       </Text>
-    </View>
+    </>
   );
 };