Readme
Compose-table is a funny compose project to display multiple rows and columns. You can scroll in any direction ( vertically and horizontally)
Since the official compose doesn't support scroll in any directions. We can use this model to display all kinds of data.
Table of content
- How to use
- [Initial demo table](#Initial demo table)
- [Initial data with database.](#Initial data with database.)
- Samples
how-to-use
Initial demo table
demo
SimpleTable(
modifier = Modifier
) {
val list = (0 until 200).map { "$it" }.toList()
val header = (0 until 10).map { "Header:$it" }.toList()
header(header) { item, column ->
Text(
text = item,
modifier = Modifier
.background(color = Color.Gray)
.padding(16.dp),
color = Color.Black,
fontSize = 24.sp
)
}
items(list) { item, row, column ->
Text(
"Item[$row:$column]",
modifier = Modifier.padding(12.dp),
fontSize = 16.sp
)
}
}
Initial data with database.
database
@Composable
fun DatabaseTable(cursor: Cursor?) {
if (null == cursor) return
var selectedRow by remember {
mutableStateOf(-1)
}
SimpleTable<String>{
header(cursor.columnNames.toList()) { item, _ ->
Text(
text = item,
modifier = Modifier
.background(color = Color.White)
.padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
color = Color.Black,
fontSize = 24.sp
)
}
items(cursor.count) { row, column ->
cursor.moveToPosition(row)
val item = cursor.getString(column)
Box(
modifier = Modifier
.pointerInput(Unit) {
detectTapGestures(
onTap = {
selectedRow = row
}
)
}
.background(
if (selectedRow == row) Color.Cyan else
if (0 == row % 2) Color.White else Color.LightGray
)
.border(width = 0.5.dp, color = Color.Gray)
.padding(top = 8.dp, bottom = 8.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
Text(
text = item,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.align(Alignment.CenterStart),
fontSize = 16.sp
)
}
}
}
}