How to Import an Excel File into Flutter DataTable?

In this article, we will show you how to import an excel file into Flutter DataTable.

Step 1: Extracting Data from Excel

The file picker should allow the selection of .xlsx files. Once an Excel file is selected, decode it using the Excel.decodeBytes method from the excel package. Extract the headers from the first row and the data starting from the second row. Dynamically generate columns by iterating over the headers and creating a GridColumn for each one.

  // Handle Excel file import and load data into the DataGrid.
  Future<void> importDataGridFromExcel() async {
    clearData();

    // Picking an Excel file using FilePicker.
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['xlsx'],
    );

    if (result != null) {
      Uint8List? fileBytes = result.files.first.bytes;
      if (fileBytes == null) {
        String? filePath = result.files.first.path;
        if (filePath != null) {
          fileBytes = await File(filePath).readAsBytes();
        }
      }

      if (fileBytes != null) {
        var excel = Excel.decodeBytes(fileBytes);

        for (var table in excel.tables.keys) {
          var sheet = excel.tables[table];
          // Extract headers from the first row of the sheet.
          List<String> headers =
              sheet!.row(0).map((cell) => cell!.value.toString()).toList();
          // Loop through the rows starting from the second row (skipping the header).
          for (int row = 1; row < sheet.maxRows; row++) {
            Map<String, dynamic> rowData = {};
            for (int col = 0; col < headers.length; col++) {
              rowData[headers[col]] = sheet.row(row)[col]!.value;
            }
            importedData.add(rowData);
          }
        }

        if (importedData.isNotEmpty) {
          // Generate the columns.
          columns = generateColumns(importedData[0]);
          if (mounted) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DataGridPage(
                  importedData: importedData,
                  columns: columns,
                ),
              ),
            );
          }
        }
      }
    }
  }

  // Clear previous data.
  void clearData() {
    importedData.clear();
    columns.clear();
  }

  // Dynamically generate columns based on the imported data.
  List<GridColumn> generateColumns(Map<String, dynamic> data) {
    List<GridColumn> columns = [];

    for (var entry in data.entries) {
      GridColumn gridColumn = GridColumn(
        columnName: entry.key,
        label: Container(
          padding: const EdgeInsets.all(8),
          alignment: Alignment.center,
          child: Text(entry.key),
        ),
      );

      columns.add(gridColumn);
    }

    return columns;
  }

Step 2: Displaying Data in SfDataGrid

Display a CircularProgressIndicator while the data is loading. Once the data is loaded, pass the prepared DataGridSource to the Flutter DataGrid widget to render the grid.

  late ExcelDataGridSource excelDataGridSource;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  // Simulate loading data and prepare the DataGrid source.
  Future<void> loadData() async {
    await Future.delayed(const Duration(seconds: 2));
    if (mounted) {
      setState(() {
        excelDataGridSource =
            ExcelDataGridSource(widget.importedData, widget.columns);
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DataGrid'),
      ),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : SfDataGrid(
              source: excelDataGridSource,
              columns: widget.columns,
              columnWidthMode: ColumnWidthMode.fill,
            ),
    );
  }

You can download this example on GitHub.

Conclusion
I hope you enjoyed learning how to import an excel file into Flutter DataTable.
You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!