How to Use Data Tables In Flutter

In today’s blog we’re going to learn how to use data tables in Flutter. The particular conventions and vocabulary used to describe tables differ depending on the situation. Tables also range greatly in terms of variety, structure, flexibility, terminology, representation, and use. Although we have already covered how to use a table here, this one is a material design called the Data Table. Let’s get started!

Data Tables In Flutter Fundamentals

Data tables can include interactive elements (like chips, buttons, or menus), non-interactive elements (like badges), and data query and manipulation tools. These are the principles you need to implement when using data tables in Flutter. Data tables must also allow for user interaction in order for a data presentation to be configurable and interactive. Finally, the data tables should be simple to use, with a logical layout that makes the content understandable.

You can also implement pagination on the data table with pagination controls. It can provide swift access to all pages while indicating that more pages exist. It controls the display number of rows per page, the total number of rows, and the left and right arrows for navigating pages.

Data Tables Implementation Code

class DataTableDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Tables'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          PaginatedDataTable(
            header: Text('Header Text'),
            rowsPerPage: 4,
            columns: [
              DataColumn(label: Text('Header A')),
              DataColumn(label: Text('Header B')),
              DataColumn(label: Text('Header C')),
              DataColumn(label: Text('Header D')),
            ],
            source: _DataSource(context),
          ),
        ],
      ),
    );
  }
}

class _Row {
  _Row(
    this.valueA,
    this.valueB,
    this.valueC,
    this.valueD,
  );

  final String valueA;
  final String valueB;
  final String valueC;
  final int valueD;

  bool selected = false;
}

class _DataSource extends DataTableSource {
  _DataSource(this.context) {
    _rows = <_Row>[
      _Row('Cell A1', 'CellB1', 'CellC1', 1),
      _Row('Cell A2', 'CellB2', 'CellC2', 2),
      _Row('Cell A3', 'CellB3', 'CellC3', 3),
      _Row('Cell A4', 'CellB4', 'CellC4', 4),
    ];
  }

  final BuildContext context;
  List<_Row> _rows;

  int _selectedCount = 0;

  @override
  DataRow getRow(int index) {
    assert(index >= 0);
    if (index >= _rows.length) return null;
    final row = _rows[index];
    return DataRow.byIndex(
      index: index,
      selected: row.selected,
      onSelectChanged: (value) {
        if (row.selected != value) {
          _selectedCount += value ? 1 : -1;
          assert(_selectedCount >= 0);
          row.selected = value;
          notifyListeners();
        }
      },
      cells: [
        DataCell(Text(row.valueA)),
        DataCell(Text(row.valueB)),
        DataCell(Text(row.valueC)),
        DataCell(Text(row.valueD.toString())),
      ],
    );
  }

  @override
  int get rowCount => _rows.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;
}

Conclusion

To conclude, data tables must also allow for user interaction in order for a data presentation to be configurable and interactive. They must be simple to use, with a logical layout that makes the content understandable. Pagination controls can provide swift access to all pages while indicating that more pages exist. You can check the official material design documentation here. Thank you for reading. If you found this useful, share it.