{"id":23061515,"url":"https://github.com/syncfusionexamples/how-to-populate-flutter-datatable-sfdatagrid-with-json-api","last_synced_at":"2026-03-11T00:02:56.643Z","repository":{"id":47109226,"uuid":"372396103","full_name":"SyncfusionExamples/How-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API","owner":"SyncfusionExamples","description":"This demo shows how to populate Flutter DataTable with JSON API.","archived":false,"fork":false,"pushed_at":"2024-05-10T05:51:08.000Z","size":193,"stargazers_count":2,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-08T06:50:42.041Z","etag":null,"topics":["datagrid","datatable","flutter"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-31T05:49:04.000Z","updated_at":"2025-10-07T03:20:01.000Z","dependencies_parsed_at":"2025-08-15T08:33:00.058Z","dependency_job_id":"146d0d8a-340f-4457-a0cc-e1c17d8b6c18","html_url":"https://github.com/SyncfusionExamples/How-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SyncfusionExamples/How-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FHow-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FHow-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FHow-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FHow-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/How-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FHow-to-populate-Flutter-DataTable-SfDataGrid-with-JSON-API/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30362718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datagrid","datatable","flutter"],"created_at":"2024-12-16T03:17:43.659Z","updated_at":"2026-03-11T00:02:56.600Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to populate Flutter DataTable SfDataGrid with JSON API\n\nLoad the data from JSON to the Flutter DataTable  widget by fetching the data from JSON (online) and convert JSON data to the list collection. Then create the rows for the datagrid from the list collection.\n\nThe following steps explains how to load the JSON data to Flutter DataTable.\n\n## STEP 1:\nTo fetch the JSON data from the web, add the following package in the dependencies of pubspec.yaml.\n\n```xml\ndependencies:\n  http: ^0.12.0+4\n```\n\n## STEP 2: \n\nImport the following library in the flutter application.\n\n```xml\nimport 'dart:convert';\nimport 'package:intl/intl.dart';\nimport 'package:http/http.dart' as http;\nimport 'package:flutter/material.dart';\nimport 'package:syncfusion_flutter_datagrid/datagrid.dart';\n```\n\n## STEP 3: \nTo fetch the data from web API, create an async method. Get the JSON data using http.get method and decode that JSON data. And then, convert the JSON data to the list collection. Here a generateProductList() have been created for fetching JSON data.\n\n```xml\nFuture\u003cvoid\u003e generateProductList() async {\n    var response = await http.get(Uri.parse(\n        'https://ej2services.syncfusion.com/production/web-services/api/Orders'));\n    var list = json.decode(response.body).cast\u003cMap\u003cString, dynamic\u003e\u003e();\n    productlist =\n        await list.map\u003c_Product\u003e((json) =\u003e _Product.fromJson(json)).toList();\n    jsonDataGridSource = _JsonDataGridSource(productlist);\n    return productlist;\n  }\n```\n\n\n## STEP 4: \n\nInitialize the SfDataGrid with all the required properties. Here, SfDataGrid is wrapped inside the FutureBuilder widget. Load the SfDataGrid  widget when the Snapshot.hasData contains data.\n\n```xml\n@override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Flutter DataGrid Sample'),\n      ),\n      body: Container(\n          child: FutureBuilder(\n              future: generateProductList(),\n              builder: (BuildContext context, AsyncSnapshot\u003cdynamic\u003e snapshot) {\n                return snapshot.hasData\n                    ? SfDataGrid(\n                        source: jsonDataGridSource, columns: getColumns())\n                    : Center(\n                        child: CircularProgressIndicator(\n                          strokeWidth: 3,\n                        ),\n                      );\n              })),\n    );\n  }\n  ```\n\n## STEP 5: \n\nCreate a data source class extends with DataGridSource for mapping data to the SfDataGrid.\n\n```xml\nclass _JsonDataGridSource extends DataGridSource {\n  _JsonDataGridSource(this.productlist) {\n    buildDataGridRow();\n  }\n\n  List\u003cDataGridRow\u003e dataGridRows = [];\n  List\u003c_Product\u003e productlist = [];\n\n\n  void buildDataGridRow() {\n    dataGridRows = productlist.map\u003cDataGridRow\u003e((dataGridRow) {\n      return DataGridRow(cells: [\n        DataGridCell\u003cint\u003e(columnName: 'orderID', value: dataGridRow.orderID),\n        DataGridCell\u003cString\u003e(\n            columnName: 'customerID', value: dataGridRow.customerID),\n        DataGridCell\u003cint\u003e(\n            columnName: 'employeeID', value: dataGridRow.employeeID),\n        DataGridCell\u003cDateTime\u003e(\n            columnName: 'orderDate', value: dataGridRow.orderDate),\n        DataGridCell\u003cdouble\u003e(columnName: 'freight', value: dataGridRow.freight),\n      ]);\n    }).toList(growable: false);\n  }\n\n  @override\n  List\u003cDataGridRow\u003e get rows =\u003e dataGridRows;\n\n  @override\n  DataGridRowAdapter buildRow(DataGridRow row) {\n    return DataGridRowAdapter(cells: [\n      Container(\n        alignment: Alignment.centerRight,\n        padding: EdgeInsets.all(8.0),\n        child: Text(\n          row.getCells()[0].value.toString(),\n          overflow: TextOverflow.ellipsis,\n        ),\n      ),\n      Container(\n        alignment: Alignment.centerLeft,\n        padding: EdgeInsets.all(8.0),\n        child: Text(\n          row.getCells()[1].value,\n          overflow: TextOverflow.ellipsis,\n        ),\n      ),\n      Container(\n        alignment: Alignment.centerRight,\n        padding: EdgeInsets.all(8.0),\n        child: Text(\n          row.getCells()[2].value.toString(),\n          overflow: TextOverflow.ellipsis,\n        ),\n      ),\n      Container(\n        alignment: Alignment.centerRight,\n        padding: EdgeInsets.all(8.0),\n        child: Text(\n          DateFormat('MM/dd/yyyy').format(row.getCells()[3].value).toString(),\n          overflow: TextOverflow.ellipsis,\n        ),\n      ),\n      Container(\n        alignment: Alignment.centerRight,\n        padding: EdgeInsets.all(8.0),\n        child: Text(\n          row.getCells()[4].value.toString(),\n          overflow: TextOverflow.ellipsis,\n        ),\n      ),\n    ]);\n  }\n}\n```\n\n**[View document in Syncfusion Flutter Knowledge base](https://www.syncfusion.com/kb/12646/how-to-populate-flutter-datatable-sfdatagrid-with-json-api)**\n...","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fhow-to-populate-flutter-datatable-sfdatagrid-with-json-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fhow-to-populate-flutter-datatable-sfdatagrid-with-json-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fhow-to-populate-flutter-datatable-sfdatagrid-with-json-api/lists"}