We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Syncfusion Flutter DataGrid is used to display and manipulate data in a tabular view. Its rich feature set includes different types of columns, selections, column sizing, autofit row height, and more. It has also been optimized to handle high-frequency real-time updates.

High performance

The Flutter DataGrid is built from the ground up for the best possible performance, even when loading large amounts of data.

Flutter DataGrid performance

Responsive DataGrid

Responsive features allow the Flutter DataGrid layout to be viewed on various devices. It is also possible to hide specific columns based on the device. Customize the width of all the columns or individual columns with the built-in column sizing options.

Flutter DataGrid performance

Real time updates

The Flutter DataGrid can handle high-frequency updates even for demanding scenarios.

Real time updates in flutter datagrid

Column types

  • Load different types of data using various built-in column types such as text, DateTime, and numeric.
  • Load any widget or multiple widgets to the cells for better data visualization.

Flutter DataGrid shows different column types


  • Select a row with any of the four built-in selection modes: Single, multiple, single deselect, and none. The single deselect mode clears a selected row when it is tapped again.
  • Keep track of the last row and cell interaction using the current cell. Use the keyboard to navigate through rows and cells in web platforms.
  • Customize the selection background and foreground color, as well as the border color and border width for the current cell.

Flutter DataGrid shows rows with selection

Column sizing

Column width can be adjusted (auto fit) based on the content of any column or column header. All the columns fit in the viewport of the datagrid.

Row height

Users 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.

Flutter DataGrid shows rows in auto-fit


Styling in Flutter DataGrid


  • Customize element styles in the DataGrid to display visually appealing data.
  • Apply alternate row colors for better readability.
  • Customize text styles for an elegant look and feel.
  • Customize vertical or horizontal grid line borders, or both. Customize the border color and border thickness, as well.

Styling in Flutter DataGrid

Conditional styles

  • Customize cell and row appearances conditionally based on the data.
  • Apply styles and formatting to the data in the cells.
  • Users can choose whether the selection alone should be applied, or both the cell style and selection style should be interpolated linearly.


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Syncfusion Awards
Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon