Forem

Cover image for DataTable in Flutter
vasanthkumar
vasanthkumar

Posted on • Edited on

4

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay