DEV Community

loading...
Cover image for DataTable in Flutter

DataTable in Flutter

vasanthkumar
Waiting for Thanos to snap.....
Updated on ・2 min read

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

Discussion (0)