Sortable Tables & Data Grids in Kotlin Compose Desktop | Lesson 14

26views
3likes
0
26:02
T
Taught by Celeste AI - AI Coding Coach
View on YouTube
Description
Build a full-featured data explorer with Kotlin Compose Desktop! Learn sortable column headers, column resizing with drag gestures, pagination with page size control, text search, category filtering, and CSV/JSON export — all with Material 3 dark theme. What You'll Learn: - LazyColumn with itemsIndexed for efficient scrollable data grids - Sortable column headers with SortState (ascending, descending, clear) - Column resize via pointerInput and detectDragGestures with min-width constraints - PaginationState with items-per-page dropdown and First/Prev/Next/Last navigation - Derived state chain: allProducts → filtered → sorted → paginated with remember keys - Text search across multiple fields with case-insensitive matching - Category dropdown filter with DropdownMenu - CSV export with joinToString and JSON export with kotlinx-serialization - Snackbar feedback for user actions - @Serializable data classes with kotlinx-serialization Timestamps: 0:00 - Introduction 0:15 - Preview: What We're Building 0:45 - Project Setup (Gradle, Compose, kotlinx-serialization) 2:21 - Sample Data (Product, ColumnDef, 50 Products, CSV/JSON Export) 4:47 - Data Table (Sortable Headers, Column Resize, LazyColumn) 9:07 - Pagination (PaginationState, Page Navigation, Items Per Page) 12:43 - Data Explorer (Toolbar, Search, Filter, Derived Chain) 20:41 - Main & Compile (Window Setup, bat Review, Build) 22:56 - Live Demo: Data Explorer in Action 24:03 - Recap & Key Takeaways 25:03 - Thanks for Watching Key Takeaways: 1. LazyColumn Tables — itemsIndexed with stable keys for efficient scrollable data grids 2. Sort State — Click headers to toggle ascending, descending, and clear with compareBy 3. Column Resize — pointerInput + detectDragGestures on dividers with minimum width 4. Pagination — Derive the paginated list from filtered and sorted data with page size control 5. Data Export — kotlinx-serialization for JSON, joinToString for CSV Tech Stack: Kotlin 2.1, Compose Multiplatform 1.7.3, Material3, kotlinx-serialization 1.7.3, Gradle 8.10, JVM 17+ Source Code: https://github.com/GoCelesteAI/kotlin_desktop_data_explorer Taught by CelesteAI If you found this helpful, please like and subscribe for more Kotlin Desktop tutorials! #kotlin #compose #desktop #material3 #lazycolumn #datatable #pagination #sorting #filtering #export #csv #json #tutorial #programming

Tags

kotlincompose multiplatformcompose desktopmaterial3data tabledata gridLazyColumnsortable columnscolumn resizepaginationfilteringsearchCSV exportJSON exportkotlinx serialization
Back to tutorials

Duration

26:02

Published

February 23, 2026

Added to Codegiz

March 15, 2026

Open in YouTube