SfDataGrid class

A material design datagrid.

DataGrid lets you display and manipulate data in a tabular view. It is built from the ground up to achieve the best possible performance even when loading large amounts of data.

DataGrid supports different types of column types to populate the columns for different types of data such as int, double, DateTime, String.

source property enables you to populate the data for the SfDataGrid.

This sample shows how to populate the data for the SfDataGrid and display with four columns: id, name, designation and salary. The columns are defined by four GridColumn objects.

  final List<Employee> _employees = <Employee>[];
  final EmployeeDataSource _employeeDataSource = EmployeeDataSource();

  @override
  void initState(){
    super.initState();
    populateData();
  }

  @override
  Widget build(BuildContext context) {
    return SfDataGrid(
      source: _employeeDataSource,
      columnWidthMode: ColumnWidthMode.fill,
      columns: <GridColumn>[
        GridColumn(columnName: 'id', label: Text('ID')),
        GridColumn(columnName: 'name', label: Text('Name')),
        GridColumn(columnName: 'designation', label: Text('Designation')),
        GridColumn(columnName: 'salary', label: Text('Salary')),
    );
  }

  void populateData(){
    _employees.add(Employee(10001, 'James', 'Project Lead', 10000));
    _employees.add(Employee(10002, 'Kathryn', 'Manager', 10000));
    _employees.add(Employee(10003, 'Lara', 'Developer', 10000));
    _employees.add(Employee(10004, 'Michael', 'Designer', 10000));
    _employees.add(Employee(10005, 'Martin', 'Developer', 10000));
    _employees.add(Employee(10006, 'Newberry', 'Developer', 15000));
    _employees.add(Employee(10007, 'Balnc', 'Developer', 15000));
	  _employees.add(Employee(10008, 'Perry', 'Developer', 15000));
    _employees.add(Employee(10009, 'Gable', 'Developer', 15000));
    _employees.add(Employee(10010, 'Grimes', 'Developer', 15000));
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

class EmployeeDataSource extends DataGridSource {
  @override
  List<DataGridRow> get rows => _employees
      .map<DataGridRow>((dataRow) => DataGridRow(cells: [
            DataGridCell<int>(columnName: 'id', value: dataRow.id),
            DataGridCell<String>(columnName: 'name', value: dataRow.name),
            DataGridCell<String>(
                columnName: 'designation', value: dataRow.designation),
            DataGridCell<int>(columnName: 'salary', value: dataRow.salary),
          ]))
      .toList();

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataCell) {
          return Text(dataCell.value.toString());
        }).toList());
  }
}
Inheritance

Constructors

SfDataGrid({required DataGridSource source, required List<GridColumn> columns, Key? key, double rowHeight = double.nan, double headerRowHeight = double.nan, double defaultColumnWidth = double.nan, GridLinesVisibility gridLinesVisibility = GridLinesVisibility.horizontal, GridLinesVisibility headerGridLinesVisibility = GridLinesVisibility.horizontal, ColumnWidthMode columnWidthMode = ColumnWidthMode.none, ColumnSizer? columnSizer, ColumnWidthCalculationRange columnWidthCalculationRange = ColumnWidthCalculationRange.visibleRows, SelectionMode selectionMode = SelectionMode.none, GridNavigationMode navigationMode = GridNavigationMode.row, int frozenColumnsCount = 0, int footerFrozenColumnsCount = 0, int frozenRowsCount = 0, int footerFrozenRowsCount = 0, bool allowSorting = false, bool allowMultiColumnSorting = false, bool allowTriStateSorting = false, bool showSortNumbers = false, SortingGestureType sortingGestureType = SortingGestureType.tap, List<StackedHeaderRow> stackedHeaderRows = const <StackedHeaderRow>[], SelectionManagerBase? selectionManager, DataGridController? controller, QueryRowHeightCallback? onQueryRowHeight, SelectionChangedCallback? onSelectionChanged, SelectionChangingCallback? onSelectionChanging, CurrentCellActivatingCallback? onCurrentCellActivating, CurrentCellActivatedCallback? onCurrentCellActivated, DataGridCellTapCallback? onCellTap, DataGridCellDoubleTapCallback? onCellDoubleTap, DataGridCellTapCallback? onCellSecondaryTap, DataGridCellLongPressCallback? onCellLongPress, bool isScrollbarAlwaysShown = false, ScrollPhysics horizontalScrollPhysics = const AlwaysScrollableScrollPhysics(), ScrollPhysics verticalScrollPhysics = const AlwaysScrollableScrollPhysics(), LoadMoreViewBuilder? loadMoreViewBuilder, bool allowPullToRefresh = false, double refreshIndicatorDisplacement = 40.0, double refreshIndicatorStrokeWidth = 2.0, bool allowSwiping = false, double swipeMaxOffset = 200.0, ScrollController? horizontalScrollController, ScrollController? verticalScrollController, DataGridSwipeStartCallback? onSwipeStart, DataGridSwipeUpdateCallback? onSwipeUpdate, DataGridSwipeEndCallback? onSwipeEnd, DataGridSwipeActionsBuilder? startSwipeActionsBuilder, DataGridSwipeActionsBuilder? endSwipeActionsBuilder, bool highlightRowOnHover = true, bool allowColumnsResizing = false, ColumnResizeMode columnResizeMode = ColumnResizeMode.onResize, ColumnResizeStartCallback? onColumnResizeStart, ColumnResizeUpdateCallback? onColumnResizeUpdate, ColumnResizeEndCallback? onColumnResizeEnd, bool allowEditing = false, EditingGestureType editingGestureType = EditingGestureType.doubleTap, Widget? footer, double footerHeight = 49.0, bool showCheckboxColumn = false, DataGridCheckboxColumnSettings checkboxColumnSettings = const DataGridCheckboxColumnSettings(), List<GridTableSummaryRow> tableSummaryRows = const <GridTableSummaryRow>[], int? rowsPerPage, bool shrinkWrapColumns = false, bool shrinkWrapRows = false, int? rowsCacheExtent, bool allowFiltering = false, DataGridFilterChangingCallback? onFilterChanging, DataGridFilterChangedCallback? onFilterChanged, OutlinedBorder? checkboxShape, bool showHorizontalScrollbar = true, bool showVerticalScrollbar = true, @Deprecated('use SfDataGrid.showColumnHeaderIconOnHover instead') bool showFilterIconOnHover = false, bool allowColumnsDragging = false, DataGridColumnDraggingCallback? onColumnDragging, ColumnDragFeedbackBuilderCallback? columnDragFeedbackBuilder, bool showColumnHeaderIconOnHover = false})
Creates a widget describing a datagrid.
const

