Flutter pagination table control

Old Meng guide: the first 2 days have readers asked whether there is a pagination function of the table control, today pagination function of the table control details to come.

PaginatedDataTable

PaginatedDataTable is a PaginatedDataTable that generates a batch of data, typically retrieved from the server ina project, defining the model class:

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

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

Generated data:

List<User> _data = [];

@override
  void initState() {
    List.generate(100, (index) {
      _data.add(User('the old meng$index', index % 50, index % 2= =0 ? 'male' : 'woman'));
    });
    super.initState();
  }
Copy the code

The basic usage of PaginatedDataTable is as follows:

PaginatedDataTable(
  header: Text('header'),
  columns: [
    DataColumn(label: Text('name')),
    DataColumn(label: Text('gender')),
    DataColumn(label: Text('age')),
  ],
  source: MyDataTableSource(_data),
)
Copy the code

Header represents the top control of the table.

Columns represent a column header control for each column.

Source: DataTableSource source: DataTableSource

class MyDataTableSource extends DataTableSource {
  MyDataTableSource(this.data);

  final List<User> data;

  @override
  DataRow getRow(int index) {
    if (index >= data.length) {
      return null;
    }
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text('${data[index].name}')),
        DataCell(Text('${data[index].sex}')),
        DataCell(Text('${data[index].age}')),,); }@override
  int get selectedRowCount {
    return 0;
  }

  @override
  bool get isRowCountApproximate {
    return false;
  }

  @override
  int get rowCount {
    returndata.length; }}Copy the code

The effect is as follows:

ByIndex is used to return data. Cells represents the data in each table. The number of cells must be the same as the number of columns in PaginatedDataTable.

SelectedRowCount is the number of rows selected, and notice that this is not the index, this is the total number of rows selected.

IsRowCountApproximate: If isRowCountApproximate is set to true, the number of rows will be infinite, so isRowCountApproximate is set to false.

RowCount represents the number of rows. This attribute is not valid if isRowCountApproximate is set to true.

Set actions, displayed at the right end of the header, as follows:

PaginatedDataTable(
  header: Text('header'),
  actions: <Widget>[
    IconButton(icon: Icon(Icons.add),onPressed: (){},),
    IconButton(icon: Icon(Icons.delete),onPressed: (){},),
  ],
  ...
)
Copy the code

The effect is as follows:

RowsPerPage represents the number of rows to display per page. The default is 10 rows. Set 5 rows as follows:

PaginatedDataTable(
  rowsPerPage: 5,...).Copy the code

If onRowsPerPageChanged is not NULL, the option to display rows per page appears in the lower left corner as follows:

var _rowsPerPage = 5;
PaginatedDataTable(
  onRowsPerPageChanged: (v) {
    setState(() {
      _rowsPerPage = v;
    });
  },
  availableRowsPerPage: [5.10.15.16],
  rowsPerPage: _rowsPerPage,
  ...
)
Copy the code

The effect is as follows:

Click the array that appears availableRowsPerPage Settings. OnRowsPerPageChanged is a callback after selecting one of the options to update the rowsPerPage property.

When too much data is displayed, the PaginatedDataTable needs to be wrapped ina SingleChildScrollView to scroll through the data:

SingleChildScrollView(
  child: PaginatedDataTable()
)
Copy the code

OnPageChanged is a page-turn callback that returns the index of the first data on the current page:

PaginatedDataTable(
  onPageChanged: (page){
    print('onPageChanged:$page');
  },
Copy the code

The printed data is:

flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40
Copy the code

The sorting

Sequence descending setting:

PaginatedDataTable(
  sortColumnIndex: 1,
  sortAscending: false,...).Copy the code

The effect is as follows:

When the user clicks on the table header, the data can be sorted according to the data in the column. The usage is as follows:

var _sortAscending = true;

_buildPaginatedDataTable() {
  return PaginatedDataTable(
    header: Text('header'),
    sortColumnIndex: 2,
    sortAscending: _sortAscending,
    columns: [
      DataColumn(label: Text('name')),
      DataColumn(label: Text('gender')),
      DataColumn(
          label: Text('age'),
          onSort: (index, sortAscending) {
            setState(() {
              _sortAscending = sortAscending;
              if (sortAscending) {
                _data.sort((a, b) => a.age.compareTo(b.age));
              } else{ _data.sort((a, b) => b.age.compareTo(a.age)); }}); }), ], source: MyDataTableSource(_data), ); }Copy the code

The effect is as follows:

The selected

Each row can be preceded by a check box to indicate whether the current row is selected and whether the property is selected in User, as follows:

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

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

Add a check box:

@override
DataRow getRow(int index) {
  if (index >= data.length) {
    return null;
  }
  return DataRow.byIndex(
    index: index,
    selected: data[index].selected,
    onSelectChanged: (selected) {
      data[index].selected = selected;
      notifyListeners();
    },
    cells: [
      DataCell(
        Text('${data[index].name}'),
      ),
      DataCell(Text('${data[index].sex}')),
      DataCell(Text('${data[index].age}')),,); }Copy the code

The effect is as follows:

Full selection control:

PaginatedDataTable(
  header: Text('header'),
  onSelectAll: (all) {
    setState(() {
      _data.forEach((f){
        f.selected = all;
      });
    });
  },
Copy the code

Deal with incomplete data display

Use SingleChildScrollView package when the table has a large number of columns, and scroll to display incomplete columns as follows:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: PaginatedDataTable()
)
Copy the code

The effect is as follows:

communication

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