Kotlin with Jetpack Compose -Data Tables
4 min readMay 25, 2023
Data tables are components that we use occasionally in mobile development. With Jetpack Compose, it's really easy to create one. Since we don’t have in-built table or table cell components, we can create our own custom components.
This article is about creating a custom data table with Jetpack Compose in Kotlin.
I will create a table with 4 columns and 5 data rows with dummy invoice data. In order to create that, we can follow the below steps:
Steps
- Create a table screen function
@Composable
fun TableScreen(
) {
//...
}
- Create a data class named Invoice and create a data list with dummy invoice data. The
Invoice
class will include an invoice reference number, date, status, and amount.
data class Invoice(val invoice: String, val date: String, val status: String, val amount: String)
val invoiceList = listOf(
Invoice("51023", "15/04/2023", "Unpaid", amount = "$2,600"),
Invoice("51024", "17/04/2023", "Pending", amount = "$900"),
Invoice("51025", "20/04/2023", "Paid", amount = "$7,560"),
Invoice("51026", "23/04/2023", "Pending", amount = "$300"),
Invoice("51027", "30/04/2023", "Paid", amount = "$5,890"),
)
- Create a
Scaffold
to make the UI.