CODEWITHSUNDEEP
flutter
atreeon
atreeon

Reputation: 24107

How do you display a Table / DataTable with expanding widths and heights depending on the cell content? (like a HTML table behaviour)

How to get the cell width AND height of a table / datatable (or other widget) to adjust depending on the content, how do you do this in Flutter?

This is the default table behaviour in HTML and I want that in Flutter because it is the best way to fit as much data as possible in a table.

Using a DataTable, the widths of each cell expand based on the length of the text in the cells. However, the cell heights (or row height) doesn't expand.

DataTable text truncates where the text is too long; the height of the cell is not expanded: enter image description here

Using a Table widget, the width of the cells do not adjust depending on the length of the content. The column widths do contract & expand but only as a fraction of the total allocated space for the widget and not depending on their content (using columnWidths & FixedColumnWidth).

Here, note how 'Medium column' has space to its right, 'Long column' should have expanded into that space: enter image description here

class TableDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return Table(
      columnWidths: {
        0: FixedColumnWidth(20),
      },
      defaultColumnWidth: FlexColumnWidth(),
      children: [
        TableRow(children: [Text('Short column'), Text('Long column'), Text('Medium column')]),
        TableRow(
          children: [
            Text('1'),
            Text('Some long content i would like to be wrapped when column width is not enought to fully display it'),
            Container(
              child: Text('Some more text'),
            )
          ],
        )
      ],
    );
  }
}

class DataTableDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Container(child: Text("Short column"), width: 100)),
        DataColumn(label: Container(child: Text("Long column"), width: 100)),
        DataColumn(label: Container(child: Text("Medium column"), width: 100)),
      ],
      rows: [
        DataRow(
          cells: [
            DataCell(Text('1')),
            DataCell(Text(//
                'Some long content i would like to be wrapped when column width is not enought to fully display it, Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not enought to fully display it')),
            DataCell(Container(child: Text('Some more text'))),
          ],
        ),
        DataRow(
          cells: [
            DataCell(Text('1')),
            DataCell(Text('Some long content i would like to be wrapped when column width is not enought to fully display it')),
            DataCell(Container(child: Text('Some more text'))),
          ],
        ),
        DataRow(
          cells: [
            DataCell(Text('1')),
            DataCell(Text('Some long content i would like to be wrapped when column width is not enought to fully display it')),
            DataCell(Container(child: Text('Some more text'))),
          ],
        ),
      ],
    );
  }
}

Upvotes: 0

Views: 3406

Answers (1)

Mou
Mou

Reputation: 2137

Use https://api.flutter.dev/flutter/rendering/IntrinsicColumnWidth-class.html in the columnWidths property of the Table

Upvotes: 2

Related Questions