Powerful Data Grid for
Compose Multiplatform
A unified data grid solution spanning Android, iOS, Desktop, and Web (Wasm).
Manage tens of thousands of data points with seamless paging, sorting, and filtering.
Multiplatform in Action
Experience powerful performance across all platforms with a single codebase.
Consolidated View
Core Features
Dynamic Controls
Supports column sorting, resizing, reordering, and visibility control.
Advanced Filtering
Features sophisticated filtering with custom operators per data type.
Intuitive UX
Provides a premium experience with haptic feedback and smart tooltips.
Get Started
1 Add GitHub Packages Repository
settings.gradle.ktsdependencyResolutionManagement {
repositories {
maven {
name = "GitHubPackages"
url = uri("https://maven.pkg.github.com/unchil/ComposeDataGrid")
credentials {
username = System.getenv("GPR_USER")
password = System.getenv("GPR_KEY")
}
}
}
}
2 Add Dependency
composeApp/build.gradle.kts (commonMain)implementation("com.github.unchil:un7datagrid:0.2.10")
API Reference
Detailed specification of the components and configuration.
Un7KCMPDataGrid
The main entry point for displaying the data grid. It automatically handles sorting, filtering, and paging based on the provided configuration.
Un7KCMPDataGrid(
data:Map<String, List<Any?>>,
modifier:Modifier,
config:Un7KCMPDataGridConfig = Un7KCMPDataGridConfig(),
onClick: ((List<Pair<Int, List<Any?>>>) -> Unit)? = null,
onLongClick: ((List<Pair<Int, List<Any?>>>) -> Unit)? = null
)
Accepts a Map<String, List<Any?>> where each Key represents a column identifier and its Value is a positional list containing the data for each row.
An instance of Modifier This is an essential API for decorating the size, layout, appearance, and behavior (click, etc.) of composables and adding functionality (augmentation).
An instance of Un7KCMPDataGridConfig used to define comprehensive UI/UX behavior settings, including pagination, haptic feedback, and thematic colors.
Supports Multi-selection with Shift/Ctrl(Cmd) keys. Returns a list of all selected items.
Triggers range selection or custom actions on long press across platforms.
Un7KCMPDataGridConfig
| Parameter | Type / Default | Description |
|---|---|---|
| isUsableHaptic | Boolean = true | Enhances user feedback by enabling subtle tactile vibrations during grid interactions. |
| isUsableTooltips | Boolean = true | Provides contextual help and guidance through smart tooltips (Requires ExperimentalMaterial3Api opt-in). |
| isVisibleRowNum | Boolean = true | Displays an automated index column on the left to help users track row positions easily. |
| rowNumColumnTitle | String = "No." | Customizes the display name of the index column header (e.g., "ID", "No", "#"). |
| pageSizeItems | List<String> = ["10", "20", "50", "100", "1000"] | Defines the available options for the number of rows displayed per page in the pagination menu. |
| pageSizeItemInitIndex | Int = pageSizeItems.lastIndex | Specify the default page size from the list above (the lastIndex corresponds to row "1000"). |
| headerRowBackgroundColor | Color = null | Styles the background of the sticky header row to match your app's theme. |
| headerRowContentColor | Color = null | Adjusts the color of titles and icons within the header for optimal contrast. |
| dataRowBackgroundColor | Color = null | Sets a uniform background color for all data cells in the grid. |
| dataRowContentColor | Color = null | Defines the primary text color for the data presented in each row. |
| oddDataRowBackgroundColor | Color = null | Enables zebra-striping by applying a specific color to odd-numbered rows for better readability. |
| evenDataRowBackgroundColor | Color = null | Styles even-numbered rows differently to create a clear visual distinction between data entries. |