KomposeTable 0.0.3 indexed Highly customizable table component inspired by JavaFX Table, with sorting, resizing, selection, theming, alternating row colors, hover effects, and type-safe data handling for tabular data.
Bring this to kpkg
This library is indexed from the KMP ecosystem and already resolves through kpkg.dev's Maven Central proxy. Maintainers can verify the namespace and publish future versions to kpkg for free hosting, real download stats, and signed-provenance pages.
Publishing coming soonMetadata
Owner stephenWanjala
Stars 1
Used by —
Health —
License —
Latest 0.0.3
Repository github.com/stephenWanjala/KomposeTable
Updated 2025-09-11 Readme Changelog KomposeTable
KomposeTable is a highly customizable table component with an API inspired by JavaFX Table, designed for Compose Multiplatform. It offers features like sorting, column resizing, row selection, and theming, making it ideal for displaying tabular data across different platforms.
Features
Column Sorting : Click on column headers to sort data in ascending or descending order.
Column Resizing : Easily resize columns by dragging the column dividers.
Row Selection : Support for single and multiple row selection.
Customizable Appearance : Control table and cell styling, including colors, borders, and dividers.
Alternating Row Colors : Improve readability with alternating row background colors.
Hover Effects : Provide visual feedback when hovering over rows.
Outlined Table : Option to display the table within an outlined card.
Compose Multiplatform : Designed to work seamlessly across platforms supported by Compose.
Type-Safe Data Extraction : Uses a valueExtractor lambda for efficient, reflection-free data display and sorting.
Example Usage
See sample usage in sample module
Here's an example of how to use KomposeTable to display a list of football teams:
Installation
(TODO: Add installation instructions, e.g., how to include the library in a Gradle project.)
TODO
Add a GIF or video demonstrating the features.
Add detailed installation instructions.
Add more detailed usage examples.
Add comprehensive API documentation.
data class FootballTeam (
val team: String,
val wins: Int ,
val draws: Int ,
val losses: Int ,
val gamesPlayed: Int ,
val goalsFor: Int ,
val goalsAgainst: Int ,
val goalDifference: Int ,
val points: Int ,
val position: Int ,
val xG: Double ,
val xGA: Double ,
val marketValue: Int
)
@Composable
fun FootballLeagueTableScreen () {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
val teams = listOf(
FootballTeam("Arsenal" , 25 , 10 , 3 , 38 , 78 , 28 , 50 , 85 , 1 , 58.0 , 22.0 , 88 ),
FootballTeam("Chelsea" , 24 , 11 , 3 , 38 , 75 , 30 , 45 , 83 , 2 , 57.5 , 21.5 , 85 ),
FootballTeam("Tottenham" , 23 , 12 , 3 , 38 , 72 , 35 , 37 , 81 , 3 , 55.0 , 20.0 , 82 ),
FootballTeam("West Ham" , 22 , 13 , 3 , 38 , 68 , 40 , 28 , 79 , 4 , 50.0 , 18.0 , 79 ),
FootballTeam("Leicester" , 21 , 14 , 3 , 38 , 65 , 45 , 20 , 77 , 5 , 48.5 , 17.5 , 76 ),
FootballTeam("Norwich" , 9 , 3 , 26 , 38 , 23 , 84 , -61 , 30 , 20 , 18.0 , 50.0 , 40 )
)
val selectionModel = remember { TableSelectionModel<FootballTeam>() }
val sortState = remember { mutableStateOf(SortState()) }
val columns = listOf(
TableSortColumn<FootballTeam>(
id = "team" ,
title = "Team" ,
width = 180. dp,
valueExtractor = { it.team },
cellFactory = { team ->
Text(
text = team.team,
fontWeight = FontWeight.Medium,
overflow = TextOverflow.Ellipsis,
maxLines = 1 ,
)
},
comparator = compareBy { it.team },
),
TableSortColumn<FootballTeam>(
id = "wins" ,
title = "W" ,
width = 60. dp,
valueExtractor = { it.wins.toString() },
cellFactory = { team ->
Text(
text = team.wins.toString(),
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
)
},
comparator = compareBy { it.wins },
),
TableSortColumn<FootballTeam>(
id = "draws" ,
title = "D" ,
width = 60. dp,
valueExtractor = { it.draws.toString() },
cellFactory = { team ->
Text(
text = team.draws.toString(),
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
)
},
comparator = compareBy { it.draws },
),
TableSortColumn<FootballTeam>(
id = "losses" ,
title = "L" ,
width = 60. dp,
valueExtractor = { it.losses.toString() },
cellFactory = { team ->
Text(
text = team.losses.toString(),
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
)
},
comparator = compareBy { it.losses },
),
TableSortColumn<FootballTeam>(
id = "points" ,
title = "Points" ,
width = 80. dp,
valueExtractor = { it.points.toString() },
cellFactory = { team ->
Text(
text = team.points.toString(),
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.fillMaxWidth(),
)
},
comparator = compareBy { it.points },
),
TableSortColumn<FootballTeam>(
id = "goalDifference" ,
title = "GD" ,
width = 70. dp,
valueExtractor = { if (it.goalDifference >= 0 ) "+${it.goalDifference} " else it.goalDifference.toString() },
cellFactory = { team ->
Text(
text = if (team.goalDifference >= 0 ) "+${team.goalDifference} " else team.goalDifference.toString(),
textAlign = TextAlign.Center,
color = when {
team.goalDifference > 0 -> Color(0xFF4CAF50 )
team.goalDifference < 0 -> Color(0xFFF44336 )
else -> Color.Gray
},
modifier = Modifier.fillMaxWidth(),
)
},
comparator = compareBy { it.goalDifference },
),
)
val state = rememberKomposeTableState(
columnResizeMode = ColumnResizeMode.CONSTRAINED
)
KomposeTable(
columns = columns,
tableData = teams,
selectionModel = selectionModel,
sortState = sortState,
state = state,
onRowClick = { team, index ->
println("Clicked on ${team.team} at index $index " )
},
onSelectionChange = { selectedTeams ->
println("Selected teams: ${selectedTeams.map { it.team } }" )
},
)
}
}
Related libraries Surfaced from shared tags and platforms — no rankings paid for.
compose-cupertino ★ 171
slanos Enhances the original with updated features like SwipeBox, improved Date Picker interactions, and faster automated releases. Integrates new multiplatform features efficiently. Shared: ui, design-system, compose-ui RikkaUi ★ 137
rainxchzed Beautiful production-ready UI components and theme system, over 40 customizable primitives, optional CLI copies components into source for full ownership and unlimited customization. Shared: ui, design-system, compose-ui MapComposeMP ★ 125
p-lr Facilitates efficient display of tiled maps with support for markers, paths, and gestures like flinging, dragging, scaling, and rotating. Features marker clustering and multi-layer capabilities, ensuring responsive and smooth map interactions. Shared: ui, gestures, compose-ui Kore ★ 116
dev778g-me Design foundation offering beautifully pre-styled components, theming primitives and reusable building blocks to craft scalable, consistent design systems for rapid UI development. Shared: ui, design-system, compose-ui compose-macos-theme ★ 279
chozzle Create native-looking UIs for Mac using Compose UI, with the ability to share UI code across multiple platforms. Includes components like search fields, text fields, checkboxes, and more. Shared: ui, design-system, compose-ui LazyCardStack ★ 92
Hukumister Provides a Tinder-like card stack interface with a LazyColumn-like API, supporting swipe gestures, advanced animations, and programmatic card swiping. Includes callback for swipe detection and method to return previous cards. Shared: ui, gestures, compose-ui