Mastering UITableView – Dynamic Data by Section

In this lesson

  • Pass List of string to UITableViewSource
  • Update GetCell to use List of strings for Cell Title
  • Implement grouped listing by section


Tap on time to skip ahead


In our previous video, we demonstrated how we can display three rows with some hard coded text here. So how do we go about displaying more dynamic items or a dynamic collection? Well I’m gonna kick things off by creating a Section List real quick and I’m going to call it “heroes,” a list of strings. And I’m going to name them Batman, Superman, and Wonder Woman. And let’s throw a fourth one in and let’s just say “Robin.”


And I’m gonna update our DemoTableSource to take this collection of items in its constructor. Then I’m going to say “this.Heroes = heroes” and I’m going to create a field. And I’m gonna update my “RowsInSection” to return “Heroes.Count” And then I’m also going to go about updating the texts of our text cell with the particular hero name. Now how do we know which hero display? If we take a look at the “GetCell” parameters we will see that we are passing an IndexPath. And IndexPath consists of two properties – we have our row. Actually IndexPath has multiple properties but these are the two main ones that you want to use. We have Row as well as Section, and we use Section if we have a grouped list and we’ll do that in a bit. But for now we just need Row. Now I can then say “Heroes[indexPath.Row]”. I need to make this capital H. And now if we run our application, we should see our items.


Now what happens if we want to also display like heroes on top and villains on the bottom? Well, let’s take the most direct route for now. We’re going to get rid of our heroes List. And we are actually going to create a Characters Dictionary. And it’s going to be a string and then a list of strings. And we’re gonna say: “characters[“Heroes”] = new List<string>(){“Batman”, “Superman”, “Wonder Woman”}” And then we’ll just throw in “Aquaman.” He needs the love. And then we also want to say: “characters[“Villains”] = new List<string>(){}.” And we will say “Joker, Bizzaro, Penguin, and Bane.”


And now we’re going to pass this Dictionary into our TableSource. And so we’re going to need to update our parameters. And I’m just going to go ahead and get rid of this field. I’m going to say: “this.Characters = heroes” and actually we want that to be named something else. Now our RowsInSection is going to be a bit different because we’re going to be showing things grouped. And before we get into RowsInSection we actually need to override a new method called NumberOfSections. And what we want to do is we want to return the number of keys we have in our Dictionary. So I want to say “Characters.Keys.Count” And then the RowsInTheSection is going to get the key. And we’ll see Section as an nint. We want to be an int instead and then we will also need to declare this as Key. And then we’re going to say “characters[Key].Count.” And then we also have this issue here. And you know what, let’s go ToList here. And that should clean up everything. We want this to be a string.


And the next method that we need to override is the title for the Section so I can say “override TitleForHeader” is what we want. And we’ll see we’re passing in the Section. And we’re going to actually do this – we’re going to cut and paste what we had before. We’re just going to return the key like so and then here to get our key we’re going to say “TitleForHeader” and then we’re going to pass our section. So we’re just going to re use something that is already provided to us with the UITableVIew and then we also need to pass in the TableView to it. And now we can update our GetCell to say: “Characters[TitleForHeader(tableView, indexPath.Section)][IndexPath.Row]” And so now if we run our application we should have a nice grouped list. And we do. We’ll see we have a header for heroes and we have a header for villains. So you can see it’s pretty easy to dynamically display data as well as format it in a grouped format.