How to render a fixed-width table with horizontal scroll support

[dreamer2q]

Hi, guys.

I encountered a problem that when the table has much content, it will overflow horizontally.

Therefore, I want to fix this and tried adding a SingleChildScrollView to enable scroll horizontally.

You know what, the table content just shrank to one line, although it can scroll horizontally.

I try to make it scrollable

'table': (_, child, attr, elem) {
        // return null;
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            height: 500,
            child: child,
          ),
        );
}

But I seem to break the table rendering, it turns out to be only a container showing TABLE SECTION (nothing more here, table content disappeared)

So how can I make table scroll horizontally while not breaking it?

Any help is appreciated.

[dreamer2q]

I have read issue #560
But this time, I got width from server.

The width is 720 in this example which is bigger than screen width.

Therefore, I want to have a table with 720px and a scrollable feature to avoid overflow.

<table class="lake-table" style="width: 720px;">
    <colgroup>
        <col width="240" span="1" />
        <col width="240" span="1" />
        <col width="240" span="1" />
    </colgroup>
    <tbody>
        <tr style="height: 33px;">
            <td rowspan="1" colspan="3" style="text-align: center;">
                <p><strong>This is a table!</strong></p>
            </td>
        </tr>
        <tr style="height: 33px;">
            <td>
                <p><br /></p>
            </td>
            <td>
                <p>
                </p>
            </td>
            <td>
                <p><br /></p>
            </td>
        </tr>
        <tr style="height: 33px;">
            <td>
                <p><br /></p>
            </td>
            <td>
                <p><br /></p>
            </td>
            <td>
                <p><br /></p>
            </td>
        </tr>
    </tbody>
</table>

[tneotia]

Can you send a screenshot of how the table looks with your customRender code? I can't visualize it.

[dreamer2q]

@tneotia

This is the screenshot, it can scroll horizontally, but nothing rendered

If I return null, the table will render as normal.

[tneotia]

@erickok is the above intentional? Seems like the customRender doesn't return table children correctly, or maybe it requires more code to render properly?

[erickok]

It seems you expected child to contain the table, but that I don't think that is ever true for a custom render? I'll take a look when I'm back at my computer.

What is rendered here is the placeholder which normally isn't shown, being replaced instead by the table.

[DFelten]

Our current workaround is to edit the html content. We wrap each table tag with a custom tag and use the custom renderer for this tag. There it's possible to use a SingleChildScrollView and add the child into it.

[erickok]

If we supply the element (tree) itself in the render context than you can do something like this:

customRender: {
  "table": (context, child) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: (context.tree as TableLayoutElement).toWidget(context),
    );
  }
},

Does that sound good? The downside there would be that you can't use %-based column widths any more, but I guess that makes sense? You can also wrap the element in a SizedBox with fixed width if that's what suits your use-case.

[dreamer2q]

@erickok

However, customRender's function parameter context does not has property tree.

/// The [RenderContext] is available when parsing the tree. It contains information
/// about the [BuildContext] of the `Html` widget, contains the configuration available
/// in the [HtmlParser], and contains information about the [Style] of the current
/// tree root.
class RenderContext {
  final BuildContext buildContext;
  final HtmlParser parser;
  final Style style;

  RenderContext({
    this.buildContext,
    this.parser,
    this.style,
  });
}

my flutter_html version is flutter_html: ^1.3.0

[tneotia]

@dreamer2q yes he created the PR #587 to add this property in. If it is merged we will update here accordingly. You can also try out the PR by switching to that branch.

[dreamer2q]

@dreamer2q yes he created the PR #587 to add this property in. If it is merged we will update here accordingly. You can also try out the PR by switching to that branch.

Good, at least we have a method to solve this,

but that's little confusing for me, if we have to hijack the render tree, extra documentation should be provided.

[tneotia]

Yes the docs will definitely be updated, I agree. With 1.3.0 we overhauled the README a whole bunch, likely this use case will go under examples for customRender.

[tneotia]

@erickok I think this can be closed. This is shown as an example in the example app, correct?

[erickok]

Yes, in the readme for 2.0.0 (which is not merged in yet).

[nicks258]

Still facing the same issue. I am using flutter_html: ^3.0.0-alpha.1

[praharshbhatt]

If we supply the element (tree) itself in the render context than you can do something like this:

customRender: {
  "table": (context, child) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: (context.tree as TableLayoutElement).toWidget(context),
    );
  }
},

Does that sound good? The downside there would be that you can't use %-based column widths any more, but I guess that makes sense? You can also wrap the element in a SizedBox with fixed width if that's what suits your use-case.

This Works!

[ghost]

I have a table but the image is like because in this table there is a (div) tag, so the table cannot be displayed, is there a way to remove the (div) or display it?

[Sub6Resources]

@Sotatek-TanDat6 I believe you can use the style property to achieve what you want.

For example:

Html(
  data: html,
  style: {
    '.se-table-selected-cell > div': Style(
      display: Display.none,
    ),
  }