Compose-table is a funny compose project to display multiple rows and columns.

Overview

Readme

Compose-table is a funny compose project to display multiple rows and columns. You can scroll in any direction ( vertically and horizontally)

Since the official compose doesn't support scroll in any directions. We can use this model to display all kinds of data.

Table of content

  • How to use
    • [Initial demo table](#Initial demo table)
    • [Initial data with database.](#Initial data with database.)
  • Samples

how-to-use

Initial demo table

demo
SimpleTable(
        modifier = Modifier
    ) {
        val list = (0 until 200).map { "$it" }.toList()
        val header = (0 until 10).map { "Header:$it" }.toList()
        header(header) { item, column ->
            Text(
                text = item,
                modifier = Modifier
                    .background(color = Color.Gray)
                    .padding(16.dp),
                color = Color.Black,
                fontSize = 24.sp
            )
        }
        items(list) { item, row, column ->
            Text(
                "Item[$row:$column]",
                modifier = Modifier.padding(12.dp),
                fontSize = 16.sp
            )
        }
    }

Initial data with database.

database

@Composable
fun DatabaseTable(cursor: Cursor?) {
    if (null == cursor) return
    var selectedRow by remember {
        mutableStateOf(-1)
    }
    SimpleTable<String>{
        header(cursor.columnNames.toList()) { item, _ ->
            Text(
                text = item,
                modifier = Modifier
                    .background(color = Color.White)
                    .padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
                color = Color.Black,
                fontSize = 24.sp
            )
        }
        items(cursor.count) { row, column ->
            cursor.moveToPosition(row)
            val item = cursor.getString(column)
            Box(
                modifier = Modifier
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = {
                                selectedRow = row
                            }
                        )
                    }
                    .background(
                        if (selectedRow == row) Color.Cyan else
                            if (0 == row % 2) Color.White else Color.LightGray
                    )
                    .border(width = 0.5.dp, color = Color.Gray)
                    .padding(top = 8.dp, bottom = 8.dp)
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = item,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.align(Alignment.CenterStart),
                    fontSize = 16.sp
                )
            }
        }
    }
}

Samples

You might also like...
πŸš€ Android project template with Compose, MVVM, Hilt and Navigation
πŸš€ Android project template with Compose, MVVM, Hilt and Navigation

compose-android-template An Android project template with MVVM, Hilt, Navigation and Compose ✍️ Author πŸ‘€ theapache64 Twitter: @theapache64 Email: the

GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform project
GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform project

MortyComposeKMM Kotlin Multiplatform sample that demonstrates use of GraphQL + Jetpack Compose and SwiftUI

A compose desktop project template with MVVM, Dagger, Decompose and more
A compose desktop project template with MVVM, Dagger, Decompose and more

compose-desktop-template A compose desktop project template with MVVM, Dagger, D

A sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Retrofit, Moshi, Leak Canary and Repository pattern

Jetpack-Compose-Boilerplate This repository contains a sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Re

JetMovies - built this project with Jetpack Compose and TheMovieDb API
JetMovies - built this project with Jetpack Compose and TheMovieDb API

JetMovies I built this project with Jetpack Compose and TheMovieDb API. Used: Jetpack Compose Coroutines, Flow, State Flow ViewModel Constraint Layout

Sample project to demonstrate how to have clear and better interactions between composables and viewmodels.

Form Validation Sample project to demonstrate how to have clear and better interactions between composables and viewmodels. Concepts used uiState conc

A hackathon project for a UI sketch designer made in Compose

compose-drag-n-design A hackathon project for a UI sketch designer made in Compose. This is a project to get more familiarized with Jetpack Compose. I

An MVI project setup using Jetpack compose. This would be a good place to start learning Model View Intent (MVI) architecture for Android.
An MVI project setup using Jetpack compose. This would be a good place to start learning Model View Intent (MVI) architecture for Android.

Compose-MVI An MVI project setup using Jetpack compose. This would be a good place to start learning Model View Intent (MVI) architecture for Android.

Small Android project demonstrating some navigation components for Jetpack Compose.
Small Android project demonstrating some navigation components for Jetpack Compose.

Small Android project demonstrating some navigation components for Jetpack Compose. Created this for presenting about this topic for a GDG meetup.

Owner
Jack Chen
Jack Chen
Carol 12 Sep 25, 2022
πŸ‚ Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.

Landscapist ?? Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, Fresco Usecase You can see the use

Jaewoong Eum 1.4k Jan 1, 2023
Burak AkgΓΌn 84 Oct 30, 2022
A 7 and 14 segment display for Android built with Jetpack Compose

SegmentedDisplay A 7-segment and 14-segment display for Android build with Jetpack Compose Customizable Highly customisable. Hook up to a data stream

Rab Ross 5 May 23, 2022
ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

Orlando Novas Rodriguez 24 Nov 18, 2022
πŸš€πŸŒ†πŸ™ Display differences or animate progress between 2 images or Composables with overlay and customization options, zoom, pan gestures, and progress to observe properties for animating before-after progress

Compose Before-After Composables to display Images, or Composables as before and after composables to display differences or animate progress between

Smart Tool Factory 56 Dec 22, 2022
A simple tool to display a text tree with Jetpack Compose🌲

A simple tool to display a text tree with Jetpack Compose??

Takahiro Menju 50 Oct 5, 2022
Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Denis Rudenko 59 Dec 14, 2022
πŸ“± WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.

This is a WhatsApp clone app built with Jetpack Compose and Stream Chat SDK for Compose. The purpose of this repository is to demonstrate below: Imple

Stream 689 Dec 25, 2022
πŸ’» A Compose Desktop project template with MVVM, Dagger, Decompose, tests, and more...

compose-desktop-template A compose desktop project template with MVVM, Dagger, Decompose and more ✨ Demo What's included? Architecture (MVVM) with And

theapache64 73 Dec 21, 2022