> For the complete documentation index, see [llms.txt](https://pakornpat.gitbook.io/ios-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pakornpat.gitbook.io/ios-app/v2/display-tableviewcell.md).

# Binding TableViewCell

## โชว์ชื่อรายการให้ถูกต้อง

เนื่องจากเราใช้ TableViewCell ที่เป็น Basic ใน Cell จะมี Label มาให้แล้ว 1 อัน นั่นคือที่เราเห็นคำว่า Title

เราสามารถแก้ให้แสดงข้อความจาก todo item ของเราได้โดยการ set **text property** ให้ Label โดยการแก้โค้ด **tableView(\_:cellForRowAt:)** ให้เป็นแบบนี้

{% code title="" %}

```swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "todoItemCell", for: indexPath)
    cell.textLabel?.text = todo.item(at: indexPath.row).title
    return cell
}
```

{% endcode %}

{% hint style="info" %}
indexPath จะมี property row กับ section เพื่อใช้ในการระบุตำแหน่งของ Cell และใช้ในการหาข้อมูล

TableView สามารถมีได้หลาย section แต่โดย default จะกำหนดเป็น 1 section ตัวอย่าง TableView ที่มีหลาย section ดูได้จาก แอพ contact รายชื่อผู้ติดต่อจะถูกแบ่งเป็น section ตามตัวอักษร A, B, C, ...
{% endhint %}

ลองรันใหม่ จะเห็นว่า Cell จะเปลี่ยนมาใช้ข้อความจาก todo item ได้ถูกต้อง

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJRMfj29QWKDPWeJys%2F-LfJRQ-o1oNlxrxpk1Fi%2FScreen%20Shot%202019-05-20%20at%2015.52.43.png?alt=media\&token=22f7e672-45be-4e0d-b966-9523c4611c57)

## แสดง Checkmark ให้อันที่ทำแล้วด้วย

TableViewCell ของเราจะมี accessoryType ที่เป็น checkmark ให้เราใช้ด้วย

ลองเปลี่ยน **tableView(\_:cellForRowAt:)** อีกรอบให้เป็นแบบนี้

{% code title="ViewController.swift" %}

```swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "todoItemCell", for: indexPath)
    let item = todo.item(at: indexPath.row)
    cell.textLabel?.text = item.title
    cell.accessoryType = item.isDone ? .checkmark : .none
    return cell
}
```

{% endcode %}

แล้วเพิ่มรายการที่ทำเสร็จแล้วใน viewDidLoad()

{% code title="ViewController.swift" %}

```swift
todo.add(item: TodoItem(title: "Download XCode", isDone: true))
```

{% endcode %}

เสร็จแล้วรัน จะเห็นว่ามี Checkmark ขึ้นมากับอันที่เราตั้ง isDone เป็น true แล้ว

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJRMfj29QWKDPWeJys%2F-LfJS-4O6OX39DO0Vb0w%2FScreen%20Shot%202019-05-20%20at%2015.55.23.png?alt=media\&token=8ec8cd14-da8f-4868-8cfe-8596a9ca2975)

โค้ดสุดท้ายของเราจะเป็นแบบนี้

{% code title="ViewController.swift" %}

```swift
import UIKit

class ViewController: UIViewController, UITableViewDataSource {

    var todo = Todo()

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todo.totalItems
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "todoItemCell", for: indexPath)
        let item = todo.item(at: indexPath.row)
        cell.textLabel?.text = item.title
        cell.accessoryType = item.isDone ? .checkmark : .none
        return cell
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        todo.add(item: TodoItem(title: "Download XCode", isDone: true))
        todo.add(item: TodoItem(title: "Buy milk"))
        todo.add(item: TodoItem(title: "Learning Swift"))
    }
}
```

{% endcode %}