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:
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")),
]),
]);
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
DataRow(cells: [
DataCell(Text("Arjun")),
DataCell(Text("21")),
DataCell(Text("2000")),
DataCell(FlutterLogo()),
]),
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: () {},
),
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"),
];
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(),
);
gives the output of
you can play with it codepen
Top comments (0)