How to create souce for Paginateddatatable using FromJson model?

Question

I am using Mysql database as backend for flutter Web App. I have created api and model to fetch data from mysql. I am able to get the table data as Json formate. I am able to ftech the json data getting from Browser. I want to fetch this data in to paginatedDataTable on flutter web app. I am facing issue that how to ftech this data in to paginatedDataTable. PLease help me how to do this. How to fetch json data in to paginatedDataTable on flutter web app.

Below is the json data getting from Browser:

[{"empid":1,"empname":"empname","empemail":"email1"},{"empid":2,"empname":"name2","empemail":"email2"},{"empid":3,"empname":"t1","empemail":"e1"},{"empid":7,"empname":"t2","empemail":"e2"}]

Below is the API:

import 'package:http/http.dart' as http;

import 'employees_model.dart';

Future<List> fetchEmployees() async {
  Uri url = Uri.parse("http://localhost:3000/employees_router/all");
  final response = await http.get(url);
  return employeesFromJson(response.body);
}

Below is employeemodel:

import 'dart:convert';

List<Employees> employeesFromJson(String str) =>
    List<Employees>.from(json.decode(str).map((x) => Employees.fromJson(x)));

String employeesToJson(List<Employees> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Employees {
  Employees({
    required this.id,
    required this.name,
    required this.email,
  });

  int id;
  String name;
  String email;

  factory Employees.fromJson(Map<String, dynamic> json) => Employees(
        id: json["empid"],
        name: json["empname"],
        email: json["empemail"],
      );

  Map<String, dynamic> toJson() => {
        "empid": id,
        "empname": name,
        "empemail": email,
      };
}

Below is My incomplete example Code with paginatedDataTable:

import 'package:flutter/material.dart';
import 'package:webappmysql/employees_model.dart';
import 'package:webappmysql/employees_api.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Example'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: FutureBuilder(
          future: fetchEmployees(),
          builder: (BuildContext ctx, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data.length,
                //shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  Employees employee = snapshot.data[index];
                  ////return Text(user.title);
                  return PaginatedDataTable(
                    source: _dataSource,
                    
                    header: const Text('Employees'),
                    columns: const [
                      DataColumn(label: Text('ID')),
                      DataColumn(label: Text('Name')),
                      DataColumn(label: Text('Email')),
                    ],
                    columnSpacing: 100,
                    horizontalMargin: 10,
                    rowsPerPage: 8,
                    showCheckboxColumn: false,
                  );
                  // return ListTile(
                  //   title: Text(employee.id.toString()),
                  //   subtitle: Text(employee.name),
                  //   contentPadding: const EdgeInsets.only(bottom: 20.0),
                  // );
                },
              );
            } else if (snapshot.hasError) {
              return Text('${snapshot.error}');
            }

            // By default, show a loading spinner.
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Answer 1

change your HomePage to this.

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Example'),
      ),
      body: FutureBuilder(
        future: fetchEmployees(),
        builder: (BuildContext ctx, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: PaginatedDataTable(
                source: dataSource(snapshot.data),
                header: const Text('Employees'),
                columns: const [
                  DataColumn(label: Text('ID')),
                  DataColumn(label: Text('Name')),
                  DataColumn(label: Text('Email')),
                ],
                showCheckboxColumn: false,
              ),
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }

          // By default, show a loading spinner.
          return const CircularProgressIndicator();
        },
      ),
    );
  }

  DataTableSource dataSource(List<Employees> employeesList) =>
      MyData(dataList: employeesList);
}

class MyData extends DataTableSource {
  MyData({required this.dataList});
  final List<Employees> dataList;
  // Generate some made-up data

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => dataList.length;
  @override
  int get selectedRowCount => 0;
  @override
  DataRow getRow(int index) {
    return DataRow(
      cells: [
        DataCell(
          Text(dataList[index].id.toString()),
        ),
        DataCell(
          Text(dataList[index].name),
        ),
        DataCell(
          Text(dataList[index].email),
        ),
      ],
    );
  }
}