TableView Using Swift

iOS Tutorials: UITableView Output

A simple UITableView using swift. A TableView is a component provided by Apple so that we can use it to show a list of items. If we talk practically then may be list of news, movies etc.

Create a simple Application or just download a starter Application from the link here.

Getting started with TableView (UITableView)

If you run the Sample Project downloaded from the above link, it will look something like this.

iOS Tutorials: Hello World.
iOS Tutorials: Hello World.
  • First of all delete the “Hello World” label.
  • Now we are going to create a simple UITableView.
  • Firstly navigate to the main.storyboard file and delete the label which is present at the centre of the screen.

This is how, now your storyboard looks like.

iOS Tutorials: main.storyboard file
main.storyboard file
  • From the objects section in the utility panel search for UITableView.
  • Drag and drop the TableView from the panel into the empty space as indicated in the image below.


iOS Tutorials: Using UITableView
  • Now set the frame for this table view, for this in the Utility Panel (Top right corner) select the second option from right called as the “Size inspector”.
  • Put the values as (x=0, y=20, width=375, height=647)
    • Y=20, because we need to consider the safe area as well for iPhoneX.
    • Width=375 because we have selected iPhone8.
    • Height=647 because total physical height of the device is 667. So,647 (TableView height) +20 (safe area).
  • Hit enter after setting the values.


iOS Tutorials: UITableView Set Frame
UITableView Set Frame
  • Set Constraints, as shown in the image below.


iOS Tutorials: UITableView set Constraints
UITableView set Constraints


iOS Tutorials: UITableView set Constraints
UITableView set Constraints
  • Adding TableView Datasource and delegates.
    • UITableViewDelegate Protocol: Optional methods of the protocol allow the delegate to manage selections, configure section headings and footers, help to delete and reorder cells, and perform other actions.
    • UITableViewDataSource Protocol: As a representative of the data model, the data source supplies minimal information about the table view’s appearance.
  • You need to select the TableView and then –> Right Click –> Drag to the ViewController object –> releasing the click will show a popup with options. We can select one at a time, select data source, and repeat the same for selecting delegate as well or vice versa.


iOS Tutorials: UITableView set delegate and dataSource
UITableView set delegate and dataSource
  • Select the last option in the Utility panel (top right corner), called as the connections inspector; make sure it looks like this.


iOS Tutorials: Utility Panel UITableView Connections
Utility Panel: UITableView Connections
  • Now we will create an outlet, which will act as an object of the TableView.
  • We will now switch to assistance editor mode. (2 views will be opened).


iOS Tutorials: Assistant Editor Mode
Assistant Editor Mode
  • Creating and outlet, in the ViewController.swift file


iOS Tutorials: UITableView Creating Outlet
UITableView Creating Outlet
  • Name the object of table as tableViewList, this name will be used for accessing the TableView.


iOS Tutorials: UITableView naming Outlets
UITableView naming Outlets
  • We will now move on to write some code and see what all things are required for actually get the TableView working.
  • Close the assistant editor and now, switch to ViewController.swift file where, we can see the import UIKit statement and below that; class initialisation of FirstViewController as a subclass of UIViewController.
  • We will add protocol’s UITableViewDelegate and UITableViewDataSource.
  • It will give the following error; stating that some required methods needs to be implemented in the class, which is going to adopt the protocols.


iOS Tutorials: UITableView delegates and dataSource
UITableView delegates and dataSource
  • Clicking on “Fix” will add the 2 methods in the code automatically.
  • We will complete the methods implementation, replace the 2 methods with following below code.
    • We have added 2 more methods apart from the 2 required methods.
    • just replace the code, which has been provided below from the 2 methods.

    // MARK: – UITableView Delegate/DataSource Methods

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 50


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        var tableCell: UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: “cellIdentifier”)

        if tableCell == nil {

            tableCell = UITableViewCell.init(style: .default, reuseIdentifier: “identifierString”)


        tableCell.textLabel?.text = String(indexPath.row)

        return tableCell


func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {        

        tableView.deselectRow(at: indexPath, animated: true)

        showAlert(withTitleAndMessage: “Alert!”, message: String(format: “%@ row is selected.”,String(indexPath.row)) )


        // MARK: – Other Methods

    func showAlert(withTitleAndMessage title:String, message:String) {

        let alert = UIAlertController(title: title, message: message, preferredStyle: UIAlertControllerStyle.alert)

        alert.addAction(UIAlertAction(title: “Ok”, style: UIAlertActionStyle.default, handler: nil))

        self.present(alert, animated: true, completion: nil)


  •  Now run the project (Command + R), to see the output. The output will be as shown below.


iOS Tutorials: UITableView Output
UITableView Output
  • Click on any of the cell.


iOS Tutorials: UITableView Item Clicked
UITableView Item Clicked

Hope! this article helped, please download the whole project from the link here.

In our next article we will be discussing about the UITableViewDelegates Method and UITableViewDataSource methods.

Please browse the article from the link.

Are!! you thinking of an grid layout, please browse one of our articles on UICollectionView here.

Author: Chandra.rao

iOS Developer. #Life of an developer.... Learn New technology, Code, Learn New Technology, Code, Death.