Kotlin with Jetpack Compose -Data Tables

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. TheInvoice 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.