Simple table

Simple table:
 
Different styles of simple tables for display the data in order are prepared by flutter code in admin panel:
 
Simple table
Simple table with custom widgets Simple table with custom widgets in desired color
Simple table with desired heading color
Simple table in zebra mode Simple table in dark zebra mode Simple table with line frame
No line table

 


Simple table:

It is simple table located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

 EsSimpleTable(

                rowsContent: [
                  [
                    EsOrdinaryText("ID1"),
                    EsOrdinaryText("Name1"),
                    EsOrdinaryText("Profession1"), ],
                  [
                    EsOrdinaryText("ID2"),
                    EsOrdinaryText("Name2"),
                    EsOrdinaryText("Profession2"), ],
                  [
                    EsOrdinaryText("ID3"),
                    EsOrdinaryText("Name3"),
                    EsOrdinaryText("Profession3"), ],
                ],
                columnTitle: ["ID", "Name", "Profession"],)



Simple table with custom widgets:

It is simple table with custom widgets located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(

dataRowHeight: StructureBuilder.dims!.h0Padding*3,
rowsContent: [
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(path: "assets/images/img1.jpg",
radius: StructureBuilder.dims!.h0Padding,),
),
EsOrdinaryText("Name1"),
EsButton(
text: AppLocalizations.of(context)!.button,
),],
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(path: "assets/images/img2.jpg",
radius: StructureBuilder.dims!.h0Padding,),
),
EsOrdinaryText("Name2"),
EsButton(
text: AppLocalizations.of(context)!.button,
), ],
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(path: "assets/images/img3.jpg",
radius: StructureBuilder.dims!.h0Padding,),
),
EsOrdinaryText("Name3"),
EsButton(
text: AppLocalizations.of(context)!.button,
), ],
],
columnTitle: ["ID", "Name", "Profession"],)



Simple table with custom widgets in desired color:

It is simple table with custom widgets in desired color located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(
decoration: BoxDecoration(
color: StructureBuilder.styles!.primaryColor,
borderRadius: BorderRadius.all(Radius.circular(StructureBuilder.dims!.h0BorderRadius))
),
headingColor: StructureBuilder.styles!.primaryColor,
dataRowHeight: StructureBuilder.dims!.h0Padding * 3,
rowsContent: [
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(
path: "assets/images/img1.jpg",
radius: StructureBuilder.dims!.h0Padding,
),
),
EsOrdinaryText(
"Name1",
color: StructureBuilder.styles!.primaryLightColor,
),
EsButton(
fillColor: StructureBuilder.styles!.secondaryColor,
textColor: StructureBuilder.styles!.primaryColor,
text: AppLocalizations.of(context)!.button,
),
],
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(
path: "assets/images/img2.jpg",
radius: StructureBuilder.dims!.h0Padding,
),
),
EsOrdinaryText(
"Name2",
color: StructureBuilder.styles!.primaryLightColor,
),
EsButton(
fillColor: StructureBuilder.styles!.secondaryColor,
textColor: StructureBuilder.styles!.primaryColor,
text: AppLocalizations.of(context)!.button,
),
],
[
Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h1Padding),
child: EsAvatarImage(
path: "assets/images/img3.jpg",
radius: StructureBuilder.dims!.h0Padding,
),
),
EsOrdinaryText(
"Name3",
color: StructureBuilder.styles!.primaryLightColor,
),
EsButton(
fillColor: StructureBuilder.styles!.secondaryColor,
textColor: StructureBuilder.styles!.primaryColor,
text: AppLocalizations.of(context)!.button,
),
],
],
columnTitle: [
EsTitle(
"ID",
color: StructureBuilder.styles!.primaryLightColor,
),
EsTitle(
"Name",
color: StructureBuilder.styles!.primaryLightColor,
),
EsTitle(
"Profession",
color: StructureBuilder.styles!.primaryLightColor,
)
],
)



Simple table with desired heading color:

