> 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 ได้ถูกต้อง

![](/files/-LfJRQ-o1oNlxrxpk1Fi)

## แสดง 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 แล้ว

![](/files/-LfJS-4O6OX39DO0Vb0w)

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

{% 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 %}