If need to be reproduced, please respect the author, indicate the source, thank you for your cooperation!
Simple chat
The DataTable front-end framework is used to display data and manipulate data in the background. How can it be used in Flutter? Let’s learn together!
1. The DataTable parameters
| field | type |
|---|---|
| Columns | List |
| Rows (content rows) | List |
| SortColumnIndex sortColumnIndex | int |
| sortAscending | bool |
| OnSelectAll (Click On all) | ValueSetter |
2. The DataColumn parameters
| field | type |
|---|---|
| Label (label, text, or icon size=18) | Widget |
| Tooltip | String |
| Numeric (whether or not to include numbers) | bool |
| OnSort (called when sorting) | DataColumnSortCallback |
3. The DataRow parameters
| field | type |
|---|---|
| (selected) | bool |
| OnSelectChanged (select change) | ValueChanged |
| Cells | List |
| Index (datarow.byIndex unique) | int |
4. DataCell parameters
| field | type |
|---|---|
| Child (child, typically Text or DropdownButton) | Widget |
| Placeholder (if child is Text, display placeholder Text style) | bool |
| ShowEditIcon (display edit icon, not to make child editable, combined with onTap) | bool |
| onTap | VoidCallback |
5. Use DataTableSource
Create a new Class that inherits the abstract Class DataTableSource and implements four methods
class MyTable extends DataTableSource{
int _selectCount=0;// The number of rows currently selected
@override
DataRow getRow(int index) {
// Get the content row based on the index
}
@override// Whether the number of rows is indeterminate
bool get isRowCountApproximate => false;
@override// How many rows are there
int get rowCount => _shops.length;
@override// The number of selected rows
int get selectedRowCount => _selectCount;
}
Copy the codeThe code is as shown above, now table has, so, we also need a data source, let’s make a commodity inventory list together!
class Shop{
final String name;
final int number;
final String type;
final double price;
bool selected=false;// It is not selected by default
Shop(this.name, this.number, this.type, this.price,);
}
List<Shop> _shops=<Shop>[
Shop('millet 6 x'.100.'mobile phone'.1699.0,),
Shop('huawei P20'.50.'mobile phone'.4999.0,),
Shop('asus a61'.50.'computer'.5700.0,),
Shop('iphone7plus headphones'.9999.'headphone'.60.0,),
Shop('iphone7plus256g'.1.'mobile phone'.4760.0,),
Shop('Kingston 8G Memory Module'.66.'Memory'.399.0,),
Shop(Siemens Washing Machine 9.0kg.890.'goods'.10399.0,),
Shop('Samsung 66 inch LCD Smart TV'.800.'goods'.20389.0,)];Copy the codeMerge together
class Shop {
final String name;
final int number;
final String type;
final double price;
bool selected = false; // It is not selected by default
Shop(
this.name,
this.number,
this.type,
this.price,
);
}
class MyTable extends DataTableSource {
List<Shop> _shops = <Shop>[
Shop('millet 6 x'.100.'mobile phone'.1699.0),
Shop('huawei P20'.50.'mobile phone'.4999.0),
Shop('asus a61'.50.'computer'.5700.0),
Shop('iphone7plus headphones'.9999.'headphone'.60.0),
Shop('iphone7plus256g'.1.'mobile phone'.4760.0),
Shop('Kingston 8G Memory Module'.66.'Memory'.399.0),
Shop(Siemens Washing Machine 9.0kg.890.'goods'.10399.0),
Shop('Samsung 66 inch LCD Smart TV'.800.'goods'.20389.0)];int _selectCount = 0; // The number of rows currently selected
bool _isRowCountApproximate = false;// The number of rows is determined
@override
DataRow getRow(int index) {
// Get the content row based on the index
if (index >= _shops.length || index < 0) throw FlutterError('Dude, you got the wrong number.');
// If the index is not in the item list, throw an exception
final Shop shop = _shops[index];
return DataRow.byIndex(
cells: <DataCell>[
DataCell(Text(shop.name)),
DataCell(Text('${shop.price}')),
DataCell(Text('${shop.number}')),
DataCell(Text(shop.type)),
],
selected: shop.selected,
index: index,
onSelectChanged: (isSelected) {
selectOne(index, isSelected);
});
}
@override // Whether the number of rows is indeterminate
bool get isRowCountApproximate => _isRowCountApproximate;
@override // How many rows are there
int get rowCount => _shops.length;
@override // The number of selected rows
int get selectedRowCount => _selectCount;
// Select one
void selectOne(int index,bool isSelected){
Shop shop=_shops[index];
if(shop.selected ! = isSelected) {// Select + 1 if selected, subtract 1 otherwise
_selectCount = _selectCount += isSelected ? 1 : - 1;
shop.selected = isSelected;
/ / updatenotifyListeners(); }}// Select all
void selectAll(bool checked) {
for (Shop _shop in _shops) {
_shop.selected = checked;
}
_selectCount = checked ? _shops.length : 0;
notifyListeners(); // Tell the listener to refresh
}
/ / sorting,
void _sort<T>(Comparable<T> getField(Shop shop),bool b){
_shops.sort((Shop s1,Shop s2){
if(! b){// The two items are swapped
final Shop temp=s1;
s1=s2;
s2=temp;
}
final Comparable<T> s1Value=getField(s1);
final Comparable<T> s2Value=getField(s2);
return Comparable.compare(s1Value, s2Value); }); notifyListeners(); }}Copy the code6.DataTableSource配合PaginatedDataTable
PaginatedDataTable
| field | type |
|---|---|
| Header (table name, usually Text, but also ButtonBar, FlatButton) | Widget |
| Actions | List |
| SortColumnIndex sortColumnIndex | int |
| sortAscending | bool |
| OnSelectAll (Click On all) | ValueSetter |
| InitialFirstRowIndex (initial index) | int |
| OnPageChanged (Page change listener, left and right arrows) | ValueChanged |
| RowsPerPage (number of rows displayed on a page by default) | int |
| AvailableRowsPerPage (optional page number) | List |
| OnRowsPerPageChanged (click to select page number drop-down listen) | ValueChanged |
So here’s the combination of these two things
// The default number of lines
int _defalutRowPageCount = PaginatedDataTable.defaultRowsPerPage;
int _sortColumnIndex;
bool _sortAscending=true;
MyTable table = MyTable();
// Sort association _sortColumnIndex,_sortAscending
void _sort<T>(Comparable<T> getField(Shop s),int index,bool b){
table._sort(getField, b);
setState(() {
this._sortColumnIndex=index;
this._sortAscending=b;
});
}
List<DataColumn> getColumn() {
return [
DataColumn(label: Text('Trade Name'),onSort: (i,b){_sort<String>((Shop p) =>p.name, i, b); }), DataColumn(label: Text('price'),onSort: (i,b){_sort<num>((Shop p) =>p.price, i, b); }), DataColumn(label: Text('inventory'),onSort: (i,b){_sort<num>((Shop p) =>p.number, i, b); }), DataColumn(label: Text('type'),onSort: (i,b){_sort<String>((Shop p) =>p.type, i, b); })]; } Widget getPaginatedDataTable(){return SingleChildScrollView(
child: PaginatedDataTable(
rowsPerPage: _defalutRowPageCount,
onRowsPerPageChanged: (value) {
setState(() {
_defalutRowPageCount = value;
});
},
sortColumnIndex: _sortColumnIndex,
initialFirstRowIndex: 0,
sortAscending: _sortAscending,
availableRowsPerPage: [
5.10
],
onPageChanged: (value){
print('$value');
},
onSelectAll: table.selectAll,
header: Text('Merchandise inventory'),
columns: getColumn(),
source: table,
),
);
}
Copy the codeHere’s a picture:
Follow me and subscribe to learn more! There will be a lot of updates to the Flutter Tutorial App in the near future: see the Flutter Tutorial App for more details