Jetpack Composeで表(Table)を作る

こんなUIを作るサンプルコードです。

@Composable
fun TableScreen() {
    Scaffold(
        backgroundColor = MaterialTheme.colors.surface,
    ) { padding ->
        val tableData = (1..100).mapIndexed { index, _ ->
            index to "Item $index"
        }
        val column1Weight = .3f // 30%
        val column2Weight = .7f // 70%

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
                .verticalScroll(rememberScrollState())
        ) {
            Row(
                modifier = Modifier.background(Color.Gray)
            ) {
                TableCell(text = "Column 1", weight = column1Weight)
                TableCell(text = "Column 2", weight = column2Weight)
            }

            tableData.map {
                val (id, text) = it
                Row(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    TableCell(text = id.toString(), weight = column1Weight)
                    TableCell(text = text, weight = column2Weight)
                }
            }
        }
    }
}

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