Overflow table to scroll horizontally

[Stsikinas]

I would like to overflow the table horizontally, in order to support multi-column tables, without wrapping on the available width. I see that from the style it's not possible and in customRender, I am not able to extract the table as flutter's table and wrap it in a scrollview.

[tneotia]

This seems interesting, I guess you mean something like GitHub mobile's table rendering method.

I am more concerned that you cannot extract the table in customRender. Would you mind sharing a reproducible example so we can see why that is?

[Stsikinas]

Thanks for the reply, first of all.
So, I receive the following

from server:

<table>
   <tr>
      <td colspan="7">
         <p><b>Πίνακας αποδοχών από 21/2/2019 έως 21/2/2021, διανομέων   καταστημάτων πλήρους απασχόλησης βάσει Σ.Σ.Ε. επισιτιστικών</b></p>
      </td>
   </tr>
   <tr>
      <td>
         <p><b>Χρόνια προϋπηρεσίας</b></p>
      </td>
      <td>
         <p><b>Βασικός μισθός</b></p>
      </td>
      <td>
         <p><b>Επίδομα τριετίας Ανά 10%</b></p>
      </td>
      <td>
         <p><b>Επίδομα Γάμου 10%</b></p>
      </td>
      <td>
         <p><b>Επίδομα ιδιαίτερων συνθηκών</b></p>
      </td>
      <td>
         <p><b>Σύνολο αγάμων</b></p>
      </td>
      <td>
         <p><b>Σύνολο εγγάμων</b></p>
      </td>
   </tr>
   <tr>
      <td>
         <p>0-3</p>
      </td>
      <td>
         <p>674,24</p>
      </td>
      <td>
         <p>0,00</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>741,66</p>
      </td>
      <td>
         <p>809,08</p>
      </td>
   </tr>
   <tr>
      <td>
         <p>3-6</p>
      </td>
      <td>
         <p>674,24</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>809,08</p>
      </td>
      <td>
         <p>876,50</p>
      </td>
   </tr>
   <tr>
      <td>
         <p>6-9</p>
      </td>
      <td>
         <p>674,24</p>
      </td>
      <td>
         <p>134,85</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>876,51</p>
      </td>
      <td>
         <p>943,93</p>
      </td>
   </tr>
   <tr>
      <td>
         <p>9-12</p>
      </td>
      <td>
         <p>674,24</p>
      </td>
      <td>
         <p>202,27</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>67,42</p>
      </td>
      <td>
         <p>943,93</p>
      </td>
      <td>
         <p>1.011,35</p>
      </td>
   </tr>
</table>

And the table is presented as follows:

I want to extract the table widget that is created and embed it in a horizontal scrollable widget to avoid the word wrapping.
But in the customRender property the child isn't parsed as a table....

[erickok]

I understand your use-case but wonder if this is something flutter_html should offer as standard. I'm not even sure where you'd set this 'preference'. As a (temporary, perhaps) workaround, could you not set the table width explicitly and wrap it in a horizontally scrolling container yourself?

By the way, I am not sure what the proper width would be anyway for your use-case. It we would let it scale to its intrinsic horizontal size then all content would be on one line and the row where you have your headers would be really wide.

[tneotia]

I agree with @erickok . We have customRender for these scenarios.

But in the customRender property the child isn't parsed as a table....

Yes this is correct, we do not return the widget but instead the bits and pieces the plugin uses internally to create the widgets. I suggest you have a look at layout_element.dart to understand how we build tables, and using customRender you can make a similar implementation albeit scrollable.

It may be a little bit of work but once you know what you're doing you can customize it to the nth degree.

[Stsikinas]

Thank you guys for the info. Will have a look at it and try to make the most of it! Nonetheless, you helped a lot.

[erickok]

My suggestion would be to try to have a

around the table, which (perhaps via a custom render) you fix to a certain size. You can then leave the whole table parsing/rednering logic as-is as you simply pass this as a child to that fixed-width container.