We at Syncfusion introduced our Flutter DataGrid in the 2020 Volume 2 release with a limited set of features. Now, we have added some more features to let you use the DataGrid widget with more customization options. The 2020 Volume 3 release brings the following features for the Flutter DataGrid:
Paging
Paging is an essential feature to load a large amount of data in multiple pages. Our DataGrid already supported loading large amounts of data. But paging is useful when loading the data on demand based on the data availability. For that, we have introduced the DataPager widget. You can place this widget wherever you want to load data in pages. You can go through this UG documentation for getting started with the DataPager with DataGrid.
Refer to the following code example.
List<OrderInfo> paginatedDataSource = [];
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraint) {
return Column(
children: [
SizedBox(
height: constraint.maxHeight - 60,
width: constraint.maxWidth,
child: SfDataGrid(
source: _orderInfoDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridNumericColumn(
mappingName: 'orderID'``, headerText: 'Order ID'``),
GridTextColumn(
mappingName: 'customerID'``,
headerText: 'Customer Name'``),
GridTextColumn(
mappingName: name, headerText: 'Name),
GridNumericColumn(
mappingName: '``freight``', headerText: '``Freight``'),
]),
),
Container(
height: 60,
child: SfDataPager(
delegate: _orderInfoDataSource,
rowsPerPage: 20,
direction: Axis.horizontal,
),
)
],
);
},
),
);
}
class OrderInfoDataSource extends DataGridSource<OrderInfo> {
@override
List<OrderInfo> get dataSource => paginatedDataSource;
@override
Object getValue(OrderInfo orderInfos, String columnName) {
switch (columnName) {
case '``orderID``':
return orderInfos.orderID;
break;
case '``customerID``':
return orderInfos.customerID;
break;
case '``freight``':
return orderInfos.freight;
break;
case name:
return orderInfos.name;
break;
default:
return '``';
break;
}
}
@override
int get rowCount => orderInfos.length;
@override
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex,
int startRowIndex, int rowsPerPage) async {
int endIndex = startRowIndex + rowsPerPage;
if (endIndex > orderInfos.length) {
endIndex = orderInfos.length - 1;
}
paginatedDataSource = List.from(
orderInfos.getRange(startRowIndex, endIndex).toList(growable: false));
notifyDataSourceListeners();
return true;
}
}
#datagrid #flutter #mobile #syncfusion #ui #web #what's new #android #ios #user interface #what's new
