How to make the table take up 100% width

[mdddj]

[itsdani121]

have you found answer?

[tneotia]

You might be able to use customRender ( see second example for customRender in readme), but I don't know for sure if it will expand the table to fill the width. If not you might also be able to modify the HTML to specify width of table as 100%.

[itsdani121]

@tneotia its not work

[erickok]

I took a deeper look at this, which is why it took a while to respond. As it stands, this isn't so easy to achieve.

If you use percentage-based column widgtes such as via a <colgroup> then you can have full-width tables already. Of course you would need to set a percentage yourself for each column, so it's probably not (always) what you want. Also, you have to do this from the html.

Although we said we support css width and height properties, we actually didn't. I created a PR for that. But this is not sufficient for your issue, because it still does not implement/support percentage-based widths or heights. It would be possible but quite a bunch of work to do this. For example - and specifically for tables - you can't just tell a Container to size it's children to some percentage.

On top of this, the table currently uses the intrinsic content sizes to size itself using https://pub.dev/packages/flutter_layout_grid and sizes the table (the grid) using GridFit.loose. But in your case, where you have only columns that size itself via the content, you want to use GridFit.expand instead. There is currently no way to do that yourself, bar writing a full custom render and copying all the code.

Even if we merge the css-based width/height support, it remains to be seen if percentage-based widths can be supported reliably. I want to support your case but it is really not so easy.