Flutter Tutorial - Sortable DataTable In 9 Minutes

Create a DataTable with Flutter to display data in columns, rows, and cells and also learn how to sort the data within the table.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/data...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Create Invoice PDF Document Tutorial: • Flutter Tutorial - Cre...
Create PDF Tables & Images Tutorial: • Flutter Tutorial - Cre...
Display Software Licenses Tutorial: • Flutter Tutorial - Lic...
Secure Storage & Data Persistence Tutorial: • Flutter Tutorial - Sec...
Search & Filter ListView Tutorial: • Flutter Tutorial - Sea...
Expandable ListView Tutorial: • Flutter Tutorial - Exp...
Single & Multi Selection ListView Tutorial: • Flutter Tutorial - Sin...
Autofill Services In 5 Minutes Tutorial: • Flutter Tutorial - Aut...
Buttons 2.0 Tutorial: • Flutter Tutorial - New...
Null Safety In 5 Minutes Tutorial: • Flutter Tutorial - Nul...
Migrate App To Null Safety Tutorial: • Flutter Tutorial - Mig...
Deploy Flutter Web App Tutorial: • Flutter Tutorial - Fir...
Search Bar & Search Delegate Tutorial: • Flutter Tutorial - Sea...
App Bar Tutorial: • Flutter Tutorial - App...
TIMELINE
0:00 Introduction Sortable Data Table
0:17 Create Data Table
0:46 Create Table Columns
1:24 Create Table Rows
2:07 Create Table Cells
4:04 Sort Data Table
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/datatable_sortable_example Create Invoice PDF Document Tutorial: kzbin.info/www/bejne/sJCYqZ6eetCWa7s Create PDF Tables & Images Tutorial: kzbin.info/www/bejne/bpuZeH6qpbeepdk Display Software Licenses Tutorial: kzbin.info/www/bejne/b53Vfap_fa5pf6c Secure Storage & Data Persistence Tutorial: kzbin.info/www/bejne/haLLo6uhlMtkiKc Search & Filter ListView Tutorial: kzbin.info/www/bejne/pXe9eqp4qsl8oJI Expandable ListView Tutorial: kzbin.info/www/bejne/iJa4kpKNqJ14qbs Single & Multi Selection ListView Tutorial: kzbin.info/www/bejne/bne5nKifrduBfsU Autofill Services In 5 Minutes Tutorial: kzbin.info/www/bejne/rGm3ZZmkp7Z2nJI Buttons 2.0 Tutorial: kzbin.info/www/bejne/r6XPdX6Ad92KlaM Null Safety In 5 Minutes Tutorial: kzbin.info/www/bejne/h5C6naKDg7CCobc Migrate App To Null Safety Tutorial: kzbin.info/www/bejne/fX3RgqOefc5keLs Deploy Flutter Web App Tutorial: kzbin.info/www/bejne/rnvSaICnqMpsbJI Search Bar & Search Delegate Tutorial: kzbin.info/www/bejne/iJKkdHStq79pZ6c App Bar Tutorial: kzbin.info/www/bejne/mnmld2d_f7-pfs0

[@multiculturalvolleyballbar3467]

Thank you, you found a goog mix between explaining quickly but still comprehendable for us. Keep on the good work! Thank you so much!

[@user-iw2md2gl4q]

Your videos are always SO helpful. Thank you so much!

[@gumdum6764]

Very good info to add to my toolbox. Thank you!

[@eyadabbod4903]

Thanks, that was helpful. 👍

[@HeyFlutter]

You are welcome, @eyadabbod4903 😊

[@nomansalhab9628]

Thank you very much your channel is a treasure. I really hope you could get into Flutter web and desktop as well.

[@moasjf]

Great! Thanks

[@gnrslashsp6501]

This tutorial is very important, sorting tables is something that we all really need. I think we must modify the compare string to compare int or compare date if we want to sort things as they are right? Because with your code, the numbers were sorted as string, not numbers. Thank you!

[@HeyFlutter]

Thank you, †GnR† SlashSP! 🙂 Yes of course you are right, you can create specific methods to compare your different data types which you sort, in my case I used only one method compareString to explain less 😀

[@thazeroword646]

Very nice useful video

[@eNONO-ot4zh]

Thank u. I need it

[@SagarSinghAwesome]

