Flutter DataTable from API

Question

I have a flutter app that I use to fetch and display data. I get the data from a api and afterwards display it in a datatable. I would like to display the column title once then the data in a list instead of repeating the column title in each data item as shown in the image below

Here is the code for displaying the the data table

                Expanded(
                    child: ListView.builder(
                        itemCount: loans.results.length,
                        itemBuilder: (context, index) {
                          final y = loans.results[index].customer.firstname +
                              " " +
                              loans.results[index].customer.lastname;

                          final x = loans
                              .results[index].loanParticulars.amountApplied;
                          final z = loans.results[index].stage.name;
                          final w =
                              loans.results[index].loanApplicationStatus.name;

                          return SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: DataTable(columnSpacing: 38.0, columns: [
                              DataColumn(label: Text('Name')),
                              DataColumn(label: Text('Amount')),
                              DataColumn(label: Text('Status')),
                              DataColumn(label: Text('Stage')),
                            ], rows: [
                              DataRow(cells: [
                                DataCell(Container(width: 75, child: Text(y))),
                                DataCell(Container(child: Text(x))),
                                DataCell(Container(child: Text(w))),
                                DataCell(Container(child: Text(z)))
                              ])
                            ]),
                          );
                        }))
              

Answer 1

I have example for you just remove the listview builder and do like this

                 SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: DataTable(columnSpacing: 38.0, columns: [
                          DataColumn(label: Text('Name')),
                        ], rows: loans.results.map((e) => DataRow(
                            selected: false,
                            onSelectChanged: (value) {},
                            cells: [
                              DataCell(Container(child: 
                              Text(e.customer.firstname),)),
                           ]
                       )).toList(),
                      )

Answer 2

You are generating a DataColumn header also for each index value. You should generate DataRows only to the index values.

Replace the below code snippets instead of the Expanded widget and check:

  Expanded(
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columnSpacing: 38.0,
        columns: [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Amount')),
          DataColumn(label: Text('Status')),
          DataColumn(label: Text('Stage')),
        ],
        rows: List.generate(loans.results.length, (index) {
          final y = loans.results[index].customer.firstname +
              " " +
              loans.results[index].customer.lastname;

          final x = loans.results[index].loanParticulars.amountApplied;
          final z = loans.results[index].stage.name;
          final w = loans.results[index].loanApplicationStatus.name;

          return DataRow(cells: [
            DataCell(Container(width: 75, child: Text(y))),
            DataCell(Container(child: Text(x))),
            DataCell(Container(child: Text(w))),
            DataCell(Container(child: Text(z)))
          ]);
        }),
      ),
    ),
  );