A powerful, feature-rich, and customizable Data Grid component for Kotlin Compose Multiplatform.

Un7-KCMP-DataGrid is a comprehensive data grid solution designed to efficiently display and manipulate large datasets. Built on Compose Multiplatform, it runs on Android, iOS, Desktop (JVM), and Web (WasmJs).

Desktop

Web

iOS	AOS

• Multiplatform Support: Works seamlessly on Android, iOS, Desktop, and Web using Kotlin Compose Multiplatform.
• Pagination: Smoothly handles tens of thousands of data entries with horizontal paging using HorizontalPager.
• Column Sorting: Sort data in ascending, descending, or default order by clicking on column headers.
• Column Resizing: Dynamically adjust the width of each column by dragging the divider between columns.
• Column Reordering: Easily reorder columns by dragging and dropping the headers.
• Column Visibility Control: Dynamically show or hide specific columns through a floating menu.
• Sticky Header: Column headers remain fixed at the top during vertical scrolling, so you never lose context.
• Horizontal Scrolling: The page size, which displays all data on one page, is automatically added as ["All"]. Horizontal scrolling is automatically enabled when the page size is set to ["All"] Otherwise, the paging function is enabled.
• Menus & Controls:
  • Grid Control: A floating menu that includes features for column selection, showing/hiding row numbers, and navigating to the top/bottom of the list.
  • Pagination Control: Navigation controls to change page size and move to the first, previous, next, or last page.
• User Feedback: Provides intuitive feedback via a Snackbar for events like data filtering or page size changes.
• ️Deep Customization: Configure grid options like row number and column header visibility, column titles, and page size items using the Un7KCMPDataGridConfig object.
• Theming: Easily customize the colors of the header, data rows (including separate colors for odd/even rows), and content to match your app's theme.
• The currently supported column data types are List<Char?>, List<String?>, List<Byte?>, List<Short?>, List<Int?>, List<Float?>, List<Double?>, List<Long?>, List<Boolean?>, List<Any?>.
• Any Type is casting to String type and then filtered and sorted.
• Export to CSV: Effortlessly export your grid data to a CSV file. This feature is supported across all platforms (Android, iOS, Desktop, and Web) using platform-specific file saving mechanisms.

• The library uses an expect/actual function saveFile(fileName: String, content: String) to handle data exports.
• Desktop (JVM): Saves the CSV file directly to the user's local file system via a file picker or a default path.
• Web (WasmJs): Triggers a browser download of the CSV file.
• iOS: Utilizes UIActivityViewController or similar sharing mechanisms to save or share the file.
• Android: Due to Android's scoped storage and security model, the implementation is specialized. The library handles the core CSV generation, but ensure your androidMain in the application module is configured to handle file URIs or storage permissions if required by your specific implementation.

The search menu for each column supports conditional operators, allowing for more precise data filtering based on the column's data type.

Supported Data Types & Operators:

• For String, Any data:
  • Contains, Dose Not Contains, Equals, Dose Not Equals, Begins with, Ends with, Blank,Not Blank
• For Char,Byte,Short,Int, Float, Double, Long data:
  • =, !=, >, >=, <, <=
• For Boolean data:
  • Is, IsNot

Add the GitHub Packages repository to your project's settings.gradle.kts file to download the library.

// settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        // Add GitHub Packages repository
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/unchil/ComposeDataGrid")
            credentials {
                username = System.getenv("GPR_USER")
                password = System.getenv("GPR_KEY")
            }
        }
    }
}

Note: Authentication is required to access GitHub Packages. You need to set your GitHub username and a PAT (Personal Access Token) with read:packages permission in your development machine's global ~/.zshenv file.

# ~/.zshenv
GPR_USER=YOUR_GITHUB_USERNAME
GPR_KEY=YOUR_GITHUB_PAT

Add the dependency to the build.gradle.kts file of the module where you will use the library (e.g., composeApp).

// composeApp/build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            // Add Un7KCMPDataGrid library (change to the latest version)
            implementation("com.github.unchil:un7datagrid:0.2.0")
        }
    }
}

Using Un7KCMPDataGrid is very simple. Just provide the data as a Map. You can also provide an optional config object to customize its behavior.

