Creating Simple TableView in SwiftUI
Static Lists and Dynamic Lists
In this tutorial, we will learn the basics of creating a tableView using SwiftUI both statically and dynamically, and also we will learn about Identifiable.
Lists
A container that presents rows of data arranged in a single column, optionally providing the ability to select one or more members.
Declaration:
struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View
1. Static List
In its simplest form, a List creates its contents statically, as shown in the following example:
The List works so that for each View that is inside of it, a row will be rendered showing that View. We have 3 Text views so a row for each.
Note: Lists also have the built-in scroll feature same as UITableView in Swift.
2. Dynamic List
A static list looks easy and simple to create. Similarly, the dynamic list also uses the same syntax with some additions to that.
- To display the same set of values as n times in the list, use ForEach to show it repeatedly in the list by setting the range from 0 to n as shown below
- To display an array as a list, follow the above method instead of static value give the end of the range as array.count.
- To display an array of objects as a list, the same steps are followed but a new member id will be introduced to uniquely identify each row.
Let’s see the above with some examples. First, create a simple struct DataType with name, size, color
struct DataType {
let name: String
let size: String
let color: Color
}Now we can go and create a variable inside of our ContentView struct, name it dataTypeList and assign an array of DataType instances to it:
var dataTypeList = [
DataType(name: "Integer", size: "4 bytes", color: .red),
DataType(name: "Character", size: "1 byte", color: .blue),
DataType(name: "Float", size: "4 bytes", color: .green),
DataType(name: "Double", size: "8 bytes", color: .yellow),
]The list view code will be
NOTE: Whenever we use a List based on an Array we have to let the List know how to identify each row as unique. In our case, the name of each dataType works quite well. Our view should now look like this:
Let’s break our List a little to really understand the need of id by simply changing the name of the Character to Integer like so:
var dataTypeList = [
DataType(name: "Integer", size: "4 bytes", color: .red),
DataType(name: "Integer", size: "1 byte", color: .blue),
DataType(name: "Float", size: "4 bytes", color: .green),
DataType(name: "Double", size: "8 bytes", color: .yellow),
]The output view will be
You can see that our List updates accordingly, however, something is off. If you look closely the second row indeed says Integer just like our first element in our Array. But we kept the size of that second element to 1 byte yet the List shows 4 bytes. This is because the List is confused since it has two rows with the same Identifier. Two rows identify themselves with the String Integer. Let’s rename our DataType back to Character.
Identifiable
- To overcome the above scenario and letting know our list how to identify each row as unique, we should conform to protocol Identifiable.
Example:
→ When conforming to the protocol Identifiable we have to implement a variable called id however this variable does not have to be an Int. The protocol only requires that the type of the variable id is actually Hashable.
Note: Int, Double, String and a lot more types are Hashable — go try it out!
→ When confirming the Identifiable protocol we no longer have to explicitly tell the List how the elements in our Array (which are conforming to that protocol) are uniquely identified.
The output will be
Hope this will be useful to whoever is new to the SwiftUI. If you have any suggestions or improvements of any kind let me know on Twitter. I’d love to hear from you!
