1.ออกแบบใน Main.storyboard เลือก object ใน Object Library ชื่อ Table View

2.ปรับ Table Column  ว่าจะให้แสดงอะไร จากนั้นก็ลาก Object มาใส่ เช่น TextField , ImageView

3. ปรับ Table Cell View โดยสร้างคลาสที่สืบทอด NSTableCellView ใหม่ เพื่อสร้าง instance ในการอ้างอิง Textfield และ ImageView

3.1 ไปที่เมนู File > New > File...  แล้วเลือก Cocoa Class 

3.2 ตั้งค่า TableCellView ใน Main.storyboard ให้เป็น  SiteViewCell

3.3 คลิ๊กขวาค้างลาก ImageView จาก Main.storyboard มาวางใน ViewController.swift ตั้งชื่อตัวแปรอ้างอิงแล้วกด connect

3.4 ทำเช่นเดียวกันกับ Text Field

4.คลิ๊กขวาค้างแล้วลาก Table View มาใส่ในไฟล์ View Controller แลัวตั้งชื่อตัวแปรว่า tableView เป็น Instance ของ TableView สำหรับใช้อ้างอิงในการใช้งาน

ViewController.swift

import Cocoa

class ViewController: NSViewController  {

    @IBOutlet weak var tableView: NSTableView!
    override func viewDidLoad() {
       
      
    }
 
}

5.ในการใช้งาน Table View นั้นมีหลักการดังนี้ คือ ใช้ delegate ของ TableView เป็นตัวติดต่อสื่อสาร แล้วเขียนฟังก์ชันการทำงานโยนให้ delegate เพื่อบอกว่าให้ Table view ทำอะไรบ้าง

      5.1 ให้ View Controller ของเราสืบทอด protocal ที่ชื่อว่า "NSTableViewDelegate" และ "NSTableViewDataSource" (เราจะได้คุยกับ Table View รู้เรื่อง)

ViewController.swift

import Cocoa

class ViewController: NSViewController , NSTableViewDelegate , NSTableViewDataSource {
    @IBOutlet weak var tableView: NSTableView!
    override func viewDidLoad() {
      
    }
}

5.2 ประกาศ Delegateใน View Controller

ViewController.swift

import Cocoa

class ViewController: NSViewController , NSTableViewDelegate , NSTableViewDataSource {
    @IBOutlet weak var tableView: NSTableView!
    override func viewDidLoad() {
       tableView.delegate = self
       tableView.dataSource = self
    }
}

5.3 เขียน override function ใส่ให้มันใน View Controller ว่าจะให้มันแสดงหรือทำอะไรอย่างไร

ViewController.swift

import Cocoa

class ViewController: NSViewController , NSTableViewDelegate , NSTableViewDataSource {
    struct SiteHost:Decodable{
        var id:String=""
        var name:String=""
        var url:String=""
        var description:String=""
        var logo_path:String=""
    }
    var sites = [SiteHost]()
    @IBOutlet weak var tableView: NSTableView!
   
    func numberOfRows(in tableView: NSTableView) -> Int {
        return self.sites.count
    }

    func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
        
        let item = self.sites[row]

        if let cell = tableView.makeView(withIdentifier: NSUserInterfaceItemIdentifier("informSiteCellID"), owner: nil) as? SiteViewCell {
       
            cell.siteName.stringValue = item.name
            cell.siteUrl.stringValue = item.url
            if(String(item.logo_path)==""){
                cell.logoImage.image=NSImage(named:NSImage.Name("nopic"))
            }else{
                cell.logoImage.image=NSImage(byReferencing:URL(string:item.logo_path)!)
            }
            return cell
        }
        return nil
    }

   
    override func viewDidLoad() {
       tableView.delegate = self
       tableView.dataSource = self
      
    }
 
}

6.ในการทำงาน เราจะ assign ค่าให้กับตัวแปรอาร์เรย์ sites ซึ่งเป็นอาร์เรย์ของข้อมูลที่จะปรากฎในตาราง ซึ่งอาจจะกำหนดโดยตรง หรือรับค่ามาจากการดึงข้อมูลจากฐานข้อมูลมาแสดงในตาราง