@Composable
fun MyDataScreen() {
    // Column-oriented data map
    val myData: Map<String, List<Any?>> = mapOf(
        "ID" to listOf<Int?>(1, 2, 3, 4, 5, 6, 7, 8),
        "Product Any" to listOf<Any?>( 1234, 1234.0, 1234.0f, '1', true, 1234567890L, null, "1234"),
        "Product Char" to listOf<Char?>('K', null, 'M', 'W', 'S', 'T', 'L', 'a'),
        "Product String" to listOf<String?>("Keyboard", "Mouse", "Monitor", "Webcam", "Speaker", "Trackpad", "Luck7", ""),
        "Price Double" to listOf<Double?>(75.50, 25.00, null, 89.90, 100.0, 100.0, 100.0, 0.0 ),
        "Price Float" to listOf<Float?>(75.50f, 25.00f, null, 89.90f, 100.0f, 100.0f, 100.0f, 0.0f ),
        "In Stock" to listOf<Boolean?>(true, false, true, true, true, true, true,true)
    )

    // Configure optional grid features
    val gridConfig = Un7KCMPDataGridConfig(
        isVisibilityRowNumber = true,
        rowNumberColumnName = "No.",
        pageSizeList = listOf("10", "25", "50", "100"),
        defaultPageSizeListIndex = 2, // Initial page size will be "50"
        headerRowBackgroundColor = Color(0xFFE0E0E0),
        headerRowContentColor = Color.DarkGray,
        dataRowBackgroundColor = Color.White,
        dataRowContentColor = Color.DarkGray,
        oddDataRowBackgroundColor = Color.White,
        evenDataRowBackgroundColor = Color(0xFFF5F5F5)
    )

    Un7KCMPDataGrid(
        data = myData,
        config = gridConfig
    )
}

Exporting Data

• You can trigger the CSV export through the built-in menu in the Un7KCMPDataGrid. The library will automatically:
  • Generates a CSV format string from the initially loaded data.
  • Call the platform's native file-saving dialog.

Special Note for Android Users

class MainActivity : ComponentActivity() {
    //------------
    /**
    // 1. Pre-register ActivityResultLauncher (must be defined before onCreate)
    */
    private val saveFileLauncher = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()
    ) { result ->
        if (result.resultCode == Activity.RESULT_OK) {
            val uri = result.data?.data ?: return@registerForActivityResult
            FileSaveHandler.applicationContext?.contentResolver?.openOutputStream(uri)?.use { outputStream ->
                BufferedWriter(OutputStreamWriter(outputStream)).use { writer ->
                    writer.write(FileSaveHandler.pendingContent)
                }
            }
        }
    }
    //------------

    override fun onCreate(savedInstanceState: Bundle?) {

        //------------
        /**
        // 2. Initialize FileSaveHandler once
        */
        FileSaveHandler.initialize(this)
        //------------

        enableEdgeToEdge()
        super.onCreate(savedInstanceState)

        setContent {
            CompositionLocalProvider( LocalPlatform provides getPlatform() ){
                Column{
                    TextButton( onClick = {
                        //------------
                        /**
                        //4. Call launchSaveFileIntent
                        */
                        FileSaveHandler.intent?.let { launchSaveFileIntent(it) }
                        //------------

                    } ) {
                        Text("ExportData")
                    }
                    
                    Un7KCMPDataGrid(
                        mapOf(
                            "ID" to listOf<Int?>(1, 2, 3, 4, 5, 6, 7, 8),
                            "Product String" to listOf<String?>("Keyboard", "Mouse", "Monitor", "Webcam", "Speaker", "Trackpad", "Luck7", ""),
                            "Price Double" to listOf<Double?>(75.50, 25.00, null, 89.90, 100.0, 100.0, 100.0, 0.0 )
                        )
                    )
                }

            }
        }
    }

    //------------
    /**
     * 3. Exposes a function that runs the launcher.
     * launchSaveFileIntent(FileSaveHandler.intent)
     */
    fun launchSaveFileIntent(intent: Intent) {
        saveFileLauncher.launch(intent)
    }
    //------------
}

This data class allows you to configure various aspects of the data grid.

Un7-KCMP-DataGrid is distributed under the MIT License.