Display a table (in the html/Excel spreadsheet meaning) in a iOS app in Swift

Question

I have been looking around for solutions on how to do this but I am getting a bit confused.

I'd like to display tables of data in my app, not in the sense of Apple's TableView, more like tables you find in Excel or the in HTML. Moreover in my app I will have multiple tables like this in different pages, that I wish to style the same way, not all with the same number of rows or columns. Those tables might be displayed on the screen alongside images or texts, probably never on their own. (so I need an element I can put in a UIViewController)

Basically a table like this (I put this off Google Images because my data is confidential)

I have the theory on how to do this but I'm not sure it's right or exactly how to do it.

My theory is I should create a subclass of UICollectionView, let's call it MyTablesView. MyTablesView would have a variable named data. My pages/VC that contain a table will have an instance of MyTablesView and feed it data in this variable. MyTablesView takes care of styling and displaying this data.

I'm fairly new to Swift and I don't know exactly so I'm not sure on how to tackle this. I am very confused on how to code a UICollectionView. I tried to read this tutorial: http://www.raywenderlich.com/78550/beginning-ios-collection-views-swift-part-1 but it's with a UICollectionViewController and not a UICollectionView so I'm not sure how to tweak it.

So for now this is all I have... class MyTablesView: UICollectionView{ var data = [String] } (I put string for now because I'm not 100% sure of the data that would be in the tables, it will probably end up being doubles, but I'll also need something for headers...)

So I guess my question is: How do I subclass a UICollectionView properly to display the data that will be given to it by a ViewController?

Let me know if anything is unclear. Thanks in advance.

Answer 1

Well, turns out I didn't search thoroughly enough on SO, because here is the answer I had been looking for: How to make a simple collection view with Swift

Since it's another Stack Overflow topic, should I copy the answer or trust Stack Overflow to keep the link alive?

---

The answer I linked to displays a grid of data, but I wanted a table, which means I had to tweak it a bit since I wanted rows so below is an overview of my code. Most of it is similar to the answer I linked to. The changes I made regards the data to display in a multidimensional array, which means I also had to add the numberOfSectionsInCollectionView method in my class and adapt the other methods accordingly. I still need to do some styling to get it to look right.

1. In my storyboard I have a VC where I dragged a UICollectionView. In its first cell I dragged a UILabel.

2. The VC implements UICollectionViewDataSource and UICollectionViewDelegate and has a parameter named data containing the data to display. From the storyboard I ctrl+dragged the UICollectionView and named it mytable.

   class MyView: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource{
     @IBOutlet weak var mytable: UICollectionView! 
     var data = [[String]]()
   
     override func viewDidLoad() {
       data = [["first", "1", "2"], ["second", "3", "4"]]
     }
   
   // --- UICollectionViewDataSource protocol ---
   
     //returns number of sections = subarrays in data
     func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int{
       return data.count
     }
   
     //returns number of items in a section= number of elements in a subarray in data    
     func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return data[section].count
     }
   
   
     func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       // get a reference to our storyboard cell
       let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! MyTableCells
   
       // Use the outlet in our custom class to get a reference to the UILabel in the cell
       cell.myLabel.text = data[indexPath.section][indexPath.item]
   
       return cell
     }
   
   // --- UICollectionViewDelegate protocol ---
     func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
       // handle tap events
       print("You selected cell #\(indexPath.item)!")
     }
   

   }

3. I also created a subclass of UICollectionViewCell. From the storyboard I ctrl+dragged the UILabel from the first cell of the UICollectionView into my subclass and named it myLabel.

   import Foundation
   class MyTableCells: UICollectionViewCell {  
     @IBOutlet weak var myLabel: UILabel! 
   }
   

In the storyboard I hooked delegate and datasource to the VC (Select the UICollectionView, click on the circle and drag it to the VC)

I only did it for one of my VC for now, I might actually subclass UIViewController to be able to have multiple VC with this implementation I guess.