Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

DataTable

The DataTable control displays table data. DataTable requires row and column Settings as follows:

DataTable(
  columns: [
    DataColumn(label: Text('name')),
    DataColumn(label: Text('age')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('the old meng')),
      DataCell(Text('18')),]),],)Copy the code

The columns argument is the DataTable column, and the rows argument is each row of the DataTable. The effect is as follows:

! [image-20200303200953329](/Users/mengqingdong/Library/Application Support/typora-user-images/image-20200303200953329.png)

To add a row of data, just add a DataRow, as follows:

DataTable(
      ...
      rows: [
        DataRow(cells: [
          DataCell(Text('the old meng')),
          DataCell(Text('18')),
        ]),
        DataRow(cells: [
          DataCell(Text('rhubarb')),
          DataCell(Text('20')),]),],)Copy the code

Display the sort icon in the table header:

DataTable(
  sortColumnIndex: 1,
  sortAscending: true,...).Copy the code

SortColumnIndex indicates the index of the table to display the sort icon. SortAscending indicates the ascending or descending order. The effect is as follows:

Note here that the DataTable itself cannot sort the data; these parameters are only cosmetic controls.

DataColumn

By default, data is left-aligned, so to make a column right-aligned, simply set the numeric parameter true in DataColumn as follows:

 DataTable(
  columns: [
    DataColumn(label: Text('name')),
    DataColumn(label: Text('age'),numeric: true),],...).Copy the code

Effect:

Setting the DataColumn tooltip parameter means that a prompt will be displayed when the header is used as follows:

DataColumn(label: Text('name'),tooltip: 'Long press prompt')
Copy the code

Long press prompt:

The onSort callback is used when the user clicks the DataColumn header. The first parameter in onSort in columnIndex indicates the index. Ascending indicates either ascending or descending.

DataColumn(label: Text('age'), onSort: (int columnIndex, bool ascending){
	// Sorting algorithm
}),
Copy the code

DataRow

To show that one row is selected, set the selected argument to true as follows:

DataRow(
  selected: true,
  ...
)
Copy the code

The effect is as follows:

The onSelectChanged parameter is the callback for clicking each row of data and is used as follows:

DataRow(
	onSelectChanged: (selected){
	}
	...
)
Copy the code

The onSelectChanged parameter is set to display a check box in front of each row of data and the header as follows:

Add the selected effect to the User Model class and add the selected property to indicate whether the current row is selected:

class User {
  User(this.name, this.age, {this.selected = false});

  String name;
  int age;
  bool selected;
}
Copy the code

Modify data:

List<User> data = [
  User('the old meng'.18),
  User(Old meng '1'.19,selected: true),
  User(Old meng '2'.20),
  User('the old meng 3'.21),
  User('the old meng 4'.22)];Copy the code

To build the DataTable:

List<DataRow> dateRows = [];
    for (int i = 0; i < data.length; i++) {
      dateRows.add(DataRow(
        selected: data[i].selected,
        onSelectChanged: (selected){
          setState(() {
            data[i].selected = selected;
          });
        },
        cells: [
          DataCell(Text('${data[i].name}')),
          DataCell(Text('${data[i].age}')),])); }return DataTable(columns: [
      DataColumn(label: Text('name')),
      DataColumn(
        label: Text('age'),
      ),
    ], rows: dateRows);
Copy the code

The effect is as follows:

We do not control the select all/Deselect all checkboxes in the table header, a big question: Select all/deselect all. If the selected parameters in User are true, the selected parameters in User are true. Quite simply, onSelectChanged is called back once for each row.

DataCell

DataCell is each child of a DataRow control. DataCell’s child control does not have to be text, but can also be any component such as an icon.

DataCell(Text('name'),showEditIcon: true)
Copy the code

The effect is as follows:

The placeholder parameter is the same, set to true, only the text style has changed, and the onTap callback is the click callback.

DataCell(Text('name'),showEditIcon: true,onTap: (){
  print('DataCell onTap');
},placeholder: true)
Copy the code

The effect is as follows:

The sorting

The DateTable does not have a sorting function. When the user clicks on the table header, the data is sorted by the table.

Data Model class:

class User {
  User(this.name, this.age);

  final String name;
  final int age;
}
Copy the code

Initialize data and default sort:

List<User> data = [
  User('the old meng'.18),
  User(Old meng '1'.19),
  User(Old meng '2'.20),
  User('the old meng 3'.21),
  User('the old meng 4'.22)];var _sortAscending = true;
Copy the code

To build the DataTable:

DataTable(
    sortColumnIndex: 1,
    sortAscending: _sortAscending,
    columns: [
      DataColumn(label: Text('name')),
      DataColumn(label: Text('age'), onSort: (int columnIndex, bool ascending){
        setState(() {
          _sortAscending = ascending;
          if(ascending){
            data.sort((a, b) => a.age.compareTo(b.age));
          }else{ data.sort((a, b) => b.age.compareTo(a.age)); }}); }), ], rows: data.map((user) {return DataRow(cells: [
        DataCell(Text('${user.name}')),
        DataCell(Text('${user.age}'))); }).toList())Copy the code

The effect is as follows:

If you want to add a sort to the name column, change it as follows:

var _sortAscending = true;
var _sortColumnIndex =0;
DataTable(
        sortColumnIndex: _sortColumnIndex,
        sortAscending: _sortAscending,
        columns: [
          DataColumn(label: Text('name'),onSort: (int columnIndex, bool ascending){
            setState(() {
              _sortColumnIndex = columnIndex;
              _sortAscending = ascending;
              if(ascending){
                data.sort((a, b) => a.name.compareTo(b.name));
              }else{ data.sort((a, b) => b.name.compareTo(a.name)); }}); }), DataColumn(label: Text('age'), onSort: (int columnIndex, bool ascending){
            setState(() {
              _sortColumnIndex = columnIndex;
              _sortAscending = ascending;
              if(ascending){
                data.sort((a, b) => a.age.compareTo(b.age));
              }else{ data.sort((a, b) => b.age.compareTo(a.age)); }}); })],...).Copy the code

The effect is as follows:

Deal with incomplete data display

The DataTable can be wrapped with SingleChildScrollView when the table has a large number of columns. If the table is incomplete, the DataTable can be scrolled as follows:

List<DataRow> dateRows = [];
for (int i = 0; i < data.length; i++) {
  dateRows.add(DataRow(
    cells: [
      DataCell(Text('${data[i].name}')),
      DataCell(Text('${data[i].age}')),
      DataCell(Text('male')),
      DataCell(Text('2020')),
      DataCell(Text('10')),])); }return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(columns: [
    DataColumn(label: Text('name')),
    DataColumn(
      label: Text('age'),
    ),
    DataColumn(
      label: Text('gender'),
    ),
    DataColumn(
      label: Text('Year of birth'),
    ),
    DataColumn(
      label: Text('Birth month'),
    ),
  ], rows: dateRows),
);
Copy the code

The effect is as follows:

Is today’s article helpful to you? If so, please leave a comment and a thumbs-up at the bottom of the article to show my support. Your comments, thumbs-up and forwarding concerns are my motivation to keep updating!

Read more:

  • Overview of the Flutter series
  • Flutter ListWheelScrollView Widgets
  • Flutter CupertinoActionSheet Widgets
  • Flutter PageView of Widgets

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com