Skip to content

Repository files navigation

Compose Table

This is a Compose Multiplatform table library that supports both Material and Material3 designs.

screen

Supported Platforms

  • Android
  • Desktop
  • iOS
  • WasmJS
  • JS

Usage

Setup

Add the MavenCentral repository to your build file

repositories {
...
mavenCentral()
}

Add dependency

implementation("io.github.windedge.table:table-m2:<version>")
// or
implementation("io.github.windedge.table:table-m3:<version>")

Static Data Table

importandroidx.compose.material3.Textimportio.github.windedge.table.DataTableval data =listOf(
mapOf("Name" to "John Doe", "Age" to "30", "Email" to "john.doe@example.com"),
mapOf("Name" to "Jane Doe", "Age" to "25", "Email" to "jane.doe@example.com")
)
DataTable(
columns = {
headerBackground {
Box(modifier =Modifier.background(color =Color.LightGray))
}
column { Text("Name") }
column { Text("Age") }
column { Text("Email") }
}
) {
data.forEach { record ->
row(modifier =Modifier) {
cell { Text(record["Name"] ?:"") }
cell { Text(record["Age"] ?:"") }
cell { Text(record["Email"] ?:"") }
}
}
}

Paginated Data Table

importandroidx.compose.material3.Textimportio.github.windedge.table.m3.PaginatedDataTableimportio.github.windedge.table.rememberPaginationStateval data =List(50) {
mapOf("Column 1" to "Item $it", "Column 2" to "Item $it", "Column 3" to "Item $it")
}
val paginationState = rememberPaginationState(data.size, pageSize =5)
PaginatedDataTable(
columns = {
headerBackground {
Box(Modifier.background(colorScheme.primary))
}
column { Text("Column 1") }
column { Text("Column 2") }
column { Text("Column 3") }
},
paginationState = paginationState,
onPageChanged = {
data.chunked(it.pageSize)[it.pageIndex -1]
}
) { item:Map<String, String> ->
row(modifier =Modifier) {
cell { Text(item["Column 1"] ?:"") }
cell { Text(item["Column 2"] ?:"") }
cell { Text(item["Column 3"] ?:"") }
}
}

Table width & horizontal scrolling

DataTable, BasicPaginatedDataTable, and both Material bindings expose two optional parameters:

  • minTableWidth: Dp = 0.dp – sets a minimum width for the table so columns are not squeezed too narrow.
  • scrollable: Boolean = false – wraps the table in a horizontally scrollable container; on desktop a horizontal scrollbar is shown.

With these two parameters you can control table width and horizontal scrolling directly from the existing APIs, without any extra wrapper composables. For a complete example, see the sample app:

importandroidx.compose.foundation.layout.fillMaxWidthimportandroidx.compose.material3.Textimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.unit.dpimportio.github.windedge.table.m3.PaginatedDataTableimportio.github.windedge.table.rememberPaginationStateval paginationState = rememberPaginationState(data.size, pageSize =5)
PaginatedDataTable(
columns = {
headerBackground {
Box(Modifier.background(colorScheme.primary))
}
column { Text("Column 1") }
column { Text("Column 2") }
column { Text("Column 3") }
},
paginationState = paginationState,
onPageChanged = {
data.chunked(it.pageSize)[it.pageIndex -1]
},
modifier =Modifier.fillMaxWidth(),
minTableWidth =960.dp,
scrollable =true,
) { item:Map<String, String> ->
row {
cell { Text(item["Column 1"] ?:"") }
cell { Text(item["Column 2"] ?:"") }
cell { Text(item["Column 3"] ?:"") }
}
}

Please check the sample app for a more detailed showcase.

Version Compatibility

Below is a table showing the compatibility between Compose Table versions and the required toolchain:

Compose Table VersionKotlin VersionCompose MultiplatformAndroid Gradle Plugin
< 0.3.0older toolchainsolder toolchainsAGP 8.x and earlier
0.3.0+2.2.20+1.9.3+9.0.1+

Projects using older Kotlin or Compose versions may need to upgrade before consuming 0.3.0+. If you are on an older toolchain, use a pre-0.3.0 release instead.

Android Namespace Changes in 0.3.0+

Starting from version 0.3.0, each Android artifact has a unique namespace to support AGP 9+:

ArtifactAndroid Namespace
tableio.github.windedge.table
table-m2io.github.windedge.table.m2
table-m3io.github.windedge.table.m3

If you reference Android R classes directly, update your imports accordingly. Kotlin API usage is unaffected.

Credits

This project is inspired by compose-data-table.

License

This project is licensed under the MIT License.

About

A Multiplatform Jetpack Compose Table Component Implementation

Topics

Resources

Stars

55 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages