Flutter dynamic DataTable

Question

I have a DataTable that I want to make dynamic based on the user's date selection. The number of columns will therefore differ.

My current code creates a List<Map> from a Firestore collection for the headers and another for the Row/Cell values. When comparing the length of both the headers and cell content, they are the same size.

My current code to create the table:

// Just providing more detail about the variables used
List<DataColumn> dataColumns = [];
List<DataCell> dataRows = [];

dataColumns = newDateRange.map((string) => 
    DataColumn(label: Text(string))).toList();

dataRows = listOfRows.map((cell) => DataCell(Text(cell.toString()))).toList();

// DataTable creation
DataTable(
    columnSpacing: dataTableColumnSpacing,
    border: dataTableBorder,
    decoration: dataTableBoxDecoration,
    columns: dataColumns,
    rows: [DataRow(cells: dataRows)],
)

From what I have tested, the column headers work as intended, so there is something wrong with the rows section - either variable declaration, map section or in the rows section in the DataTable creation.

The error that I am getting is that the row length is not equal to the column length.

Any help and/or guidance will be appreciated.

Answer 1

Let's say I have list of Headers

List< Headers >? headers = [.....];

My Column would look like this:

columns: headers?.map((e) {
                              return DataColumn(label: Text(e.text?? ""));
                            }).toList() ??
                            [],

Now Cells should be same as number of columns: So Inside a Data row.

DataRow(
                                cells: headers
                                        ?.map((header) {
                                      return DataCell(
                                       Text(header.name ?? "",)
                                      ));
                                    }).toList() ??
                                    [],
                              );

Now you can see list of columns and cells are equal.

Now you need to add list of rows to rows:

rows: listOfRows?.map((element) {
                              return DataRow(
                                cells: headers
                                        ?.map((header) {
                                      return DataCell(Text(
                                      element['name'] ?? "",
                                      ));
                                    }).toList() ??
                                    [],
                              );
                            }).toList() ??
                            []

Note: I have replaced header.name with element['name'] because I want to add name to that cell. Since you want different values and I don't know your structure.

Simply you need to ensure your Column should be of type 1xM where M is number of column

Also you need need to ensure your Rows are of Size NxM N can be any number of rows.