Designing tables with Jetspike

Tables remain one of the best ways to present organized data. This tutorial shows you how to create Flutter tables in Jetspike and how to provide them with dynamic data.

Designing a table with Jetspike

It’s this simple

Just drag the Table widget onto your canvas and simply add rows and cells.

Designing a table with Jetspike

Rich contents

Everything can be a table cell. Not only texts but also icons, images, contianers, composite widgets like Columns or even whole child tables.

Rich content for table cells

Code integrity

Jetspike always checks on the code integrity of your table. If there is an unequal number of cells in each row, empty cells will be added automatically to enable displaying an preview. Automatic corrections will be offered to the user. Jetspike will not force these corrections onto your code, however running it would result in an error being thrown.

Automatic corrections for errors in table structures

Dynamic contents

To provide dynamic contents, just wrap a row in the Repeat widget and set it’s iterate property. In the following example, we use one static row for the header, one dynamic row for the data and one static row for inputs.

Setup for a dynamically filled table

You can read more about how to display dynamic data in this tutorial.

Conclusion

Now you know how to present data in tabular fashion in your Flutter apps. Go on an apply this knowledge to your next big hit app.

Jetspike is available for FREE at designer.jetspike.com. We are always looking to improve it and warmly welcome any feature requests. We believe Jetspike can be the right mobile development productivity tool for you.