nice explanation

[@VladVons]

Thanks

[@nasrulsetiawan]

Thanks. Need more data table videos. 😁

[@nasrulsetiawan]

@@HeyFlutterGreat Work. Thanks. its help me a lot. can you make videos data table with pagination and filter?

[@HeyFlutter]

Thanks, nasrul! 🙂Sure check out my other tutorials about data table here: 1) Selectable Data Table Tutorial: kzbin.info/www/bejne/founXmOwnNWol80 2) Editable Data Table Tutorial: kzbin.info/www/bejne/emfcn5eAlNGeZ5Y

[@mahmoudzghal8779]

Hi @Johannes Milke i watched this video and it helped me but i want to do ,for example , 3 columns inside one columns in data table ,can you help me . THanks

[@zuherabud744]

can you make a video how to filter data in a datatable using dropdown filters or any other filter types

[@ExtraServingsBTS]

Great work as always. Now the hard part - grabbing data from Firestore using a Streambuilder, then sorting the list. It's starting to feel like I should get the data in initstate and then sort. Thoughts?

[@ExtraServingsBTS]

@@HeyFlutter That was the trick for me - couldn't figure out how to get firebase to index members of an array with a date so had to go client side

[@JCSReyes]

Wow this is really a great tutorial! I just finished a beginner course in Flutter and I'm now trying to create a golf scorecard app to practice what I've learned. How can I use DataTable so it can receive user data like how many strokes each player played for each hole?

[@JCSReyes]

@@HeyFlutter thank you so much! Keep up the good work and please continue making videos like these! 😀

[@HeyFlutter]

Thank You JC S Reyes! Follow this link: pub.dev/packages/data_tables I hope you will get your answer 🙂

[@janammaharjan2699]

Awesome thank you . can you please teach us how to integrate search field for table? :)

[@janammaharjan2699]

@@HeyFlutter Thank you

[@yehentennakoon3185]

Hi, this is really helpful, will it be possible to teach how to do lazy loading here, for long lists it takes time

[@yehentennakoon3185]

@@HeyFlutter thank you very much!

[@aminuazeez938]

Thank you very much,sir. Sir, i want to add and mix the color to the table row.

[@HeyFlutter]

Thank You Aminu Azeez! Follow this link: stackoverflow.com/questions/58655599/how-to-change-background-color-of-datacolumn-in-flutter I hope you will get your answer 🙂

[@rajagovindan5754]

Can you post pagination feature in datatable ?

[@c0dingwithchris]

Hi! Great video, but I don't seem to be able to get rid of the lines in-between the rows at all. Could you please recommend how to do this? Thanks

[@HeyFlutter]

Thank You @c0dingwithchris! Follow this link: stackoverflow.com/questions/55271153/flutter-datatable-remove-extra-padding I hope you will get your answer 🙂

[@borisllonalonso99]

Hi Johannes! Is there any way to do that but instead of a pre-charged list using data from a db like firebase? Thanks!

[@vishwaraj5539]

@@HeyFlutter ordering part showing abnormal behaviour. i sent my code to your email.

[@HeyFlutter]

Thank you, Boris Llona! 🙂 You can do it just retrieve data from firebase, store it in list and follow the same procedure as per tutorial

[@Scorpio88ify]

Thank's for a video! But I got an error on sort Type: dynamic Function expressions can't be named. Try removing the name, or moving the function expression to a function declaration statement.dart(named_function_expression)

[@HeyFlutter]

Thank you Віталій Герас, make sure to follow the tutorial step by step 🙂

[@muhammednashaf8136]

Thank you very much for your tutorial. I have a problem when the age is one digit then sort is not working properly can you please help me. Thanks

[@muhammednashaf8136]

@@HeyFlutter Thanks for your quick reply. I just clone the code from git and I changed only the some of ages to one digit and tried. The same problem . But when I make it all into one digit then it’s work. Also if it’s all two digits then also it’s work. But I don’t know why when there one digit and two digit it’s not sorting properly. Please help me if you can. Thanks

[@movacthuz]

@@HeyFlutter it happens because in the tutorial we're sorting by strings, if the length of the strings are different (1 digit to 2 digit for example), then it's not working.. could you please provide an alternative way for this to work regardless of number of digits?

[@HeyFlutter]

