json table widget

this flutter package provides a json table widget for directly showing table from a json(map). supports column toggle also.

�� installation

in the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  json_table: <latest version>

❔ usage

import this class

import 'package:json_table/json_table.dart';

add json table widget

• accepts map as input. just decode your json array string and pass it in jsontable. no casting to model required.
• option for creating column header builder. this basically returns a widget to show as table column header

tableheaderbuilder: (string header) {
    return container(
      padding: edgeinsets.symmetric(horizontal: 8.0, vertical: 4.0),
      decoration: boxdecoration(border: border.all(width: 0.5),color: colors.grey[300]),
      child: text(
        header,
        textalign: textalign.center,
        style: theme.of(context).texttheme.display1.copywith(fontweight: fontweight.w700, fontsize: 14.0,color: colors.black87),
      ),
    );
  }

• option for creating table cell builder

tablecellbuilder: (value) {
    return container(
      padding: edgeinsets.symmetric(horizontal: 4.0, vertical: 2.0),
      decoration: boxdecoration(border: border.all(width: 0.5, color: colors.grey.withopacity(0.5))),
      child: text(
        value,
        textalign: textalign.center,
        style: theme.of(context).texttheme.display1.copywith(fontsize: 14.0, color: colors.grey[900]),
      ),
    );
  }

• option for toggling column(s) also. user can customise which columns are to be shown

 showcolumntoggle: true

– vanilla implementation

//decode your json string
final string jsonsample='[{"id":1},{"id":2}]';
var json = jsondecode(jsonsample);

//simply pass this json to jsontable
child: jsontable(json)

– implementation with header and cell widget builders

jsontable(
   json,
   tableheaderbuilder: (string header) {
     return container(
       padding: edgeinsets.symmetric(horizontal: 8.0, vertical: 4.0),
       decoration: boxdecoration(border: border.all(width: 0.5),color: colors.grey[300]),
       child: text(
         header,
         textalign: textalign.center,
         style: theme.of(context).texttheme.display1.copywith(fontweight: fontweight.w700, fontsize: 14.0,color: colors.black87),
       ),
     );
   },
   tablecellbuilder: (value) {
     return container(
       padding: edgeinsets.symmetric(horizontal: 4.0, vertical: 2.0),
       decoration: boxdecoration(border: border.all(width: 0.5, color: colors.grey.withopacity(0.5))),
       child: text(
         value,
         textalign: textalign.center,
         style: theme.of(context).texttheme.display1.copywith(fontsize: 14.0, color: colors.grey[900]),
       ),
     );
   },
 )

head over to example code: simple_table.dart

– implementation with custom columns list

• pass custom column list to control what columns are displayed in table
• the list item must be constructed using jsontablecolumn class
• jsontablecolumn provides 4 parameters, namely,

jsontablecolumn("age", label: "eligible to vote", valuebuilder: eligibletovote, defaultvalue:"na")

• first parameter is the field/key to pick from the data
• label: the column header label to be displayed
• defaultvalue: to be used when data or key is null
• valuebuilder: to get the formatted value like date etc

//decode your json string
final string jsonsample='[{"id":1},{"id":2}]';
var json = jsondecode(jsonsample);
//create your column list
var columns = [
      jsontablecolumn("name", label: "name"),
      jsontablecolumn("age", label: "age"),
      jsontablecolumn("dob", label: "date of birth", valuebuilder: formatdob),
      jsontablecolumn("age", label: "eligible to vote", valuebuilder: eligibletovote),
      jsontablecolumn("email", label: "e-mail", defaultvalue: "na"),
    ];
//simply pass this column list to jsontable
child: jsontable(json,columns: columns)

//example of valuebuilder
string eligibletovote(value) {
    if (value >= 18) {
      return "yes";
    } else
      return "no";
}

head over to example code: custom_column_table.dart

key highlights

• the table constructed isn’t the flutter’s native datatable.
• the table is manually coded hence serves a great learning purpose on how to create simple tables manually in flutter
• supports vertical & horizontal scroll
• supports custom columns includes default value, column name, value builder

todo

• [x] custom header list parameter. this will help to show only those keys as mentioned in header list
• [x] add support for keys missing in json object
• [x] add support for auto formatting of date
• [x] extracting column headers logic must be change. not to depend on first object
• [ ] pagination support etc. its good if this table can be replaced with flutter’s native datatable
• [ ] add option to change header row to vertical row on left