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.
DataTable widget allows you to build a table that automatically sizes its columns according to what’s actually in the cells.
For more info on DataTable ,Watch this video By 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 ”
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase
DataTable Syntax :
- : Add the
DataTable()widget . - : Define
DataColumn - : Define each
DataRow&DataCellin 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
sortColumnIndexis 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.
Do not forget to wrap with SingleChildScrollView To Avoid any horizontal space overflow in UI .
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 :
Understanding DataTable Elements :
Understand the flutter widgets that play a key role in displaying this Tabular Formatted Data .
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.
Initiate using DataTable for your apps. !!!
References For the Blog :
DataTable class
A material design data table. Displaying data in a table is expensive, because to lay out the table all the data must…api.flutter.dev
data_tables | Flutter Package
ListView on Mobile and Stateless Data Tables on Tablets and Desktops.pub.dev
🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
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.
Related: Dialog Using GetX in Flutter
Related: Bottom Navigation Bar using Provider | Flutter
Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.
