Kotlin Kotlin
Kotlin Kotlin MultiPlatform
Kotlin Kotlin Notebook

Un7-KCMP-DataGrid

Background Grid

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

All Platforms

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.kts
dependencyResolutionManagement {
    repositories {
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/unchil/ComposeDataGrid")
            credentials {
                username = System.getenv("GPR_USER")
                password = System.getenv("GPR_KEY")
            }
        }
    }
}
How to set GPR_USER & 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.

Composable

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
)
data

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.

modifier

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).

config

An instance of Un7KCMPDataGridConfig used to define comprehensive UI/UX behavior settings, including pagination, haptic feedback, and thematic colors.

onClick

Supports Multi-selection with Shift/Ctrl(Cmd) keys. Returns a list of all selected items.

onLongClick

Triggers range selection or custom actions on long press across platforms.

Class

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.