How to Render a List in a Dart DataTable Widget?

In this article, we'll explore how to render a list of map elements inside a DataTable widget in Dart. Specifically, we will be focusing on displaying each element sequentially in rows. For our example, we have a list containing IDs and names, and we want to create a DataTable that showcases this data. Understanding DataTable in Flutter The DataTable widget in Flutter is a powerful tool for displaying information in a structured tabular format. It helps to present data in an organized way, making it easier to read and interpret. In our case, we will create a table that holds an ID and a Name column, iterating over a predefined list that contains these data pairs. What Is Our Data Structure? We start with a simple list of maps in Dart as follows: List myList = [ {'id': 1, 'name': 'Ahmad'}, {'id': 2, 'name': 'Usama'}, {'id': 3, 'name': 'Habib'} ]; This structured data will drive the rows of our DataTable. Steps to Render Data in DataTable To render our data, we need to transform each element of our list into a DataRow that our DataTable can display. Let's break down the steps needed to accomplish this. Step 1: Creating the DataTable Widget We use the SingleChildScrollView to allow scrolling vertically and horizontally within the DataTable if the data overflows. The widget structure should look similar to the below code: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( columns: [ DataColumn(label: Text('ID')), DataColumn(label: Text('Name')), ], rows: [ // Here is where we will render the rows ], ), ), ); Step 2: Iterating Over MyList to Create DataRows In the rows property of the DataTable, we can use Dart’s map function to convert our list of maps into a list of DataRow widgets. Here’s how we can implement this: rows: myList.map((element) { return DataRow( cells: [ DataCell(Text(element['id'].toString())), DataCell(Text(element['name'])), ], ); }).toList(), By using map, we iterate over each element in myList, creating a new DataRow for each. Putting It All Together Here is how your complete DataTable widget would look: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( columns: [ DataColumn(label: Text('ID')), DataColumn(label: Text('Name')), ], rows: myList.map((element) { return DataRow( cells: [ DataCell(Text(element['id'].toString())), DataCell(Text(element['name'])), ], ); }).toList(), ), ), ); Conclusion With these steps, you can easily render a list of maps inside a DataTable widget in Dart. This approach not only keeps your code clean and maintainable but also aligns with common practices in Flutter development. Frequently Asked Questions (FAQ) What is a DataTable in Flutter? A DataTable widget is used to display data in a tabular format with multiple rows and columns, making it easy to read and compare. Can I customize the DataTable further? Yes! You can customize the appearance of the DataTable by modifying DataColumn and DataRow properties, including style, padding, and more. How do I sort the DataTable? You can implement sorting by adding sorting capabilities to your DataTable by utilizing the onSort callback provided in the DataColumn widget.

May 8, 2025 - 03:51

How to Render a List in a Dart DataTable Widget?

In this article, we'll explore how to render a list of map elements inside a DataTable widget in Dart. Specifically, we will be focusing on displaying each element sequentially in rows. For our example, we have a list containing IDs and names, and we want to create a DataTable that showcases this data.

Understanding DataTable in Flutter

The DataTable widget in Flutter is a powerful tool for displaying information in a structured tabular format. It helps to present data in an organized way, making it easier to read and interpret. In our case, we will create a table that holds an ID and a Name column, iterating over a predefined list that contains these data pairs.

What Is Our Data Structure?

We start with a simple list of maps in Dart as follows:

List> myList = [
    {'id': 1, 'name': 'Ahmad'},
    {'id': 2, 'name': 'Usama'},
    {'id': 3, 'name': 'Habib'}
];

This structured data will drive the rows of our DataTable.

Steps to Render Data in DataTable

To render our data, we need to transform each element of our list into a DataRow that our DataTable can display. Let's break down the steps needed to accomplish this.

Step 1: Creating the DataTable Widget

We use the SingleChildScrollView to allow scrolling vertically and horizontally within the DataTable if the data overflows. The widget structure should look similar to the below code:

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: DataTable(
      columns: [
        DataColumn(label: Text('ID')),
        DataColumn(label: Text('Name')),
      ],
      rows: [
        // Here is where we will render the rows
      ],
    ),
  ),
);

Step 2: Iterating Over MyList to Create DataRows

In the rows property of the DataTable, we can use Dart’s map function to convert our list of maps into a list of DataRow widgets. Here’s how we can implement this:

rows: myList.map((element) {
  return DataRow(
    cells: [
      DataCell(Text(element['id'].toString())),
      DataCell(Text(element['name'])),
    ],
  );
}).toList(),

By using map, we iterate over each element in myList, creating a new DataRow for each.

Putting It All Together

Here is how your complete DataTable widget would look:

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: DataTable(
      columns: [
        DataColumn(label: Text('ID')),
        DataColumn(label: Text('Name')),
      ],
      rows: myList.map((element) {
        return DataRow(
          cells: [
            DataCell(Text(element['id'].toString())),
            DataCell(Text(element['name'])),
          ],
        );
      }).toList(),
    ),
  ),
);

Conclusion

With these steps, you can easily render a list of maps inside a DataTable widget in Dart. This approach not only keeps your code clean and maintainable but also aligns with common practices in Flutter development.