Build Scrollable Sticky Table/Grid UIs in Jetpack Compose Like a Pro
If you’ve ever built dashboards, spreadsheets, or financial apps, you know how important tables are. But a plain table isn’t enough — you often need a Scrollable Sticky Table/Grid where headers stay in place while data scrolls smoothly.
In the past, building this in Android XML layouts was painful. With Jetpack Compose, you can achieve it with clean Kotlin code, no hacks, and full flexibility.
In this guide, we’ll walk through how to build a professional Scrollable Sticky Table/Grid in Jetpack Compose — from the basics to a fully data-driven version that adapts to any dataset.
Why Scrollable Sticky Tables Matter
A Scrollable Sticky Table/Grid is more than eye candy. It solves real usability problems:
- Sticky headers: Keep column labels visible while scrolling.
- Row headers: Let users track rows without losing context.
- Independent scrolls: Row IDs can scroll separately from the table, making it easier to navigate large datasets.
- Dynamic structure: Tables should adapt to
nrows andmcolumns—no hardcoding.
Think Google Sheets, Excel, or analytics dashboards. The same principles apply here.
A Basic Scrollable Table
Let’s start with the simplest version: rows and columns that scroll.
@Composable
fun ScrollableGridDemo() {
val rowCount = 20
val columnCount = 10
LazyColumn {
items(rowCount) { rowIndex ->
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState())
) {
repeat(columnCount) { colIndex ->
Box(
modifier = Modifier
.size(100.dp)
.border(1.dp, Color.Gray)
.padding(8.dp),
contentAlignment = Alignment.Center
) {
Text("R$rowIndex C$colIndex")
}
}
}
}
}
}This gives you a grid that scrolls vertically and horizontally. But headers vanish when you scroll.
Adding Sticky Column Headers
With stickyHeader, we can lock the top row.
@Composable
fun ScrollableStickyTable() {
val rowCount = 20
val columnCount = 10
LazyColumn {
// Sticky Header Row
stickyHeader {
Row(
modifier = Modifier
.background(Color.LightGray)
.horizontalScroll(rememberScrollState())
) {
repeat(columnCount) { colIndex ->
Box(
modifier = Modifier
.size(100.dp)
.border(1.dp, Color.Black)
.padding(8.dp),
contentAlignment = Alignment.Center
) {
Text("Header $colIndex", fontWeight = FontWeight.Bold)
}
}
}
}
// Table Rows
items(rowCount) { rowIndex ->
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState())
) {
repeat(columnCount) { colIndex ->
Box(
modifier = Modifier
.size(100.dp)
.border(1.dp, Color.Gray)
.padding(8.dp),
contentAlignment = Alignment.Center
) {
Text("R$rowIndex C$colIndex")
}
}
}
}
}
}Headers now stick to the top as you scroll.
Adding Row Headers
Sometimes you need a first column (row IDs) that doesn’t disappear when you scroll horizontally. The trick is to split the table into two sections:
- Row header column → vertical scroll only.
- Main table → vertical + horizontal scroll.
And make them sit side by side.
Making It Dynamic (n Rows, m Columns)
Hardcoding row and column counts isn’t practical. Let’s build a reusable, data-driven composable.
@Composable
fun DataDrivenStickyTable(
rowHeaders: List<String>, // Row labels
columnHeaders: List<String>, // Column labels
tableData: List<List<String>> // 2D grid of values [row][col]
) {
Row {
// Row Header Column
LazyColumn(
modifier = Modifier.width(100.dp)
) {
// Sticky Row Header Title
stickyHeader {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.DarkGray)
.border(1.dp, Color.Black),
contentAlignment = Alignment.Center
) {
Text("Row#", color = Color.White, fontWeight = FontWeight.Bold)
}
}
// Dynamic Row Headers
items(rowHeaders.size) { rowIndex ->
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.Gray)
.border(1.dp, Color.Black),
contentAlignment = Alignment.Center
) {
Text(rowHeaders[rowIndex], fontWeight = FontWeight.Medium)
}
}
}
// Main Table
LazyColumn(
modifier = Modifier.weight(1f)
) {
// Sticky Column Headers
stickyHeader {
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState())
.background(Color.LightGray)
) {
columnHeaders.forEach { header ->
Box(
modifier = Modifier
.size(width = 100.dp, height = 50.dp)
.border(1.dp, Color.Black),
contentAlignment = Alignment.Center
) {
Text(header, fontWeight = FontWeight.Bold)
}
}
}
}
// Dynamic Rows
items(rowHeaders.size) { rowIndex ->
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState())
) {
tableData[rowIndex].forEach { cell ->
Box(
modifier = Modifier
.size(width = 100.dp, height = 50.dp)
.border(1.dp, Color.LightGray),
contentAlignment = Alignment.Center
) {
Text(cell)
}
}
}
}
}
}
}You can generate as many rows and columns as you want dynamically:
@Composable
fun TableDemo() {
val rowHeaders = List(20) { "Row $it" }
val columnHeaders = List(10) { "Col $it" }
val tableData = List(rowHeaders.size) { rowIndex ->
List(columnHeaders.size) { colIndex ->
"R$rowIndex C$colIndex"
}
}
DataDrivenStickyTable(
rowHeaders = rowHeaders,
columnHeaders = columnHeaders,
tableData = tableData
)
}Now your table works with any dataset — whether it’s 5×5 or 100×100.
Check out the complete project on my GitHub repository
Performance Tips
- Use
LazyColumn+LazyRowfor large datasets—they recycle views efficiently. - If your dataset is small, you can simplify with
Column+Row. - Use
rememberLazyListState()andrememberScrollState()if you need to sync scrolling between row headers and table content.
Conclusion
With Jetpack Compose, building a Scrollable Sticky Table/Grid is no longer a headache. You can:
- Show sticky headers for both rows and columns.
- Keep row headers independent or sync them with the table.
- Dynamically generate
nrows andmcolumns from real datasets.
This approach is clean, scalable, and production-ready. The next time you need a spreadsheet-like UI, you’ll know exactly how to do it — like a pro.
