Flutter Widget Explaining Series #1

DataTable In Flutter

Learn How To Create DataTable In Your Flutter Apps

Mohit Joshi
Oct 5 · 6 min read
Image for post
Image for post

For Mobile App Developers , Displaying data in tables is an everyday task with laying out all the row & columns with appropriate needed space for the same. Displaying Information In Tabular is Easy to Understand & Interpret By the Users by providing More Information In Less Space with proper categorization also. Flutter possesses in its store a widget to perform this task with ease & perfection Using DataTable.

For more info on DataTable ,Watch this video By Flutter :

DataTable In Flutter

Note: Use DataTable iff you have fewer rows, because DataTable takes twice the computation for laying out elements on User Interface.

What is Flutter ?

Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time

Flutter Introduction Video

If you want to explore more about Flutter, please visit Flutter’s official website to get more information.

Image for post
Image for post
Click to See Flutter Showcase

DataTable Syntax :

: Add the DataTable() widget .

: Define DataColumn

: Define each DataRow & DataCell in each of it.

DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
),
),
DataColumn(
label: Text(
'Age',
),
),
......
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Mohit')),
DataCell(Text('23')),
DataCell(Text('Professional')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Aditya')),
DataCell(Text('24')),
DataCell(Text('Associate Professor')),
],
),
....
],
);

Allows Sorting :

sortColumnIndex : int typed The current primary sort key’s column

sortAscending : bool value typed — pertains to any value mentioned in sortColumnIndex is sorted in ascending order |or not.

sortColumnIndex : 0 
sortAscending : bool value

Make a Column Numeric :

: numeric — bool valued: represents whether this column represents numeric data or not.

numeric : true | false

Show Selected Row :

: selected — bool valued: represents whether the row is selected or not.

selected : true | false

Show Cell Is Editable :

: showEditIcon — bool valued: represents whether to show an edit icon at the end of the cell.

showEditIcon : true

All DataTable Elements provide friendly-callback to ease out Implementing User behavior to edit, select, sort data with the data cells taking widgets so that you can put in any widgets in your data cells.

Using DataTable In Flutter

import 'package:flutter/material.dart';void main() => runApp(MyApp());/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Designation',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Mohit')),
DataCell(Text('23')),
DataCell(Text('Associate Software Developer')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Akshay')),
DataCell(Text('25')),
DataCell(Text('Software Developer')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Deepak')),
DataCell(Text('29')),
DataCell(Text('Team Lead ')),
],
),
],
);
}
}

When you run this Flutter application, you would get the DataTable displayed in UI as shown below :

Image for post
Image for post
DataTable App Demo

Understanding DataTable Elements :

DataTable — Possess column & rows which take an array of DataColumn & DataRow Respectively. Each DataRow has cell property that takes an array of DataCell.

Both DataColumn & DataCell take widgets as a value so you can assign them Text, Image, Icon, or any other widget.

: DataTable — Renders the DataTable. It possesses properties like — columns , columnSpacing ,dataRowColor ,dataRowHeight,dataTextStyle ,dividerThickness ,horizontalMargin ,key ,onSelectAll ,rows ,runtimeType ,showBottomBorder ,showCheckboxColumn , sortAscending , sortColumnIndex

: DataColumn : creates the configuration for a column of datatable . Some Common properties are : label , numeric , tooltip

DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
numeric: true,
tooltip: "Enter name here",
),

: DataRow : Row configuration and cell data for a DataTable. It has properties like selected, onSelectChanged to handle select behavior.

: DataCell : lowest level widget in datatable which contains cell level information with widgets as value.

Enabling For Flutter Web

DataTable Performs the Same for flutter web as well by changing the channel to development mode as currently web is enabled in the beta channel.

Use the following commands to switch channels and enabling flutter web

flutter channel beta
flutter upgrade
flutter config — enable-web

Add-On Web to your project & run the project to web view the datatable

flutter create .
flutter run -d chrome

Closing Thoughts

In this blog, we explored the DataTable widget provided by Flutter for rendering data in a tabular grid format. Tables are a Quintessential tool in modern applications as they provide us with the ease of customizing the User-Interface of the app as per user needs. They also provide the app it’s fondness and customizability as per particular needs. The key purpose of this article is to avail you of an Insight of How we can create DataTable based flutter application using the Pagination Technique.

If you have not used DataTable, I hope this article has provided you with content information about what’s all about it and you will give it — a Try.

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Mohit Joshi

Written by

Less Human . More Being

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Mohit Joshi

Written by

Less Human . More Being

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store