DFelten
commented
3 years ago
- [ ] Add support for horizontal scrolling if table is too wide, related to #400
As a small suggestion our Widget Factory for tables. We have currently implemented here that tables may be a maximum of two times as wide as the screen width. The table is also scrollable only if it has more than two columns. Of course, these restrictions don't always work, but it works very well for our tables.
mixin ScrollableTableFactory on WidgetFactory {
@override
void parse(BuildMetadata meta) {
switch (meta.element.localName) {
case HTMLTag.table:
meta.register(BuildOp(
onWidgets: (meta, widgets) => listOrNull(
widgets.first.wrapWith(
(context, child) => ScrollableTableFromHtml(
element: meta.element,
child: child,
),
),
),
));
}
return super.parse(meta);
}
}
class ScrollableTableFromHtml extends StatelessWidget {
const ScrollableTableFromHtml({required this.child, required this.element});
final Widget child;
final dom.Element element;
@override
Widget build(BuildContext context) {
final double width = context.mediaQuery.size.width;
return _columnCount(element) <= 2
? child
: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: LimitedBox(maxWidth: width * 2, child: child),
);
}
int _columnCount(dom.Element element) {
final List<dom.Element> tableRows = element.getElementsByTagName('tr');
return _getCountOrNullByTag(tableRows, 'th') ?? _getCountOrNullByTag(tableRows, 'td') ?? 0;
}
int? _getCountOrNullByTag(List<dom.Element> tableRows, String tag) {
final int? count = tableRows.firstOrNull?.getElementsByTagName(tag).length;
return count != 0 ? count : null;
}
}
daohoangson
NickNevzorov
bksubhuti
vipranarayan14
makruban
style="width: 50"in columns, related to #209Previous work: #346