Properties

allowColumnsDragging → bool
Decides whether the column can be dragged and dropped to the required position.
final
allowColumnsResizing → bool
Decides whether a column can be resized by the user interactively using a pointer or not.
final
allowEditing → bool
Decides whether cell should be moved into edit mode based on editingGestureType.
final
allowFiltering → bool
Decides whether the UI filtering should be enabled for all the columns.
final
allowMultiColumnSorting → bool
Decides whether user can sort more than one column.
final
allowPullToRefresh → bool
Decides whether refresh indicator should be shown when datagrid is pulled down.
final
allowSorting → bool
Decides whether user can sort the column simply by tapping the column header.
final
allowSwiping → bool
Decides whether to swipe a row “right to left” or “left to right” for custom actions such as deleting, editing, and so on. When the user swipes a row, the row will be moved, and swipe view will be shown for custom actions.
final
allowTriStateSorting → bool
Decides whether user can sort the column in three states: ascending, descending, unsorted.
final
checkboxColumnSettings → DataGridCheckboxColumnSettings
Contains all the properties of the checkbox column.
final
checkboxShape → OutlinedBorder?
The shape of the checkbox.
final
columnDragFeedbackBuilder → ColumnDragFeedbackBuilderCallback?
Called to obtain the feedback widget for the column when it is about to drag. If null, a Text widget will be loaded by default with the dragging header cell constraints.
final
columnResizeMode → ColumnResizeMode
Decides how column should be resized. It can be either along with indicator moves or releasing a pointer.
final
columns → List<GridColumn>
The collection of the GridColumn.
final
columnSizer → ColumnSizer?
The ColumnSizer used to control the column width sizing operation of each columns.
final
columnWidthCalculationRange → ColumnWidthCalculationRange
How the row count should be considered when calculating the width of a column.
final
columnWidthMode → ColumnWidthMode
How the column widths are determined.
final
controller → DataGridController?
The DataGridController used to control the current cell navigation and selection operation.
final
defaultColumnWidth → double
The width of each column.
final
editingGestureType → EditingGestureType
Decides whether the editing should be triggered on tap or double tap the cells.
final
endSwipeActionsBuilder → DataGridSwipeActionsBuilder?
A builder that sets the widget for the background view in which a row is swiped in the reverse of reading direction (e.g., from right to left in left-to-right languages).
final
The widget to show over the bottom of the SfDataGrid.
final
footerFrozenColumnsCount → int
The number of non-scrolling columns at the right side of SfDataGrid.
final
footerFrozenRowsCount → int
The number of non-scrolling rows at the bottom of SfDataGrid.
final
footerHeight → double
The height of the footer.
final
frozenColumnsCount → int
The number of non-scrolling columns at the left side of SfDataGrid.
final
frozenRowsCount → int
The number of non-scrolling rows at the top of SfDataGrid.
final
gridLinesVisibility → GridLinesVisibility
How the border should be visible.
final
hashCode → int
The hash code for this object.
no setterinherited
headerGridLinesVisibility → GridLinesVisibility
How the border should be visible in header cells.
final
headerRowHeight → double
The height of the column header row.
final
highlightRowOnHover → bool
Decides whether to highlight a row when mouse hovers over it.
final
horizontalScrollController → ScrollController?
Controls a horizontal scrolling in DataGrid.
final
horizontalScrollPhysics → ScrollPhysics
How the horizontal scroll view should respond to user input. For example, determines how the horizontal scroll view continues to animate after the user stops dragging the scroll view.
final
isScrollbarAlwaysShown → bool
Indicates whether the horizontal and vertical scrollbars should always be visible. When false, both the scrollbar will be shown during scrolling and will fade out otherwise. When true, both the scrollbar will always be visible and never fade out.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
loadMoreViewBuilder → LoadMoreViewBuilder?
A builder that sets the widget to display at the bottom of the datagrid when vertical scrolling reaches the end of the datagrid.
final
Decides whether the navigation in the SfDataGrid should be cell wise or row wise.
final
onCellDoubleTap → DataGridCellDoubleTapCallback?
Called when user is tapped a cell with a primary button at the same cell twice in quick succession.
final
onCellLongPress → DataGridCellLongPressCallback?
Called when a long press gesture with a primary button has been recognized for a cell.
final
onCellSecondaryTap → DataGridCellTapCallback?
Called when a tap with a cell has occurred with a secondary button.
final
onCellTap → DataGridCellTapCallback?
Called when a tap with a cell has occurred.
final
onColumnDragging → DataGridColumnDraggingCallback?
Called when a column has been dragged and dropped to new location.
final
onColumnResizeEnd → ColumnResizeEndCallback?
Called when a column is resized successfully.
final
onColumnResizeStart → ColumnResizeStartCallback?
Called when a column is being resized when tapping and dragging the right-side border of the column header.
final
onColumnResizeUpdate → ColumnResizeUpdateCallback?
Called when a column is resizing when tapping and dragging the right-side border of the column header.
final
onCurrentCellActivated → CurrentCellActivatedCallback?
Invoked when the cell is activated.
final
onCurrentCellActivating → CurrentCellActivatingCallback?
Invoked when the cell is being activated.
final
onFilterChanged → DataGridFilterChangedCallback?
Called after the UI filtering is applied to SfDataGrid.
final
onFilterChanging → DataGridFilterChangingCallback?
Called when the filtering is being applied through UI filtering.
final
onQueryRowHeight → QueryRowHeightCallback?
Invoked when the row height for each row is queried.
final
onSelectionChanged → SelectionChangedCallback?
Invoked when the row is selected.
final
onSelectionChanging → SelectionChangingCallback?
Invoked when the row is being selected or being unselected
final
onSwipeEnd → DataGridSwipeEndCallback?
Called when swiping of a row is ended (i.e. when reaches the max offset).
final
onSwipeStart → DataGridSwipeStartCallback?
Called when row swiping is started.
final
onSwipeUpdate → DataGridSwipeUpdateCallback?
Called when row is being swiped.
final
refreshIndicatorDisplacement → double
The distance from the SfDataGrid’s top or bottom edge to where the refresh indicator will settle. During the drag that exposes the refresh indicator, its actual displacement may significantly exceed this value.
final
refreshIndicatorStrokeWidth → double
Defines strokeWidth for RefreshIndicator used by SfDataGrid.
final
rowHeight → double
The height of each row except the column header.
final
rowsCacheExtent → int?
Decides how many rows should be added with the currently visible items in viewport size.
final
rowsPerPage → int?
The number of rows to show on each page.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectionManager → SelectionManagerBase?
The SelectionManagerBase used to control the selection operations in SfDataGrid.
final
selectionMode → SelectionMode
How the rows should be selected.
final
showCheckboxColumn → bool
Decides whether Checkbox should be displayed in each row to select or deselect the rows.
final
showColumnHeaderIconOnHover → bool
Decides whether the column header icons should be shown when hovering the header cells.
final
showFilterIconOnHover → bool
Decides whether the filter icon should be shown when hovering the header cells.
final
showHorizontalScrollbar → bool
Decides whether the horizontal scrollbar should be shown. Defaults to true.
final
showSortNumbers → bool
Decides whether the sequence number should be displayed on the header cell of sorted column during multi-column sorting.
final
showVerticalScrollbar → bool
Decides whether the vertical scrollbar should be shown. Defaults to true.
final
shrinkWrapColumns → bool
Whether the extent of the horizontal scroll view should be determined by the number of columns available.
final
shrinkWrapRows → bool
Whether the extent of the vertical scroll view should be determined by the number of rows available.
final
sortingGestureType → SortingGestureType
Decides whether the sorting should be applied on tap or double tap the column header.
final
source → DataGridSource
The DataGridSource that provides the data for each row in SfDataGrid. Must be non-null.
final
stackedHeaderRows → List<StackedHeaderRow>
The collection of StackedHeaderRow.
final
startSwipeActionsBuilder → DataGridSwipeActionsBuilder?
A builder that sets the widget for the background view in which a row is swiped in the reading direction (e.g., from left to right in left-to-right languages).
final
swipeMaxOffset → double
Defines the maximum offset in which a row can be swiped.
final
tableSummaryRows → List<GridTableSummaryRow>
The collection of GridTableSummaryRow.
final
verticalScrollController → ScrollController?
Controls a vertical scrolling in DataGrid.
final
verticalScrollPhysics → ScrollPhysics
How the vertical scroll view should respond to user input. For example, determines how the vertical scroll view continues to animate after the user stops dragging the scroll view.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<StatefulWidget>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited