When we use the Table widget?<\/h3>\n\n\n\n
A table widget can be used when we want to store multiple rows with the same column width, and each column(table) contains equal data.\u00a0Flutter\u00a0provides another approach for the same using the\u00a0GridView widget<\/strong>.<\/p>\n\n\n\n To create a table, we must use the following things:<\/p>\n\n\n\n <\/p>\n\n\n\n While using this widget, we must know these rules:<\/p>\n\n\n\n Let us understand it with the help of an example given below where we try to cover each thing related with this widget:<\/a><\/a><\/a>\u00a0<\/span><\/p>\n\n\n\n Output:<\/strong><\/p>\n\n\n\n When we run the application in emulator or device, we will see the screenshot below:<\/p>\n\n\n\n Flutter also allows us another widget to create a table in our application named DataTable<\/strong> widget. It is a material design data table where we can display data with column labels and rows<\/strong>. This widget automatically adjusted the table’s column according to the cell data. It is expensive to display data using this widget because here, all the data must be measured twice. First, it measured the dimensions for each column, and second, it actually lay out the table. So, we have to ensure that this widget can only be used when we have fewer rows.<\/p>\n\n\n\n DataTable widget stored information using columns and rows property<\/strong>. The columns property contains data using an array of DataColumn<\/strong>, and the rows property contains information using an array of DataRow<\/strong>. The DataRow has sub-property cells<\/strong> that take an array of DataCell<\/strong>. The DataColumn has a sub-property label<\/strong> that takes widgets as value<\/strong>. We can also provide Text, Image, Icon, or any other widget in the DataTable.<\/p>\n\n\n\n The following is the syntax of DataTable:<\/a><\/a><\/a>\u00a0\u00a0<\/span><\/p>\n\n\n\n Example<\/strong><\/p>\n\n\n\n Let us understand how to use DataTable in the Flutter app. Here, we will define a simple data table that has\u00a0three column labels and four rows<\/strong>:<\/a><\/a><\/a><\/p>\n\n\n\n Output:<\/strong><\/p>\n\n\n\n When we run the application in emulator or device, we will see the screenshot below:<\/p>\n\n\n\n A table allows the user to arrange the data in rows and columns. It is used to store and display our data in a structured format, which helps us to compare the pairs of related values easily. Flutter also allows the user to create a table layout in the mobile application. We can create a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[585],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2132"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2132"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2132\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}TableRow(children: [ \n TableCell(child: Text('javatpoint')), \n TableCell( \n child: Text('Flutter'), \n ), \n TableCell(child: Text('Android')), \n TableCell(child: Text('MySQL')), \n]), <\/code><\/pre>\n\n\n\nimport 'package:flutter\/material.dart'; \n \nvoid main() {runApp(MyApp());} \n \nclass MyApp extends StatefulWidget { \n @override \n _TableExample createState() => _TableExample(); \n} \n \nclass _TableExample extends State<MyApp> { \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n home: Scaffold( \n appBar: AppBar( \n title: Text('Flutter Table Example'), \n ), \n body: Center( \n child: Column(children: <Widget>[ \n Container( \n margin: EdgeInsets.all(20), \n child: Table( \n defaultColumnWidth: FixedColumnWidth(120.0), \n border: TableBorder.all( \n color: Colors.black, \n style: BorderStyle.solid, \n width: 2), \n children: [ \n TableRow( children: [ \n Column(children:[Text('Website', style: TextStyle(fontSize: 20.0))]), \n Column(children:[Text('Tutorial', style: TextStyle(fontSize: 20.0))]), \n Column(children:[Text('Review', style: TextStyle(fontSize: 20.0))]), \n ]), \n TableRow( children: [ \n Column(children:[Text('Javatpoint')]), \n Column(children:[Text('Flutter')]), \n Column(children:[Text('5*')]), \n ]), \n TableRow( children: [ \n Column(children:[Text('Javatpoint')]), \n Column(children:[Text('MySQL')]), \n Column(children:[Text('5*')]), \n ]), \n TableRow( children: [ \n Column(children:[Text('Javatpoint')]), \n Column(children:[Text('ReactJS')]), \n Column(children:[Text('5*')]), \n ]), \n ], \n ), \n ), \n ]) \n )), \n ); \n } \n} <\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-table.png\")
<\/figure>\n\n\n\nFlutter DataTable<\/h2>\n\n\n\n
DataTable( \n columns: [ \n DataColumn(label: ), \n DataColumn(label: )), \n ], \n rows: [ \n DataRow(cells: [ \n DataCell( ), \n DataCell( ), \n ... \n DataCell( ), \n ]), \n DataRow(cells: [ \n DataCell( ), \n DataCell( ), \n ... \n DataCell( ), \n ]), \n ], \n),<\/code><\/pre>\n\n\n\nimport 'package:flutter\/material.dart'; \n \nvoid main() {runApp(MyApp());} \n \nclass MyApp extends StatefulWidget { \n @override \n _DataTableExample createState() => _DataTableExample(); \n} \n \nclass _DataTableExample extends State<MyApp> { \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n home: Scaffold( \n appBar: AppBar( \n title: Text('Flutter DataTable Example'), \n ), \n body: ListView(children: <Widget>[ \n Center( \n child: Text( \n 'People-Chart', \n style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold), \n )), \n DataTable( \n columns: [ \n DataColumn(label: Text( \n 'ID', \n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) \n )), \n DataColumn(label: Text( \n 'Name', \n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) \n )), \n DataColumn(label: Text( \n 'Profession', \n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) \n )), \n ], \n rows: [ \n DataRow(cells: [ \n DataCell(Text('1')), \n DataCell(Text('Stephen')), \n DataCell(Text('Actor')), \n ]), \n DataRow(cells: [ \n DataCell(Text('5')), \n DataCell(Text('John')), \n DataCell(Text('Student')), \n ]), \n DataRow(cells: [ \n DataCell(Text('10')), \n DataCell(Text('Harry')), \n DataCell(Text('Leader')), \n ]), \n DataRow(cells: [ \n DataCell(Text('15')), \n DataCell(Text('Peter')), \n DataCell(Text('Scientist')), \n ]), \n ], \n ), \n ]) \n ), \n ); \n } \n}<\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-table2.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"