--- title: "Introducing a Super-Fast DataGrid Widget for Flutter" published_at: "2020-07-17T10:00:30+00:00" modified_at: "2026-02-10T13:27:44+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-a-super-fast-datagrid-widget-for-flutter" excerpt: "Data grids play a vital role in software development in all platforms, and Flutter is not an exception in this. So, we developed a DataGrid widget for the Flutter platform that is very fast and is capable of handling very..." taxonomy_category: - "DataGrid" - "Desktop" - "Essential Studio" - "Flutter" - "Mobile" - "Syncfusion" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "DataGrid" - "Flutter" - "iOS" - "Mobile" - "Web" - "What's New" --- # Introducing a Super-Fast DataGrid Widget for Flutter [Neelakandan Kannan](https://www.syncfusion.com/blogs/author/neelakandan-kannan) ![Introducing a Super-Fast DataGrid Widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Introducing-a-Super-Fast-DataGrid-Widget-for-Flutter.jpg) [Data grids](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) play a vital role in software development in all platforms, and Flutter is not an exception in this. So, we developed a DataGrid widget for the Flutter platform that is very fast and is capable of handling very large amounts of data. This DataGrid widget in Flutter is now available in our [2020 Volume 2 release](https://www.syncfusion.com/forums/155798/essential-studio-2020-volume-2-release-v18-2-0-44-is-available-for-download) The Syncfusion Flutter DataGrid can be used to display and manipulate data in tabular format. It was built from the ground up to achieve the best possible performance even when loading a large amount of data. The DataGrid has the following essential features in its initial release: - [Different types of columns](#different-types-of-columns) - [Real-time updates](#real-time-updates) - [Column sizing](#column-sizing) - [Row selection](#row-selection) - [Styling and conditional styling](#styling-and-conditional-styling) - [Row height customization](#row-height-customization) - [Theme](#theme) Let’s look at these features and the steps to integrate this new widget into your app in this blog post. ## Different types of columns DataGrid lets you display different data types (int, double, string, and date-time) in different columns. It can load any widget in its columns for data visualization. The following column types are supported: - GridTextColumn: To display the **string** data type. - GridNumericColumn: To display the **numeric** data types such as int, double. - GridDateTimeColumn: To display the **date-time** data type. - GridWidgetColumn: To load any widget or multiple widgets. Also, **GridNumericColumn** and ** GridDateTimeColumn** types provide support to format the values based on the [NumberFormat](https://api.flutter.dev/flutter/intl/NumberFormat-class.html) and [DateFormat](https://api.flutter.dev/flutter/intl/DateFormat-class.html) , respectively. The following screenshot shows the DataGrid with a **Dealer** column, which is a **GridWidgetColumn** that loads the [Image](https://api.flutter.dev/flutter/widgets/Image-class.html) widget. ![GridWidgetColumn with Image Widget](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/GridWidgetColumn-with-Image-Widget-1.png) GridWidgetColumn with Image Widget ## Real-time updates The DataGrid can handle high-frequency updates for demanding scenarios. You can refresh specific cells when the corresponding cells’ data is updated in the underlying data source. The following .gif image shows the DataGrid updating the real-time stock exchange data with high frequency. ![Real-Time Updates in Flutter DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Real-Time-Updates-in-DataGrid.gif) Real-Time Updates in Flutter DataGrid ## Column sizing Column width can be adjusted (auto fit) based on the content of any column or column header. All the columns can be made to fit in the viewport of the DataGrid. It is also possible to hide specific columns based on the device’s resolution. You can customize the width of all the columns or individual columns with the built-in column-sizing options. ## Row selection DataGrid lets you select a row or multiple rows with the following built-in selection modes: - - Single: Only one row can be selected. - Single deselect: Only one row can be selected and it can be deselected on tapping again on that row. - Multiple: Multiple rows can be selected and deselected, as well. **Note:** You can use the keyboard to navigate through rows and cells in the ** web platform**. Refer to the following screenshot. ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Row-Selection-in-Flutter-DataGrid.png) Row Selection in Flutter DataGrid ## Styling and conditional styling You can customize element styles such as text style and background color in the DataGrid to display visually appealing data. You can also customize the styles conditionally based on the data. Refer to the following screenshot. ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Styling-and-Conditional-Styling-in-Flutter-DataGrid.png) Styling and Conditional Styling in Flutter DataGrid ## Row height customization You can adjust (auto fit) the row height based on the content of any column or certain columns to enhance the readability of the content. It is also possible to set the row height conditionally. Refer to the following screenshot. ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Row-Height-Customization-in-Flutter-DataGrid.png) Row Height Customization in Flutter DataGrid ## Theme The DataGrid control has light and dark built-in theme support to adapt the control to the rest of the business application. Refer to the following screenshot. ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Flutter-DataGrid-with-Dark-Theme-Support.png) Flutter DataGrid with Dark Theme Support ## Getting started with the DataGrid widget We have seen the primary features of the Flutter DataGrid widget. This section will explain the steps to add the Flutter DataGrid widget to your application and use its basic features. ### Step 1: Add Flutter DataGrid to an application Create a simple project using the instructions given in the [Getting started with your first Flutter app](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation. ### Step 2: Add dependency Add the following Syncfusion Flutter DataGrid dependency to your pubspec.yaml file. ``` dependencies: syncfusion_flutter_datagridr: ^xx.x.xx ``` **Note:** Here, ** xx.x.xx** denotes the version of the [Syncfusion Flutter DataGrid](https://pub.dev/packages/syncfusion_flutter_datagrid/versions) package. ### Step 3: Get packages Run the following command to get the required packages. | $ flutter pub get | | --- | ### Step 4: Import package Import the following package in your Dart code. ``` import 'package:syncfusion_flutter_datagrid/datagrid.dart'; ``` ### Step 5: Creating data for an application Create a simple data source for **SfDataGrid** as shown in the following code example. Here, we are giving the employee details as the data for the DataGrid. ``` class Employee { Employee(this.id, this.name, this.designation, this.salary); final int id; final String name; final String designation; final int salary; } ``` Create the collection of employee data with the required number of data objects. The method used to populate the data objects is initialized in the initState(). ``` @override void initState() { super.initState(); populateData(); } void populateData() { _employees.add(Employee(10001, 'James', 'Project Lead', 20000)); _employees.add(Employee(10002, 'Kathryn', 'Manager', 30000)); _employees.add(Employee(10003, 'Lara', 'Developer', 15000)); _employees.add(Employee(10004, 'Michael', 'Designer', 15000)); _employees.add(Employee(10005, 'Martin', 'Developer', 15000)); _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, 'Steve', 'Testing Engineer', 15000)); _employees.add(Employee(10011, 'Nancy', 'Testing Engineer', 15000)); _employees.add(Employee(10012, 'Andrew', 'UX designer', 15000)); _employees.add(Employee(10013, 'Zachery', 'UX designer', 15000)); } ``` ### Step 6: Creating a DataSource for DataGrid **DataGridSource** is used to obtain the row data for the ** SfDataGrid**. So, create the DataSource from the ** DataGridSource** and override the following APIs in it: - **dataSource**: To fetch the number of rows available for data population. Also, it is used to fetch the corresponding data object to process the selection. - **getCellValue**: To fetch the value for each cell. **DataGridSource** objects are expected to be long-lived, not recreated with each build. Refer to the following code example. ``` final List _employees = []; final EmployeeDataSource _employeeDataSource = EmployeeDataSource(); class EmployeeDataSource extends DataGridSource { @override List get dataSource => _employees; @override getCellValue(int rowIndex, String columnName) { switch (columnName) { case 'id': return _employees[rowIndex].id; break; case 'name': return _employees[rowIndex].name; break; case 'salary': return _employees[rowIndex].salary; break; case 'designation': return _employees[rowIndex].designation; break; default: return ' '; break; } } ``` Create an instance of **DataGridSource** and set this object to the ** source** property of ** SfDataGrid**as in the following code example. ``` @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion DataGrid'), ), body: SfDataGrid( source: _employeeDataSource, ), ), ); } ``` ### Step 7: Defining columns As discussed earlier, **SfDataGrid** lets you show different data types (int, double, string, and date-time) in different types of columns. You can add the column collection to the ** columns** property as illustrated in the following code example. ``` final EmployeeDataSource _employeeDataSource = EmployeeDataSource(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion DataGrid'), ), Body: SfDataGrid( source: _employeeDataSource, columns: [ GridNumericColumn(mappingName: 'id', headerText:'ID'), GridTextColumn(mappingName: 'name', headerText: 'Name'), GridTextColumn(mappingName: 'designation', headerText: 'Designation'), GridNumericColumn(mappingName: 'salary', headerText: 'Salary'), ], ), ), ), ); } ``` On executing this code example, we will get output like in the following screenshot. ![Output showing the employees' Details](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Output-showing-the-employees-Details.png) ## Coming soon We are currently working on providing the following features for the DataGrid in our upcoming releases: - Editing - Sorting - Paging - Column resizing - Column drag and drop - Grouping - Row drag and drop ## Conclusion I hope you enjoyed this blog and got to know about the new [Syncfusion Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) and its features. This widget is available in the [2020 Volume 2](https://www.syncfusion.com/forums/155798/essential-studio-2020-volume-2-release-v18-2-0-44-is-available-for-download) release. You can find the user guide [here](https://help.syncfusion.com/flutter/datagrid/overview) , and you can also check out our samples in this [GitHub location](https://github.com/syncfusion/flutter-examples) . Additionally, you can download and check out our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341) . For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. Also, if you need a new widget for the Flutter framework or new features in our existing widgets, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We are always happy to assist you!