Thanks, also Muhammed Nashaf! 🙂 well this should not happen, please make sure to follow tutorial step by step

[@mahdia6350]

Hi Johannes, how can i create sortable dataTable when using futurebuilder?

[@mahdia6350]

@@HeyFlutter I followed your code but my code is not worked properly. I want to know how can I sort my DataTable when using FutureBuilder to fetch json data from server?

[@iGhostr]

What are your gradient values in the AppBar? :D

[@HeyFlutter]

Thank you, iGhost! 🙂Simply check out the source code of this video or also watch my tutorial about AppBars with gradient here: kzbin.info/www/bejne/mnmld2d_f7-pfs0

[@divyaindoor7351]

Help please! How do I make the first row sticky, so that header is always visible? Thanks in advance

[@divyaindoor7351]

Thank you!

[@HeyFlutter]

Thank You DIVYA INDOOR! Follow this link: stackoverflow.com/questions/58026151/fix-top-row-in-data-table-in-flutter I hope you will get your answer 🙂

[@premchandraseakaran1847]

I want to implement one column as a text field controller and another one column as Icon button, How can I make it with pagenated Data table?

[@premchandraseakaran1847]

@@HeyFlutter

[@HeyFlutter]

Thank You prem chandraseakaran! Follow this link: stackoverflow.com/questions/68947917/how-to-manage-textfield-controller-for-multiple-datarow-in-datatable-flutter I hope you will get your answer 🙂

[@ps.audiwaworuntu]

how to sort data in listview from api? Can you help me? thx

[@HeyFlutter]

Thank you, Irene Trifosa! 🙂. You could learn about sorting listview here: stackoverflow.com/questions/55855619/flutter-sorting-listview-items-based-on-type

[@akiltahsin]

How can I make the table fit full screen on windows build?

[@HeyFlutter]

Thank You Akil Mohammad Tahsin! Follow this link: stackoverflow.com/questions/56625052/how-to-make-a-multi-column-flutter-datatable-widget-span-the-full-width I hope you will get your answer 🙂

[@akiltahsin]

@@HeyFlutter Thanks a lot!

[@ajitbhattarai3809]

How to make table headers sticky?

[@HeyFlutter]

Thank You Ajit Bhattarai! Follow this link: pub.dev/packages/table_sticky_headers I hope you will get your answer 🙂

[@premchandraseakaran1847]

I already used Data table and I don't know how to make it Fixed Row header ?

[@HeyFlutter]

Thank You prem chandraseakaran! Follow this link: stackoverflow.com/questions/58398787/fixed-column-and-row-header-for-datatable-on-flutter-dart I hope you will get your answer 🙂

[@prem5758]

@@HeyFlutter Thanks a lot, I will take a look

[@rizaladek4650]

how to apply a sticky header table to the data table can you please make the code

[@rizaladek4650]

@@HeyFlutter Can you make the video please 🙂🙂🙂

[@ExtraServingsBTS]

@@rizaladek4650 make yer own!

[@HeyFlutter]

Thanks, Rizal! 🙂 Learn more about Sticky Headers in this tutorial here: kzbin.info/www/bejne/h4fblWOBlJxnhsU

[@bariscelebi701]

please subtitle this video please

[@davidhadwin3566]

Please explain things. It takes ten times longer to do because we have to guess what you're up to.

[@gamezone5618]

this compare method not work on persian chars🤕

[@HeyFlutter]

Hey @gamezone5618 can you please share more details?

[@MoAdel92]

this way of explanation is very tough to keep up with it

[@jaycao1946]

The acid broccoli repressingly employ because vulture ultimately precede until a symptomatic fowl. cloudy, grateful gratis step-grandmother

[@garenthino]

@@HeyFlutter , this user is likely hiring a company to increase the number of subscribers for their channel; one of the ways these third party companies accomplish this is by using a bot to create randomized comments on as many videos across KZbin as possible, to get people to see the username in the comments, click on it and go to their channel. As you can see by his subscriber count, this method doesn't work, but it's an easy sale for the company providing the service, because it sounds like it would work. It's underhanded, shady, and as a general assumption, most people on KZbin nowadays are smart enough not to fall for it.

[@dev.faizan]

React native disliker 🤓

[@dev.faizan]

@@HeyFlutter sure 😁

[@comebonal5952]

waste of time..