How to populate DataTable with JSON API in flutter

Question

I want to fill out my table with data that I fetch from the Internet, How can I do that

Answer 1

Try below code hope its helpful to you.

Create one List and widget

 List results = [];
  DataRow _getDataRow(index, data) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data['campname'])),//add name of your columns here
        DataCell(Text(data['count'])),
      ],
    );
  }

Create API call function:

Future fetchUsers() async {
  var url = 'Your url here';
  var result = await http.get(url);
  if (result.statusCode == 200) {
    return json.decode(result.body);
  } else {
    throw Exception('Failed');
  }
}

Your Datatable widget:

  Container(
        child: FutureBuilder(
          future: fetchUsers(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              results = snapshot.data;
              if (snapshot.data.length != 0) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                  ),
                  child: DataTable(
                    headingRowColor: MaterialStateColor.resolveWith(
                      (states) => Colors.blue[200],
                    ),
                    columnSpacing: 30,
                    columns: [
                      DataColumn(label: Text('Campaigns')),
                      DataColumn(label: Text('Leads')),
                    ],
                    rows: List.generate(
                      results.length,
                      (index) => _getDataRow(
                        index,
                        results[index],
                      ),
                    ),
                    showBottomBorder: true,
                  ),
                );
              } else {
                return Row(
                  children: const <Widget>[
                    SizedBox(
                      // ignore: sort_child_properties_last
                      child: CircularProgressIndicator(),
                      width: 30,
                      height: 30,
                    ),
                    Padding(
                      padding: EdgeInsets.all(40),
                      child: Text('No Data Found...'),
                    ),
                  ],
                );
              }
            } else {
              return Row(
                children: const <Widget>[
                  SizedBox(
                    // ignore: sort_child_properties_last
                    child: CircularProgressIndicator(),
                    width: 30,
                    height: 30,
                  ),
                  Padding(
                    padding: EdgeInsets.all(40),
                    child: Text('No Data Found...'),
                  ),
                ],
              );
            }
          },
        ),
      ),

Your result Screen->

Answer 2

There are many approaches but if you want a straightforward solution,
Then you can use the json_table widget
https://pub.dev/packages/json_table

for example

//Decode your json string
final String jsonSample='[{"name":"Ram","email":"ram@gmail.com","age":23,"DOB":"1990-12-01"},'
                              '{"name":"Shyam","email":"shyam23@gmail.com","age":18,"DOB":"1995-07-01"},'
                              '{"name":"John","email":"john@gmail.com","age":10,"DOB":"2000-02-24"},'
                              '{"name":"Ram","age":12,"DOB":"2000-02-01"}]';
var json = jsonDecode(jsonSample);
//Create your column list
var columns = [
      JsonTableColumn("name", label: "Name"),
      JsonTableColumn("age", label: "Age"),
      JsonTableColumn("DOB", label: "Date of Birth", valueBuilder: formatDOB),
      JsonTableColumn("age", label: "Eligible to Vote", valueBuilder: eligibleToVote),
    ];
//Simply pass this column list to JsonTable
child: JsonTable(json,columns: columns)

//Example of valueBuilder
String eligibleToVote(value) {
    if (value >= 18) {
      return "Yes";
    } else
      return "No";
}

As you see, we can show a subset of columns. here we don't show email addresses, because we don't add the related columns in the columns variable.