Flutter Data Table

In this Capture we will see how to create the Data Table in Your Flutter App

For Mobile App Developers, displaying data in tables is an everyday task with laying out all the row & columns with appropriate needed space for the same. Displaying Information in Tabular is Easy to Understand & Interpret by the Users by providing More Information Less Space with proper categorization also. Flutter possesses in its store a widget to perform this task with ease & perfection Using Data Table.

Data Table widget allows you to build a table that automatically sizes its columns according to what’s in the cells.

Note: Use Data Table if you have fewer rows, because Data Table takes twice the computation for laying out elements on User Interface.

Data Table Syntax:

: Add the Data Table () widget.

: Define Data Column

: Define each Data Row & Data Cell in each of it.

DataTable(

    columns: [

      DataColumn(label: Text('ID'),

        numeric: false,

        tooltip: 'Table First name',),

      DataColumn(label: Text('FirstName'),

        numeric: false,

        tooltip: 'Table First name',),

      DataColumn(label: Text('Email'),

        numeric: false,

        tooltip: 'Table First name',),

    ],

    rows: [

      DataRow(cells: [DataCell(Text('001'))]),

      DataRow(cells: [DataCell(Text('stev'))]),

      DataRow(cells: [DataCell(Text('stev@gmail.com'))]),

      DataRow(cells: [DataCell(Text('002'))]),

      DataRow(cells: [DataCell(Text('stev'))]),

      DataRow(cells: [DataCell(Text('stev@gmail.com'))])

    ]

),

Make a Column Numeric:

Numeric: true | false

: numeric — bool valued: represents whether this column represents numeric data or not.

Show Selected Row:

: selected — bool valued: represents whether the row is selected or not.

Selected: true | false

Show Cell Is Editable:

: show Edit Icon — bool valued: represents whether to show an edit icon at the end of the cell.

showEditicon: true