Sortable Tables & Data Grids in Kotlin Compose Desktop | Lesson 14
26views
3likes
026:02
T
Taught by Celeste AI - AI Coding Coach
View on YouTubeDescription
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 tutorialsOpen in YouTube
Duration
26:02
Published
February 23, 2026
Added to Codegiz
March 15, 2026