Feature request: configurable per-column max width for tables (avoid overly wide columns on mobile)

[cyrasafia]

Feature request

Is there an existing issue for this?

I searched the issue tracker (table column width, max, constrain, wrap, truncate) and did not find one. The closest existing issues are about cell alignment (#73, #48, flutter/flutter#125872) and scrollbar positioning (#30), not about constraining column width.

Use case

On mobile screens, a Markdown table column whose content is very long (e.g. a code snippet, a long path, or a verbose description) gets rendered far wider than the viewport. With the current horizontal-scroll mechanism the whole table scrolls, but a single overly-wide column still dominates the layout and makes the table hard to read on a phone — the reader must scroll a long way horizontally just to reach the next column, and the other (narrow) columns get squeezed into the remaining space.

It would be very useful to be able to cap the maximum width of each column so that:

• Narrow columns keep their natural width (no unnecessary stretching).
• Overly-wide columns are capped at a configurable maximum and their content wraps (or the column scrolls/ellipsizes) instead of growing unbounded.
• The table as a whole still scrolls horizontally only when the sum of the (capped) column widths exceeds the viewport.

Proposal

Add a way to define a maximum column width, e.g. one of:

1. A new MarkdownStyleSheet field such as tableMaxColumnWidth: double? (or TableColumnWidth?) that caps every column.

2. Extend the horizontal-scroll trigger check in builder.dart so that composite TableColumnWidth types are also recognized. Today the scroll branch only fires for the concrete types FixedColumnWidth / IntrinsicColumnWidth:

   // builder.dart (~line 448)
   if (styleSheet.tableColumnWidth is FixedColumnWidth ||
       styleSheet.tableColumnWidth is IntrinsicColumnWidth) {
     child = _ScrollControllerBuilder(... child: _buildTable());
   } else {
     child = _buildTable();
   }

   A consumer can already express "natural width, but no wider than N" using the Flutter framework's built-in MinColumnWidth(const IntrinsicColumnWidth(), const FixedColumnWidth(N)). However, because the check above uses is against the two concrete types, MinColumnWidth / MaxColumnWidth are not recognized, so the table falls back to the non-scrolling branch and the cap is ineffective (the table gets squeezed instead of scrolling).

   Recognizing composite column-width types (or adding a dedicated max-width field that the builder applies internally) would let callers combine IntrinsicColumnWidth with an upper bound and keep the horizontal scroll behavior.

Why not a custom MarkdownElementBuilder for table?

Registering a custom builder for the table tag does not work today: the else if (tag == 'table') branch in builder.dart (~line 447) unconditionally overwrites child with _buildTable(), regardless of whether a builder was registered. Unlike pre (which wraps the builder result) and hr (which guards with if (!builders.containsKey(tag))), the table branch neither guards against a registered builder nor wraps its result, so a custom table builder's return value is discarded. This means consumers currently have no extension point to customize table layout/column widths.

Desired behavior (example)

MarkdownBody(
  data: markdownWithAWideColumn,
  styleSheet: MarkdownStyleSheet(
    tableColumnWidth: const IntrinsicColumnWidth(),
    // proposed:
    tableMaxColumnWidth: 280, // each column capped at 280 logical px; content wraps beyond that
    tableScrollbarThumbVisibility: true,
  ),
)

• A column with short content → stays at its intrinsic width.
• A column with very long content → capped at 280px, content wraps.
• If the sum of capped widths > viewport → the table scrolls horizontally (existing Scrollbar + SingleChildScrollView).

Environment

• flutter_markdown_plus: 1.0.12
• Flutter: 3.44.6 / Dart 3.12.2

Thank you for maintaining the package!