Hi, I wanted to create a scrollable (both horizont...

# compose-desktop

[Fureeish]

Hi, I wanted to create a scrollable (both horizontally and vertically) table in Compose for Desktop. Since there is no ready-to-use Composable that I am aware of, I figured that a LazyColumn of LazyRows that have their ScrollState shared would suffice. However, on my machine, this code is very buggy:

@Composable
fun TableCell(
    text: String,
) {
    Text(
        text = text,
        Modifier
            .border(1.dp, Color.Black)
            .padding(8.dp)
    )
}

@Composable
fun tableView(
    headers: List<String>,
    rows: List<List<String>>,
    padding: Dp = 16.dp,
) {
    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val draggableState = rememberDraggableState { delta ->
        coroutineScope.launch {
            scrollState.scrollBy(-delta)
        }
    }

    LazyColumn(Modifier.padding(padding)) {
        item {
            LazyRow(
                state = scrollState,
                modifier = Modifier.draggable(
                    orientation = Orientation.Horizontal,
                    state = draggableState
                )
            ) {
                for (column in headers) {
                    item {
                        TableCell(column)
                    }
                }
            }
        }
        for (row in rows) {
            item {
                LazyRow(
                    state = scrollState,
                    modifier = Modifier.draggable(
                        orientation = Orientation.Horizontal,
                        state = draggableState
                    )
                ) {
                    for (element in row) {
                        item {
                            TableCell(element)
                        }
                    }
                }
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        val oneToHundred = (0..100)
        tableView(
            oneToHundred.map(Int::toString),
            oneToHundred.map { oneToHundred.mapIndexed { i, _ -> "$i" }})
    }
}

The bug manifests itself when I try to drag over the "table". Only one of the rows gets correctly and smoothly dragged, while the rest of them stays still. This doesn't look very good. However, after scrolling vertically (sometimes I have to scroll to hide every row that was visible while I was dragging), the "table" correctly adjusts all of its rows to match the drag.

I am not yet sure if that's just my machine playing tricks on me (I have a history of my hardware handling Compose incorrectly) or if that's a solution that's hacky enough that it will not just work smoothly. Can someone please comment on the above code in terms of its correctness (both in terms of functionality and philosophy of Compose)?