DEV Community 👩‍💻👨‍💻

Cover image for DataTable in Flutter
vasanthkumar
vasanthkumar

Posted on • Updated on

DataTable in Flutter

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)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.