Skip to content

Commit fd5f6fd

Browse files
apgapgapgapg
committed
Add custom column support
1 parent 99c0cd8 commit fd5f6fd

10 files changed

+246
-92
lines changed

‎example/lib/main.dart

+25-70
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import 'dart:convert';
2-
1+
import 'package:example/pages/custom_column_table.dart';
2+
import 'package:example/pages/simple_table.dart';
33
import 'package:flutter/material.dart';
4-
import 'package:json_table/json_table.dart';
54

65
void main() => runApp(MyApp());
76

@@ -15,82 +14,38 @@ class MyApp extends StatelessWidget {
1514
primarySwatch: Colors.purple,
1615
),
1716
debugShowCheckedModeBanner: false,
18-
home: HomePage(),
17+
home: RootPage(),
1918
);
2019
}
2120
}
2221

23-
class HomePage extends StatefulWidget {
24-
@override
25-
_HomePageState createState() => _HomePageState();
26-
}
27-
28-
class _HomePageState extends State<HomePage> {
29-
final String jsonSample =
30-
'[{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]",'
31-
'"age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India",'
32-
'"area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},'
33-
'{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"John","email":"[email protected]",'
34-
'"age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India",'
35-
'"area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},'
36-
'{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,'
37-
'"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc",'
38-
'"day":"Monday","month":"april"},{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"}]';
39-
bool toggle = false;
22+
class RootPage extends StatelessWidget {
4023

4124
@override
4225
Widget build(BuildContext context) {
43-
var json = jsonDecode(jsonSample);
44-
return Scaffold(
45-
appBar: AppBar(
46-
title: Text("Table Widget"),
47-
),
48-
body: Container(
49-
padding: EdgeInsets.all(16.0),
50-
child: toggle
51-
? JsonTable(
52-
json,
53-
tableHeaderBuilder: (String header) {
54-
return Container(
55-
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
56-
decoration: BoxDecoration(border: Border.all(width: 0.5), color: Colors.grey[300]),
57-
child: Text(
58-
header,
59-
textAlign: TextAlign.center,
60-
style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w700, fontSize: 14.0, color: Colors.black87),
61-
),
62-
);
63-
},
64-
tableCellBuilder: (value) {
65-
return Container(
66-
padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
67-
decoration: BoxDecoration(border: Border.all(width: 0.5, color: Colors.grey.withOpacity(0.5))),
68-
child: Text(
69-
value,
70-
textAlign: TextAlign.center,
71-
style: Theme.of(context).textTheme.display1.copyWith(fontSize: 14.0, color: Colors.grey[900]),
72-
),
73-
);
74-
},
75-
)
76-
: Center(
77-
child: Text(jsonSample),
26+
return DefaultTabController(
27+
length: 2,
28+
child: Scaffold(
29+
appBar: AppBar(
30+
title: Text("Table Widget"),
31+
bottom: TabBar(
32+
tabs: <Widget>[
33+
Tab(
34+
text: "Simple Table",
35+
),
36+
Tab(
37+
text: "Custom Column Table",
7838
),
39+
],
40+
),
41+
),
42+
body: TabBarView(
43+
children: <Widget>[
44+
SimpleTable(),
45+
CustomColumnTable(),
46+
],
47+
),
7948
),
80-
floatingActionButton: FloatingActionButton(
81-
child: Icon(Icons.grid_on),
82-
onPressed: () {
83-
setState(
84-
() {
85-
toggle = !toggle;
86-
},
87-
);
88-
}),
8949
);
9050
}
91-
92-
String getPrettyJSONString(jsonObject) {
93-
var encoder = new JsonEncoder.withIndent(" ");
94-
return encoder.convert(jsonObject);
95-
}
9651
}

‎example/lib/pages/custom_column_table.dart

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import 'dart:convert';
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:intl/intl.dart';
5+
import 'package:json_table/json_table.dart';
6+
import 'package:json_table/json_table_column.dart';
7+
8+
class CustomColumnTable extends StatefulWidget {
9+
@override
10+
_CustomColumnTableState createState() => _CustomColumnTableState();
11+
}
12+
13+
class _CustomColumnTableState extends State<CustomColumnTable> {
14+
final String jsonSample = '[{"name":"Ram","email":"[email protected]","age":23,"DOB":"1990-12-01"},'
15+
'{"name":"Shyam","email":"[email protected]","age":18,"DOB":"1995-07-01"},'
16+
'{"name":"John","email":"[email protected]","age":10,"DOB":"2000-02-24"},'
17+
'{"name":"Ram","age":12,"DOB":"2000-02-01"}]';
18+
bool toggle = true;
19+
List<JsonTableColumn> columns;
20+
21+
@override
22+
void initState() {
23+
super.initState();
24+
columns = [
25+
JsonTableColumn("name", label: "Name"),
26+
JsonTableColumn("age", label: "Age"),
27+
JsonTableColumn("DOB", label: "Date of Birth", valueBuilder: formatDOB),
28+
JsonTableColumn("age", label: "Eligible to Vote", valueBuilder: eligibleToVote),
29+
JsonTableColumn("email", label: "E-mail",defaultValue: "NA"),
30+
31+
];
32+
}
33+
34+
@override
35+
Widget build(BuildContext context) {
36+
var json = jsonDecode(jsonSample);
37+
return Scaffold(
38+
body: Container(
39+
padding: EdgeInsets.all(16.0),
40+
child: toggle
41+
? JsonTable(
42+
json,
43+
columns: columns,
44+
)
45+
: Center(
46+
child: Text(getPrettyJSONString(jsonSample)),
47+
),
48+
),
49+
floatingActionButton: FloatingActionButton(
50+
child: Icon(Icons.grid_on),
51+
onPressed: () {
52+
setState(
53+
() {
54+
toggle = !toggle;
55+
},
56+
);
57+
}),
58+
);
59+
}
60+
61+
String getPrettyJSONString(jsonObject) {
62+
JsonEncoder encoder = new JsonEncoder.withIndent(' ');
63+
String jsonString = encoder.convert(json.decode(jsonObject));
64+
return jsonString;
65+
}
66+
67+
String formatDOB(value) {
68+
var dateTime = DateFormat("yyyy-MM-dd").parse(value.toString());
69+
return DateFormat("d MMM yyyy").format(dateTime);
70+
}
71+
72+
String eligibleToVote(value) {
73+
if (value>=18) {
74+
return "Yes";
75+
} else
76+
return "No";
77+
}
78+
}

‎example/lib/pages/simple_table.dart

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import 'dart:convert';
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:json_table/json_table.dart';
5+
6+
class SimpleTable extends StatefulWidget {
7+
@override
8+
_SimpleTableState createState() => _SimpleTableState();
9+
}
10+
11+
class _SimpleTableState extends State<SimpleTable> {
12+
final String jsonSample =
13+
'[{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]",'
14+
'"age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India",'
15+
'"area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},'
16+
'{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"John","email":"[email protected]",'
17+
'"age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,"income":"10Rs","country":"India",'
18+
'"area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc","day":"Monday","month":"april"},'
19+
'{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Ram","email":"[email protected]","age":23,'
20+
'"income":"10Rs","country":"India","area":"abc","day":"Monday","month":"april"},{"name":"Shyam","email":"[email protected]","age":28,"income":"30Rs","country":"India","area":"abc",'
21+
'"day":"Monday","month":"april"},{"name":"John","email":"[email protected]","age":33,"income":"15Rs","country":"India","area":"abc","day":"Monday","month":"april"}]';
22+
bool toggle = true;
23+
24+
@override
25+
Widget build(BuildContext context) {
26+
var json = jsonDecode(jsonSample);
27+
return Scaffold(
28+
body: Container(
29+
padding: EdgeInsets.all(16.0),
30+
child: toggle
31+
? JsonTable(
32+
json,
33+
tableHeaderBuilder: (String header) {
34+
return Container(
35+
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
36+
decoration: BoxDecoration(border: Border.all(width: 0.5), color: Colors.grey[300]),
37+
child: Text(
38+
header,
39+
textAlign: TextAlign.center,
40+
style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w700, fontSize: 14.0, color: Colors.black87),
41+
),
42+
);
43+
},
44+
tableCellBuilder: (value) {
45+
return Container(
46+
padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
47+
decoration: BoxDecoration(border: Border.all(width: 0.5, color: Colors.grey.withOpacity(0.5))),
48+
child: Text(
49+
value,
50+
textAlign: TextAlign.center,
51+
style: Theme.of(context).textTheme.display1.copyWith(fontSize: 14.0, color: Colors.grey[900]),
52+
),
53+
);
54+
},
55+
)
56+
: Center(
57+
child: Text(getPrettyJSONString(jsonSample)),
58+
),
59+
),
60+
floatingActionButton: FloatingActionButton(
61+
child: Icon(Icons.grid_on),
62+
onPressed: () {
63+
setState(
64+
() {
65+
toggle = !toggle;
66+
},
67+
);
68+
}),
69+
);
70+
}
71+
72+
String getPrettyJSONString(jsonObject) {
73+
JsonEncoder encoder = new JsonEncoder.withIndent(' ');
74+
String jsonString = encoder.convert(json.decode(jsonObject));
75+
return jsonString;
76+
}
77+
}

‎example/pubspec.lock

+8-1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ packages:
4646
description: flutter
4747
source: sdk
4848
version: "0.0.0"
49+
intl:
50+
dependency: "direct main"
51+
description:
52+
name: intl
53+
url: "https://pub.dartlang.org"
54+
source: hosted
55+
version: "0.15.8"
4956
json_table:
5057
dependency: "direct main"
5158
description:
@@ -150,4 +157,4 @@ packages:
150157
source: hosted
151158
version: "2.0.8"
152159
sdks:
153-
dart: ">=2.2.0 <3.0.0"
160+
dart: ">=2.2.2 <3.0.0"

‎example/pubspec.yaml

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ dependencies:
2525
cupertino_icons: ^0.1.2
2626
json_table:
2727
path: ../
28+
intl: ^0.15.8
29+
2830

2931
dev_dependencies:
3032
flutter_test:

‎json_table.iml

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" />
1313
<excludeFolder url="file://$MODULE_DIR$/example/.pub" />
1414
<excludeFolder url="file://$MODULE_DIR$/example/build" />
15+
<excludeFolder url="file://$MODULE_DIR$/example/ios/Flutter/App.framework/flutter_assets/packages" />
1516
</content>
1617
<orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
1718
<orderEntry type="sourceFolder" forTests="false" />

0 commit comments

Comments
 (0)