How to scroll Flutter DataTable (SfDataGrid) programmatically?
The Flutter DataTable provides support to scroll to a particular row and column programmatically. Also, provides options to perform horizontal or vertical scroll programmatically.
Scroll to row
Scroll programmatically to a particular row by passing the required row index in the scrollToRow method. Also, decide where that row should be displayed after scrolling by using position argument. Enable the animation by passing true to the canAnimate argument in the scrollToRow method.
final DataGridController controller = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Datagrid Sample'),
),
body: Column(
children: [
TextButton(
onPressed: () {
controller.scrollToRow(13,
position: DataGridScrollPosition.center,
canAnimate: true, );
},
child: Text('Scroll To Row')),
Expanded(
child: SfDataGrid(
controller: controller,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
source: stackedHeaderDataGridSource,
columns: _getColumns(),
),
),
],
),
);
}
}
Scroll to cell
Scroll programmatically to a particular cell by passing the row and column index to the scrollToCell method. And enable the animation by passing true to the canAnimate argument in scrollToCell method. Also, decide where that cell should be displayed after scrolling DataGridScrollPosition to rowPosition and columnPosition arguments in scrollToCell.
final DataGridController controller = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Datagrid Sample'),
),
body: Column(
children: [
TextButton(
onPressed: () {
controller.scrollToCell(13, 2,
columnPosition: DataGridScrollPosition.center,
rowPosition: DataGridScrollPosition.center,
canAnimate: true);
},
child: Text('Scroll To Cell')),
Expanded(
child: SfDataGrid(
controller: controller,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
source: stackedHeaderDataGridSource,
columns: _getColumns(),
),
),
],
),
);
}
}
Scroll to column
Scroll programmatically to a particular column by passing the column index in the scrollToColumn method. Also, decide where that column should be displayed after scrolling by using position argument. Enable animation by passing true to the canAnimate argument in scrollToColumn method.
final DataGridController controller = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Datagrid Sample'),
),
body: Column(
children: [
TextButton(
onPressed: () {
controller.scrollToColumn(2,
position: DataGridScrollPosition.center,
canAnimate: true);
},
child: Text('Scroll To Column')),
Expanded(
child: SfDataGrid(
controller: controller,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
source: stackedHeaderDataGridSource,
columns: _getColumns(),
),
),
],
),
);
}
}
Vertical scroll
Perform vertical scrolling by passing the required offset value to the scrollToVerticalOffset method. Also, enable the animation by passing true to the canAnimate argument in scrollToVerticalOffset method.
final DataGridController controller = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Datagrid Sample'),
),
body: Column(
children: [
TextButton(
onPressed: () {
controller.scrollToVerticalOffset(300, canAnimate: true);
},
child: Text('Scroll To Vertical Offset')),
Expanded(
child: SfDataGrid(
controller: controller,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
source: stackedHeaderDataGridSource,
columns: _getColumns(),
),
),
],
),
);
}
Horizontal scroll
Perform horizontal scrolling by passing the required offset value to the scrollToHorizontalOffset method. And enable the scrolling animation by passing true to the canAnimate argument in scrollToHorizontalOffset method.
final DataGridController controller = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Datagrid Sample'),
),
body: Column(
children: [
TextButton(
onPressed: () {
controller.scrollToHorizontalOffset(300, canAnimate: true);
},
child: Text('Scroll To Horizontal Offset')),
Expanded(
child: SfDataGrid(
controller: controller,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
source: stackedHeaderDataGridSource,
columns: _getColumns(),
),
),
],
),
);
}
}
Click this link to know more about programmatic scrolling feature.
I hope you enjoyed learning about how to scroll Flutter DataTable (SfDataGrid) programmatically.
You can refer to our Flutter DataGrid featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
