Got it. Need clean up and tests

packages/two_dimensional_scrollables/example/lib/main.dart

@@ -43,20 +43,26 @@ class TableExample extends StatefulWidget {
 class _TableExampleState extends State<TableExample> {
   final Map<TableVicinity, (int, int)> mergedRows = <TableVicinity, (int, int)>{
     // TableVicinity in merged cell : (start, span)
-    TableVicinity.zero: (0, 2),
-    TableVicinity.zero.copyWith(row: 1): (0, 2),
-    const TableVicinity(row: 1, column: 1): (1, 2),
-    const TableVicinity(row: 2, column: 1): (1, 2),
-    const TableVicinity(row: 2, column: 2): (2, 2),
-    const TableVicinity(row: 3, column: 2): (2, 2),
+    // TableVicinity.zero : (0, 2),
+    // TableVicinity.zero.copyWith(row: 1) : (0, 2),
+    // const TableVicinity(row: 1, column: 1) : (1, 2),
+    // const TableVicinity(row: 2, column: 1) : (1, 2),
+    const TableVicinity(row: 2, column: 2) : (2, 2),
+    const TableVicinity(row: 2, column: 3) : (2, 2),
+    const TableVicinity(row: 3, column: 2) : (2, 2),
+    const TableVicinity(row: 3, column: 3) : (2, 2),
   };
 
   final Map<TableVicinity, (int, int)> mergedColumns = <TableVicinity, (int, int)>{
     // TableVicinity in merged cell : (start, span)
-    const TableVicinity(row: 0, column: 2) : (2, 2),
-    const TableVicinity(row: 0, column: 3) : (2, 2),
-    const TableVicinity(row: 3, column: 0) : (0, 2),
-    const TableVicinity(row: 3, column: 1) : (0, 2),
+    // TableVicinity.zero.copyWith(column: 2) : (2, 2),
+    // TableVicinity.zero.copyWith(column: 3) : (2, 2),
+    // const TableVicinity(row: 3, column: 0) : (0, 2),
+    // const TableVicinity(row: 3, column: 1) : (0, 2),
+    const TableVicinity(row: 2, column: 2) : (2, 2),
+    const TableVicinity(row: 2, column: 3) : (2, 2),
+    const TableVicinity(row: 3, column: 2) : (2, 2),
+    const TableVicinity(row: 3, column: 3) : (2, 2),
   };
 
   @override
@@ -77,17 +83,11 @@ class _TableExampleState extends State<TableExample> {
 
   TableViewCell _buildCell(BuildContext context, TableVicinity vicinity) {
     if (mergedColumns.keys.contains(vicinity) || mergedRows.keys.contains(vicinity)) {
-      print('Vicinity $vicinity has: \n '
-        '\t rowMergeStart: ${mergedRows[vicinity]?.$1}\n'
-        '\t rowMergeSpan: ${mergedRows[vicinity]?.$2}\n'
-        '\t columnMergeStart: ${mergedColumns[vicinity]?.$1}\n'
-        '\t columnMergeSpan: ${mergedColumns[vicinity]?.$2} '
-      );
       return TableViewCell(
         rowMergeStart: mergedRows[vicinity]?.$1,
         rowMergeSpan: mergedRows[vicinity]?.$2,
-        // columnMergeStart: mergedColumns[vicinity]?.$1,
-        // columnMergeSpan: mergedColumns[vicinity]?.$2,
+        columnMergeStart: mergedColumns[vicinity]?.$1,
+        columnMergeSpan: mergedColumns[vicinity]?.$2,
         child: const Center(
           child: Text('Merged'),
         ),
@@ -111,27 +111,27 @@ class _TableExampleState extends State<TableExample> {
       case 3:
         color = Colors.green;
       default:
-        color = Colors.transparent;
+        color = Colors.red;
     }
 
     return TableSpan(
-      extent: const FixedTableSpanExtent(100.0),
-      // backgroundDecoration: TableSpanDecoration(
-      //   color: color,
-      //   border: const TableSpanBorder(
-      //     leading: BorderSide(),
-      //     trailing: BorderSide(),
-      //   ),
-      // ),
+      extent: const FixedTableSpanExtent(200.0),
+      backgroundDecoration: TableSpanDecoration(
+        color: color,
+        border: const TableSpanBorder(
+          leading: BorderSide(),
+          trailing: BorderSide(),
+        ),
+      ),
     );
   }
 
   TableSpan _buildColumnSpan(int index) {
     return const TableSpan(
-      extent: FixedTableSpanExtent(100.0),
-      // foregroundDecoration: TableSpanDecoration(
-      //   border: TableSpanBorder(leading: BorderSide(), trailing: BorderSide(),),
-      // ),
+      extent: FixedTableSpanExtent(200.0),
+      foregroundDecoration: TableSpanDecoration(
+        border: TableSpanBorder(leading: BorderSide(), trailing: BorderSide(),),
+      ),
     );
   }
 }

packages/two_dimensional_scrollables/lib/src/table_view/table.dart

@@ -966,6 +966,12 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
     }
   }
 
+  @override
+  RenderBox? getChildFor(ChildVicinity vicinity, { bool allowMerged = true, }) {
+    return super.getChildFor(vicinity)
+        ?? (allowMerged ? _getMergedChildFor(vicinity as TableVicinity) : null);
+  }
+
   RenderBox _getMergedChildFor(TableVicinity vicinity) {
     // A merged cell spans multiple vicinities, but only lays out one child for
     // the full area. Returns the child that has been laid out to span the given
@@ -981,7 +987,6 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
     required TableVicinity trailing,
     required Offset offset,
   }) {
-    print('paint cells');
     // Column decorations
     final LinkedHashMap<Rect, TableSpanDecoration> foregroundColumns =
         LinkedHashMap<Rect, TableSpanDecoration>();
@@ -996,7 +1001,7 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
         final List<(RenderBox, RenderBox)> decorationCells = <(RenderBox, RenderBox)>[];
         late RenderBox? leadingCell;
         late RenderBox? trailingCell;
-        if ((_mergedColumns.isEmpty || !_mergedColumns.contains(column)) && _mergedRows.isEmpty) {
+        if (_mergedColumns.isEmpty || !_mergedColumns.contains(column)) {
           // One decoration across the whole column.
           decorationCells.add((
             getChildFor(TableVicinity(column: column, row: leading.row,))!, // leading
@@ -1006,26 +1011,29 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
           // Walk through the rows to separate merged cells for decorating. A
           // merged column takes the decoration of its leading column.
           int currentRow = leading.row;
-          print('column: $column trailing.row: ${trailing.row}');
           while (currentRow <= trailing.row) {
-            print('currentRow: $currentRow');
             TableVicinity vicinity = TableVicinity(column: column, row: currentRow,);
-            leadingCell = getChildFor(vicinity) ?? _getMergedChildFor(vicinity);
-            if (parentDataOf(leadingCell).columnMergeStart != null) {
-              // Merged cell decorated individually.
-              print('column $column is merged');
+            leadingCell = getChildFor(vicinity);
+            if (parentDataOf(leadingCell!).columnMergeStart != null) {
+              // Merged portion decorated individually.
               decorationCells.add((leadingCell, leadingCell));
-              currentRow ++;
+              currentRow++;
               continue;
             }
             RenderBox? nextCell = leadingCell;
-            while (nextCell != null && parentDataOf(nextCell).columnMergeStart == null) {
+            while (nextCell != null &&
+                parentDataOf(nextCell).columnMergeStart == null) {
+              final TableViewParentData parentData = parentDataOf(nextCell);
+              if (parentData.rowMergeStart != null) {
+                currentRow = parentData.rowMergeStart! + parentData.rowMergeSpan!;
+              } else {
+                currentRow += 1;
+              }
               trailingCell = nextCell;
-              vicinity = vicinity.copyWith(row: currentRow++);
-              nextCell = getChildFor(vicinity);
+              vicinity = vicinity.copyWith(row: currentRow);
+              nextCell = getChildFor(vicinity, allowMerged: false);
             }
             decorationCells.add((leadingCell, trailingCell!));
-            currentRow--;
           }
         }
 
@@ -1085,8 +1093,6 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
       }
     }
 
-    print('columns sorted');
-
     // Row decorations
     final LinkedHashMap<Rect, TableSpanDecoration> foregroundRows =
         LinkedHashMap<Rect, TableSpanDecoration>();
@@ -1105,10 +1111,8 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
         if (_mergedRows.isEmpty || !_mergedRows.contains(row)) {
           // One decoration across the whole row.
           decorationCells.add((
-            getChildFor(
-                TableVicinity(column: leading.column, row: row,))!, // leading
-            getChildFor(
-                TableVicinity(column: trailing.column, row: row,))!, // trailing
+            getChildFor(TableVicinity(column: leading.column, row: row,))!, // leading
+            getChildFor(TableVicinity(column: trailing.column, row: row,))!, // trailing
           ));
         } else {
           // Walk through the columns to separate merged cells for decorating. A
@@ -1119,22 +1123,27 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
               column: currentColumn,
               row: row,
             );
-            leadingCell = getChildFor(vicinity) ?? _getMergedChildFor(vicinity);
-            if (parentDataOf(leadingCell).rowMergeStart != null) {
-              // Merged cell decorated individually.
+            leadingCell = getChildFor(vicinity);
+            if (parentDataOf(leadingCell!).rowMergeStart != null) {
+              // Merged portion decorated individually.
               decorationCells.add((leadingCell, leadingCell));
               currentColumn++;
               continue;
             }
             RenderBox? nextCell = leadingCell;
             while (nextCell != null &&
                 parentDataOf(nextCell).rowMergeStart == null) {
+              final TableViewParentData parentData = parentDataOf(nextCell);
+              if (parentData.columnMergeStart != null) {
+                currentColumn = parentData.columnMergeStart! + parentData.columnMergeSpan!;
+              } else {
+                currentColumn += 1;
+              }
               trailingCell = nextCell;
-              vicinity = vicinity.copyWith(column: currentColumn++);
-              nextCell = getChildFor(vicinity);
+              vicinity = vicinity.copyWith(column: currentColumn);
+              nextCell = getChildFor(vicinity, allowMerged: false);
             }
             decorationCells.add((leadingCell, trailingCell!));
-            currentColumn--;
           }
         }
 
@@ -1193,7 +1202,6 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
         }
       }
     }
-    print('rows sorted');
 
     // Get to painting.
     // Painting is done in row or column major ordering according to the main
@@ -1248,7 +1256,7 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
     for (int column = leading.column; column <= trailing.column; column++) {
       for (int row = leading.row; row <= trailing.row; row++) {
         final TableVicinity vicinity = TableVicinity(column: column, row: row);
-        final RenderBox? cell = getChildFor(vicinity);
+        final RenderBox? cell = getChildFor(vicinity, allowMerged: false);
         if (cell == null) {
           // Covered by a merged cell
           assert(_mergedVicinities.keys.contains(vicinity));

packages/two_dimensional_scrollables/lib/src/table_view/table_cell.dart

@@ -67,6 +67,21 @@ class TableViewParentData extends TwoDimensionalViewportParentData {
 
   ///
   int? columnMergeSpan;
+
+  @override
+  String toString() {
+    String mergeDetails = '';
+    if (rowMergeStart != null || columnMergeStart != null) {
+      mergeDetails += ', merged';
+    }
+    if (rowMergeStart != null) {
+      mergeDetails += ', rowMergeStart=$rowMergeStart, rowMergeSpan=$rowMergeSpan';
+    }
+    if (columnMergeStart != null) {
+      mergeDetails += ', columnMergeStart=$columnMergeStart, columnMergeSpan=$columnMergeSpan';
+    }
+    return super.toString() + mergeDetails;
+  }
 }
 
 ///