title: Dynamically display JSON data in data table layout in flutter
body: <p>I am Creating  a Dynamic data table view in flutter , where the column headers and the row values are added dynamically. The data is a Json response,the header is a string array and the data to be displayed in  row is also a string array .The goal is to display the data in the table view without any hardcoded values.
  This is how I have tried is to display the data.</p>
  <pre><code>                     return ListView.builder(
                           shrinkWrap: true,
                           scrollDirection: Axis.vertical,
                           itemCount: snapshot.data.dataList.length,
                           itemBuilder: (BuildContext context, int index){
                             return SingleChildScrollView(
                               child: DataTable(
                                 columns: (snapshot.data.headerList[index] as List).map((item) =&gt;
                                 DataColumn(
                                     label:(
                                         List.generate(item.length,(index){
                                           return Text(item[index].toString());
                                         })
                                     )
                                 )).toList(),
                                 rows: (snapshot.data.dataList[index].dataList as List).map((item) =&gt;
                                 
                                 DataRow(
                                   
                                     cells:&lt;DataCell&gt;[
                                       DataCell(
                                           List.generate(item.length,(index){
                                             return Text(item[index].toString());
                                           })
                                       )
                                      ])).toList(),
                               ),
  </code></pre>
  <p>This is the JSON response</p>
  <pre><code> &quot;DayEnd&quot;: {
          &quot;ColumnWidths&quot;: &quot;40´168´96´96´108´156&quot;,
          &quot;Headers&quot;: &quot;SL.&gt;´Customer&lt; ´Balance Qty&gt;´Amount&gt;´Oldest / Recent &quot;,
          &quot;FieldSeparator&quot;: &quot;´&quot;,
          &quot;DataList&quot;: [
              {
                  &quot;Data&quot;: &quot;1. ´ABD ´14 / 14.60´11,090´313 / 313&quot;,
                  &quot;NextLevelZoomData&quot;: [
                      {
                          &quot;Element&quot;: &quot;eg7P27fbW/GmCr&quot;
                      },
                      {
                          &quot;Element&quot;: &quot;AAA==&quot;
                      }
                  ],
                  &quot;NextLevelZoomType&quot;: 2
              },
              {
                  &quot;Data&quot;: &quot;2. ´LATA´16´7,921´20 / 9&quot;,
                  &quot;NextLevelZoomData&quot;: [
                      {
                          &quot;Element&quot;: &quot;MT63z0m7piukmtJZqdZ&quot;
                      },
                      {
                          &quot;Element&quot;: &quot;QT/2zE/AAA=&quot;
                      }
                  ],
                  &quot;NextLevelZoomType&quot;: 2
              },
              {
                  &quot;Data&quot;: &quot;3. ´ANAND´11´915´426 / 426&quot;,
                  &quot;NextLevelZoomData&quot;: [
                      {
                          &quot;Element&quot;: &quot;AAA=&quot;
                      }
                  ],
                  &quot;NextLevelZoomType&quot;: 2
              },
              {
                  &quot;Data&quot;: &quot;4. ´Asts´1´1,010´27 / 27&quot;,
                  &quot;NextLevelZoomData&quot;: [
                      {
                          &quot;Element&quot;: &quot;w/VbTHwKgQAAA==&quot;
                      }
                  ],
                  &quot;NextLevelZoomType&quot;: 2
              },
              }
  </code></pre>
  <p>The above response gives a string data <code>Headers</code> which is  separated by a special character &quot;`&quot;,the each character has to be displayed in a each column header so  which is converted to an array. Similarly the data as well . The column width that has to be maintained for each data is mentioned in columnWidth
  Similarly the alignment of the data like if &quot;SL.&gt;&quot; then &quot;&gt;&quot; it has to be right aligned.</p>
  <p>I am not sure if this is the right approach to get it, This gives an error</p>
  <pre><code>The argument type 'List&lt;Text&gt;' can't be assigned to the parameter type 'Widget'.
  </code></pre>
  <p>Any idea to approach in a better way will be much appreciated.</p>