Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sproctor/compose-data-table
An implementation of the Material Design data table for Compose.
https://github.com/sproctor/compose-data-table
compose compose-multiplatform data-table kotlin-multiplatform
Last synced: about 11 hours ago
JSON representation
An implementation of the Material Design data table for Compose.
- Host: GitHub
- URL: https://github.com/sproctor/compose-data-table
- Owner: sproctor
- License: apache-2.0
- Created: 2023-05-10T05:42:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-28T18:52:21.000Z (about 1 month ago)
- Last Synced: 2025-01-27T14:26:37.624Z (8 days ago)
- Topics: compose, compose-multiplatform, data-table, kotlin-multiplatform
- Language: Kotlin
- Homepage:
- Size: 469 KB
- Stars: 142
- Watchers: 6
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Compose Data Table
This library is an implementation of the [Material Design data table](https://m2.material.io/components/data-tables) 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.
## Getting started
Add the dependency to your gradle build file:
Non-material version:
```kotlin
implementation("com.seanproctor:data-table:")
```
Material 3:
```kotlin
implementation("com.seanproctor:data-table-material3:")
```
Draw a table
```kotlin
var selectedRow by remember { mutableStateOf(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 a paginated table
```kotlin
PaginatedDataTable(
columns = listOf(
DataColumn {
Text("Column1")
},
DataColumn {
Text("Column2")
},
DataColumn {
Text("Column3")
},
),
state = rememberPaginatedDataTableState(5),
) {
for (rowIndex in 0 until 100) {
row {
onClick = { println("Row clicked: $rowIndex") }
cell {
Text("Row $rowIndex, column 1")
}
cell {
Text("Row $rowIndex, column 2")
}
cell {
Text("Row $rowIndex, column 3")
}
}
}
}
```