Kotlin with Jetpack Compose -Data Tables

Maneesha Erandi
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:


  • Create a table screen function
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.