添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

Repository files navigation

compose table

Simple table component based on Compose.

基于 compose 实现的一个简单表格组件.

basic table 基础表格

基础的表格展示:

@OptIn(ExperimentalSerializationApi::class)
@Preview
@Composable
fun SimpleBasicTable() {
    val headers = listOf("序号", "姓名", "操作")
    val bodyData: List<Item> = DataProvider.testItems
    Box(
        Modifier
            .border(border = BorderStroke(Dp.Hairline, color = Color.LightGray))
            .padding(20.dp)
        SimpleTable(
            row = bodyData.size,
            col = headers.size,
            headerData = headers
        ) { row, col ->
            when (col) {
                0 -> Text(text = bodyData[row].id.toString(), style = MaterialTheme.typography.body1)
                1 -> Text(text = bodyData[row].name, style = MaterialTheme.typography.body1)
                2 -> Checkbox(checked = bodyData[row].isSelected, onCheckedChange = null)

stripe table 带条纹表格

使用带条纹的表格,可以容易区分不同行的数据。使用参数 stripe=true 即可。

@OptIn(ExperimentalSerializationApi::class)
@Preview
@Composable
fun SimpleBasicTable() {
    val headers = listOf("序号", "姓名", "操作")
    val bodyData: List<Item> = DataProvider.testItems
    Box(
        Modifier
            .border(border = BorderStroke(Dp.Hairline, color = Color.LightGray))
            .padding(20.dp)
        SimpleTable(
            row = bodyData.size,
            col = headers.size,
            stripe = true, // 条纹属性,默认为 false
            headerData = headers
        ) { row, col ->
            when (col) {
                0 -> Text(text = bodyData[row].id.toString(), style = MaterialTheme.typography.body1)
                1 -> Text(text = bodyData[row].name, style = MaterialTheme.typography.body1)
                2 -> Checkbox(checked = bodyData[row].isSelected, onCheckedChange = null)

border table 带边框表格

使用带边框的表格, 可以容易区分不同行、不同列的数据。使用参数 border=true 即可。

@OptIn(ExperimentalSerializationApi::class)
@Preview
@Composable
fun SimpleBasicTable() {
    val headers = listOf("序号", "姓名", "操作")
    val bodyData: List<Item> = DataProvider.testItems
    Box(
        Modifier
            .border(border = BorderStroke(Dp.Hairline, color = Color.LightGray))
            .padding(20.dp)
        SimpleTable(
            row = bodyData.size,
            col = headers.size,
            border = true, // 边框属性,默认为 false
            headerData = headers
        ) { row, col ->
            when (col) {
                0 -> Text(text = bodyData[row].id.toString(), style = MaterialTheme.typography.body1)
                1 -> Text(text = bodyData[row].name, style = MaterialTheme.typography.body1)
                2 -> Checkbox(checked = bodyData[row].isSelected, onCheckedChange = null)

fixed header table 固定表头表格

纵向内容过多时,表头是默认固定的。

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        val headers = listOf("序号", "姓名", "操作")
        val bodyData: List<Item> = DataProvider.testItems
        Box(
            Modifier
                .border(border = BorderStroke(Dp.Hairline, color = Color.LightGray))
                .padding(20.dp)
            SimpleTable(
                modifier = Modifier.height(300.dp),
                row = bodyData.size,
                col = headers.size,
                headerData = headers
            ) { row, col ->
                when (col) {
                    0 -> Text(text = bodyData[row].id.toString(), style = MaterialTheme.typography.body1)
                    1 -> Text(text = bodyData[row].name, style = MaterialTheme.typography.body1)
                    2 -> Checkbox(checked = bodyData[row].isSelected, onCheckedChange = null)

single selection 单选表格

TODO 暂时没有通过单独的属性分离单选表格某一行的效果。

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        val headers = listOf("序号", "姓名", "操作")
        val bodyData: List<Item> = DataProvider.testItems
        Box(
            Modifier
                .border(border = BorderStroke(Dp.Hairline, color = Color.LightGray))
                .padding(20.dp)
            SimpleTable(
                modifier = Modifier.height(300.dp),
                row = bodyData.size,
                col = headers.size,
                onRowSelected = { singleSelectionRowIndex, singleSelectionRowToggle ->
                    println("row-$singleSelectionRowIndex ${if (singleSelectionRowToggle) "isSelected" else "unSelected"}")
                headerData = headers
            ) { row, col ->
                when (col) {
                    0 -> Text(text = bodyData[row].id.toString(), style = MaterialTheme.typography.body1)
                    1 -> Text(text = bodyData[row].name, style = MaterialTheme.typography.body1)
                    2 -> Checkbox(checked = bodyData[row].isSelected, onCheckedChange = null)
  • Jetpack Compose Lists
  • ComposeTable
  • ComposeDataTable
  • Element UI Table
  •