Flutter_html: Irregular row lengths in tables throw error

[drewbitt]

Table contains irregular row lengths.
Every TableRow in a Table must have the same number of children, so that every cell is filled. Otherwise, the table will contain holes.

Latest new-parser branch.
Using rich text fixes the issue.

Example:

<table>
<tbody>
<tr>
<td colspan="6">
<div style="text-align: center">&nbsp;Items</div>
</td>
</tr>
<tr>
<td colspan="1">Item Name</td>
<td colspan="1">Quantity</td>
<td colspan="1">Item&nbsp;Name</td>
<td colspan="1">Quantity&nbsp;</td>
<td colspan="1">Item&nbsp;Name</td>
<td colspan="1">Quantity&nbsp;</td>
</tr>
<tr>
<td colspan="1">Empty backpack</td>
<td colspan="1">1</td>
<td colspan="1">Spare clothes bundle</td>
<td colspan="1">1</td>
<td colspan="1">Rock bread</td>
<td colspan="1">10</td>
</tr>
<tr>
<td colspan="1">Dried meat</td>
<td colspan="1">10</td>
<td colspan="1">Deer waterskin</td>
<td colspan="1">5</td>
<td colspan="1">Sleeping bag</td>
<td colspan="1">1</td>
</tr>
<tr>
<td colspan="1">Flint</td>
<td colspan="1">1</td>
<td colspan="1">Kitchen knife</td>
<td colspan="1">1</td>
<td colspan="1">Skinning knife</td>
<td colspan="1">1</td>
</tr>
<tr>
<td colspan="1">Cooking&nbsp;pot</td>
<td colspan="1">1</td>
<td colspan="1">Whetstone Q100</td>
<td colspan="1">2</td>
<td colspan="1">Wool cloak</td>
<td colspan="1">1</td>
</tr>
<tr>
<td colspan="1">Firewood</td>
<td colspan="1">10</td>
<td colspan="1">Rose coin</td>
<td colspan="1">1</td>
<td colspan="1">Gold coin</td>
<td colspan="1">10</td>
</tr>
<tr>
<td colspan="1">Silver coin</td>
<td colspan="1">50</td>
<td colspan="1">Copper coin</td>
<td colspan="1">100</td>
</tr>
</tbody>
</table>

That's a valid HTML table.

[Sub6Resources]

Thank you. I'm aware of the issue and am working on a fix.

[vikalpnagar]

@Sub6Resources I am also facing this issue. Is there a update on its fix or a workaround?

@drewbitt I have also tried new-parser branch but still getting the same error.

[drewbitt]

This should've been done before 1.0 and the removal of useRichText. It is breaking.

[kartercs]

Same issue here, i'm trying to display an html email with this package and i can't render a lot of them. The workaround for now is that i added "blacklistedElements: ['table']" so that i can render the rest without error but i hope it get fixed.
Thanks for the package tho :).

[brightonc12]

facing the same problem here.. and i don't want to remove the table element for a work around

[erickok]

I gave a short go at this, but the problem is that the lib currently uses Flutter's Table (to great effect) and that widget doesn;t support irregular row or column lengths... So we'd have to swap out the implementation for something that can.

[TungWang]

I am using new-parser branch, but i am still facing this problem.
This is a great package, and i hope this bug will be fixed soon.
Thanks!

[MrJohn2014]

Same issue here that Table contains irregular row lengths. I also tried new-parser branch, but not working on my end. I really need this package to parse html data, please help me @Sub6Resources

[Danm72]

Any update?

[kartercs]

Sadly looking at the #323 we can see that it shouldn't come that soon if nobody tries :/

[tneotia]

For all those looking for a fix on this issue, I think I have a temporary fix until we can get something that is proven to be reliable.

OP's table

The table in my own app that gave this exception

('Trimester1' is part of the table, and that row only had that one element where all the other rows have 3 cells).

See the PR for more details on what I did for this temporary fix!

[ngominhtrungit]

hello, i have same error, how to fix it? pls help

[erickok]

Cross-posting from PR #435:

I have tried using flutter_layout_grid as well, but that library doesn't seem to support intrinsic heights at all (despite claiming otherwise). Even their examples would not render on mobile Flutter for me, always throwing 'RenderConstrainedBox object was given an infinite size during layout' errors. 🤷

Using Flutter's Rows and Columns _could_ work but that'd require quite some wrapping of rows/columns inside those rows/columns... very fair from ideal. flutter_html < 1.0 did do this, but only supported colspan, not rowspan.

I considered flutter_staggered_grid_view but that really works just when it is it's own scroll container.

spannable_grid looked promising too, but it actually fixes every cell in the grid to be rectangular.

The Flutter isssue asking for colspan/rowspan support is totally dormant. It also doesn't mention any 3th party alternatives.

😡

I guess we have to build something custom...

[erickok]

Actually... I got something working using flutter_layout_grid; see https://github.com/Sub6Resources/flutter_html/compare/master...vrtdev:feature/irregular-tables

It probably does not support all styling options yet, and the behaviour doesn't _exactly_ match the original implementation, but it certianly is getting close. Would love feedback.

[tneotia]

Looks great! I think the best way to showcase this would be to add a border around the cells, but then again that's a styling thing.

What exactly doesn't match the original? Looks fine from the picture.

[erickok]

The vertical alignment of the cells is different. We might get away with not supporting vertical alignment in cells, but as you can see in the screenshot the bottom line (which is set on the <tr> tag) is not aligning for the rowspan and colspan cells, as the intrinsic height of them are different. I am looking for a solution.

At the same time, I am realistic enough to not expect a 100% support of all the things html tables can do. But in the end that is up to this project's owners.

[erickok]