It is simple table with desired heading color located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(
headingColor: StructureBuilder.styles!.primaryDarkColor,
rowsContent: [
[
EsOrdinaryText("ID1"),
EsOrdinaryText("Name1"),
EsOrdinaryText("Profession1"),
],
[
EsOrdinaryText("ID2"),
EsOrdinaryText("Name2"),
EsOrdinaryText("Profession2"),
],
[
EsOrdinaryText("ID3"),
EsOrdinaryText("Name3"),
EsOrdinaryText("Profession3"),
],
],
columnTitle: [EsTitle("ID"),EsTitle("Name"),EsTitle("Profession")],
)



Simple table in zebra mode:

It is simple table in zebra mode located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(
headingColor: StructureBuilder.styles!.primaryDarkColor,
zebraMode: true,
rowsContent: [
[
EsOrdinaryText("ID1"),
EsOrdinaryText("Name1"),
EsOrdinaryText("Profession1"),
],
[
EsOrdinaryText("ID2"),
EsOrdinaryText("Name2"),
EsOrdinaryText("Profession2"),
],
[
EsOrdinaryText("ID3"),
EsOrdinaryText("Name3"),
EsOrdinaryText("Profession3"),
],[
EsOrdinaryText("ID4"),
EsOrdinaryText("Name4"),
EsOrdinaryText("Profession4"),
],
],
columnTitle: [EsTitle("ID"),EsTitle("Name"),EsTitle("Profession")],
)



Simple table in dark zebra mode:

It is simple table in dark zebra mode located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(
headingColor: StructureBuilder.styles!.primaryColor,
zebraColor: StructureBuilder.styles!.primaryColor,
zebraMode: true,
decoration: BoxDecoration(
color: StructureBuilder.styles!.secondaryColor,
),
rowsContent: [
[
EsOrdinaryText(
"ID1",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Name1",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Profession1",
color: StructureBuilder.styles!.primaryLightColor,
),
],
[
EsOrdinaryText(
"ID2",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Name2",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Profession2",
color: StructureBuilder.styles!.primaryLightColor,
),
],
[
EsOrdinaryText(
"ID3",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Name3",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Profession3",
color: StructureBuilder.styles!.primaryLightColor,
),
],
[
EsOrdinaryText(
"ID4",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Name4",
color: StructureBuilder.styles!.primaryLightColor,
),
EsOrdinaryText(
"Profession4",
color: StructureBuilder.styles!.primaryLightColor,
),
],
],
columnTitle: [
EsTitle("ID",color: StructureBuilder.styles!.primaryLightColor,),
EsTitle("Name",color: StructureBuilder.styles!.primaryLightColor,),
EsTitle("Profession",color: StructureBuilder.styles!.primaryLightColor,)
],
)



Simple table with line frame:

It is simple table with line frame located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

Container(
decoration: BoxDecoration(
border:
Border.all(color: StructureBuilder.styles!.primaryColor),
borderRadius: BorderRadius.all(Radius.circular(StructureBuilder.dims!.h0BorderRadius))

),
child: EsSimpleTable(


rowsContent: [
[
EsOrdinaryText("ID1"),
EsOrdinaryText("Name1"),
EsOrdinaryText("Profession1"),
],
[
EsOrdinaryText("ID2"),
EsOrdinaryText("Name2"),
EsOrdinaryText("Profession2"),
],
[
EsOrdinaryText("ID3"),
EsOrdinaryText("Name3"),
EsOrdinaryText("Profession3"),
],
],
columnTitle: [
EsTitle("ID"),
EsTitle("Name"),
EsTitle("Profession")
],
),
)




No line table:

It is noline table located in:
es_flutter_component/lib/components/es_table/es_simple_table.dart'
and is used as:

EsSimpleTable(
dividerThickness: 0.000001,
rowsContent: [
[
EsOrdinaryText("ID1"),
EsOrdinaryText("Name1"),
EsOrdinaryText("Profession1"),
],
[
EsOrdinaryText("ID2"),
EsOrdinaryText("Name2"),
EsOrdinaryText("Profession2"),
],
[
EsOrdinaryText("ID3"),
EsOrdinaryText("Name3"),
EsOrdinaryText("Profession3"),
],
],
columnTitle: [
EsTitle("ID"),
EsTitle("Name"),
EsTitle("Profession")
],
)