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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Syncfusion Flutter DataGrid (also known as Flutter DataTable) is used to display and manipulate data in a tabular view. Its rich feature set includes row selection, sorting, column sizing, row-height customization, swiping, and more. It has also been optimized to handle high-frequency, real-time updates.


High performance

The Flutter DataGrid was 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 any widget or multiple widgets in the cells for better data visualization.

Flutter DataGrid shows different column types.


Editing

  • Show any widget, such as a text field, date-picker, or combo box, as a cell editor.
  • Navigate using the keyboard in web and desktop platforms.
  • Commit or rollback the edited values through an intuitive API.

Editing in flutter datagrid


Sorting

Sort data against one or more columns in ascending or descending order. You can also perform tri-state sorting and display sort numbers to indicate the sort order.

Columns are sorted in Flutter DataGrid.


Selection

  • 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

  • The column width can be adjusted to enhance the readability of the content.
  • Fit the columns based on the value of the cells or name of the column.

Row and column customization

Flutter DataGrid shows rows in auto-fit.

Row height

Users can adjust the row height to enhance the readability of the content. It is also possible to set the row height conditionally.

First row and column are frozen in Flutter DataGrid.

Freeze panes

Users can freeze rows and columns at the top, bottom, left, and right positions, similar to Excel. Horizontal and vertical scrolling can be performed, except on fixed columns and rows.

Flutter DataGrid shows multiple column headers.

Stacked headers

Show unbound header rows along with the column header row. Unbound header rows span header cells across multiple rows and columns.


Infinite scrolling and load more

  • Load more rows in a data grid at run time when vertical scrolling reaches its maximum offset.
  • Users can do infinite or endless scrolling to load more rows continuously.
  • The loading indicator or any widget can be shown at the bottom of a data grid to indicate lazy loading.

Infinite scrolling in Flutter DataGrid.


Pull to refresh

Refresh the data at run time when the datagrid is pulled down.

Pull to refresh in Flutter DataGrid.


Swiping

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.

Swiping Flutter DataGrid.


  • Show an additional row below the last row.
  • Load any widget in the footer to perform custom actions.
  • Change the height to improve the appearance.

Footer in Flutter DataGrid.


Paging

Manipulate data using the DataPager widget to view rows in multiple pages.

Flutter DataGrid shows rows in page segments.


Appearance

Styling in Flutter DataGrid.

Styles

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 row appearances conditionally, based on the data.


Awards

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.

Up arrow 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