Fix GridPlacement.columnEnd cannot exceed column count when using rowspans and colspans in a table

[tneotia]

Fixes #685

Don't know if this is the correct fix, I still don't fully understand what is going on with the table rendering, but it seems to do the trick.

[ryan-berger]

@tneotia Maybe @erickok would be better to review this, but I don't understand the idea behind the fix.

Could you maybe document it so that I get what this code does to attempt to solve the problem?

[tneotia]

@ryan-berger so I guess the easiest way to explain it would be with an example:

HTML:

<table role="table">
	<tbody>
		<tr>
			<td rowspan="2">
				<p>CẤP HỌC</p>
			</td>
			<td colspan="2">
				<p>HỌC KỲ II</p>
			</td>
			<td rowspan="2">
				<p>NGÀY KẾT THÚC NĂM HỌC</p>
			</td>
		</tr>
		<tr>
			<td>
				<p>Ngày bắt đầu HKII</p>
			</td>
			<td>
				<p>Ngày kết thúc HKII</p>
			</td>
		</tr>
		<tr>
			<td>
				<p>Mầm non</p>
			</td>
			<td>
				<p>18/01/2021</p>
				<p>(thứ Hai)</p>
			</td>
			<td>
				<p>24/5/2021</p>
				<p>(thứ Hai)</p>
			</td>
			<td>
				<p>28/5/2021</p>
				<p>(thứ Sáu)</p>
			</td>
		</tr>
	</tbody>
</table>

Rendered:

CẤP HỌC	HỌC KỲ II		NGÀY KẾT THÚC NĂM HỌC
	Ngày bắt đầu HKII	Ngày kết thúc HKII
Mầm non	18/01/2021 (thứ Hai)	24/5/2021 (thứ Hai)	28/5/2021 (thứ Sáu)

So the main fix here is with columnRowOffset. This variable basically controls where each cell should go horizontally, since cell rowspans affect where they go. In the case of this example, this is what happens with that variable:

1. After row 1 it becomes [1 0 0 1 0]
2. After row 2 it becomes [0 0 0 1 0]
3. Stays the same for row 3.

As you can see, it added a "1" for the cells that had a rowspan > 1 in Row 1.

Wherever there is a "1" in the list, the cell will be skipped adding there. So that would mean:

1. Row 1 - cells added at positions 0, 1, 2, 3
2. Row 2 - cells added at positions 1, 2 (because there is a "1" at position 0 and 3)
3. Row 3 - cells added at positions 0, 1, 2, 4 (because there is a "1" at position 3)

The issue was with row 3 - there isn't a position 4 to render in LayoutGrid. Since Row 2 only had 2 cells, it didn't clear that "1" in the list after it was done iterating through the rows. So what this PR does is to clear any 1s after the length of the list of children in the current row, just to make sure the next row's children are positioned correctly in the list.

I don't think this should affect anything but @erickok is the better judge here as he made the original implementation.

(Hopefully that made sense)

[erickok]

I'll try to get my head on this tomorrow.

[erickok]

Ok there was a but more to it than your analysis. First of all, there are only 4 columns (in this example html) so the 5 numbers in that list was obviously not correct. And then there were some other edge cases where the counting was wrong. I fixed those in a new PR.

[erickok]

See #716 for the full fix