Skip to content

Latest commit

 

History

History
96 lines (80 loc) · 2.07 KB

File metadata and controls

96 lines (80 loc) · 2.07 KB

Maven Central

Compose Data Table

This library is an implementation of the Material Design data table for Compose.

The original code is derived from the implementation that was removed from Compose pre-1.0. The goal is to implement the entire Material Design spec for data tables.

screenshot

Getting started

Add the dependency to your gradle build file:

Non-material version:

implementation("com.seanproctor:datatable:<VERSION>")

Material 3:

implementation("com.seanproctor:datatable-material3:<VERSION>")

Draw a table

var selectedRow by remember { mutableStateOf<Int?>(null) }
DataTable(
    columns = listOf(
        DataColumn {
            Text("Header A")
        },
        DataColumn {
            Text("Header B")
        },
        DataColumn(Alignment.CenterEnd) {
            Text("Header C")
        },
    )
) {
    row {
        onClick = { selectedRow = 0 }
        cell { Text("Cell A1") }
        cell { Text("Cell B1") }
        cell { Text("Cell C1") }
    }
    row {
        onClick = { selectedRow = 1 }
        cell { Text("Cell A2") }
        cell { Text("Cell B2") }
        cell { Text("Cell C2") }
    }
}

Draw paginated table

PaginatedDataTable(
    columns = listOf(
        DataColumn {
            Text("Column1")
        },
        DataColumn {
            Text("Column2")
        },
        DataColumn {
            Text("Column3")
        },
    ),
    state = rememberPaginatedDataTableState(
        count = 100,
        pageSize = PageSize.FillMaxHeight
    ),
) { fromIndex, toIndex ->
    for (rowIndex in fromIndex until toIndex) {
        row {
            onClick = { println("Row clicked: $rowIndex") }
            cell {
                Text("Row $rowIndex, column 1")
            }
            cell {
                Text("Row $rowIndex, column 2")
            }
            cell {
                Text("Row $rowIndex, column 3")
            }
        }
    }
}