DEV Community

Cover image for DataTable in Flutter
vasanthkumar
vasanthkumar

Posted on • Edited on

DataTable in Flutter

#flutter #mobile #codepen #dart

Do you ever want show data in table format to your App users in your mobile application.Now, it is easier with Flutter Widget DataTable()

Watch on youtube:
DataTable will take DataColumn() list for table header and Datarow() list for table rows. And each DataRow will take the DataCell().

Example DataTable:

sample Table

DataTable(columns: [ DataColumn( label: Text("Name"), ), DataColumn( label: Text("Age"), ), DataColumn( label: Text("Year"), ), ], rows: [ DataRow(cells: [ DataCell(Text("Varun")), DataCell(Text("22")), DataCell(Text("1999")), ]), DataRow(cells: [ DataCell(Text("Alexa")), DataCell(Text("23")), DataCell(Text("1998")), ]), DataRow(cells: [ DataCell(Text("Arjun")), DataCell(Text("21")), DataCell(Text("2000")), ]), ]);
Enter fullscreen mode Exit fullscreen mode

Anything that goes into a DataCell and DataColumn is a widget.Hence we can show anything in the table.
for eg: adding FlutterLogo() to DataColumn and all DataRows gives

DataTable with Flutter Logo

 DataRow(cells: [ DataCell(Text("Arjun")), DataCell(Text("21")), DataCell(Text("2000")), DataCell(FlutterLogo()), ]),
Enter fullscreen mode Exit fullscreen mode

we can give option to edit the cell data to the user with onTap() function and we can indicate with showEditIcon:true

 DataCell( Text("21"), showEditIcon: true, onTap: () {}, ),
Enter fullscreen mode Exit fullscreen mode

edit

we can also show data using map;
consider the data:

 var data = <Data>[ Data("varun", "20", "2001"), Data("varun1", "21", "2000"), Data("varun2", "23", "1998"), Data("varun3", "26", "1995"), ];
Enter fullscreen mode Exit fullscreen mode

then

DataTable( columns: [ DataColumn( label: Text("Name"), ), DataColumn( label: Text("Age"), ), DataColumn( label: Text("Year"), ), DataColumn(label: FlutterLogo()) ], rows: data.map((data) { return DataRow(cells: [ DataCell(Text(data.name)), DataCell(Text(data.age)), DataCell(Text(data.year)), DataCell(FlutterLogo()) ]); }).toList(), );
Enter fullscreen mode Exit fullscreen mode

gives the output of
datatablelist
you can play with it codepen

Top comments (0)