sproctor / compose-data-table Goto Github PK

View Code? Open in Web Editor NEW

96.0 6.0 13.0 372 KB

An implementation of the Material Design data table for Compose.

License: Apache License 2.0

Kotlin 100.00%

compose compose-multiplatform data-table kotlin-multiplatform

compose-data-table's Introduction

Compose Data Table

This library is an implementation of the Material Design data table for Compose.

The original code is derived from the implementation that was removed from Compose pre-1.0. The goal is to implement the entire Material Design spec for data tables.

Getting started

Add the dependency to your gradle build file:

Non-material version:

implementation("com.seanproctor:data-table:<VERSION>")

Material 3:

implementation("com.seanproctor:data-table-material3:<VERSION>")

Draw a table

var selectedRow by remember { mutableStateOf<Int?>(null) }
DataTable(
    columns = listOf(
        DataColumn {
            Text("Header A")
        },
        DataColumn {
            Text("Header B")
        },
        DataColumn(Alignment.CenterEnd) {
            Text("Header C")
        },
    )
) {
    row {
        onClick = { selectedRow = 0 }
        cell { Text("Cell A1") }
        cell { Text("Cell B1") }
        cell { Text("Cell C1") }
    }
    row {
        onClick = { selectedRow = 1 }
        cell { Text("Cell A2") }
        cell { Text("Cell B2") }
        cell { Text("Cell C2") }
    }
}

Draw a paginated table

PaginatedDataTable(
    columns = listOf(
        DataColumn {
            Text("Column1")
        },
        DataColumn {
            Text("Column2")
        },
        DataColumn {
            Text("Column3")
        },
    ),
    state = rememberPaginatedDataTableState(5),
) {
    for (rowIndex in 0 until 100) {
        row {
            onClick = { println("Row clicked: $rowIndex") }
            cell {
                Text("Row $rowIndex, column 1")
            }
            cell {
                Text("Row $rowIndex, column 2")
            }
            cell {
                Text("Row $rowIndex, column 3")
            }
        }
    }
}

compose-data-table's People

Contributors

Stargazers

Watchers

Forkers

cybernetics szsoftware helloyu vistar1986 norsion jparrgam saaric thelonewollf cplaiz mvodeveloper dosier gzehua petervelosy

compose-data-table's Issues

Dynamic page size

There should be a way to make page size dynamic (so that it fills however much space it is given).

Unfortunately, the first parameter of rememberPaginatedDataTableState does not seem to be an "initial page size" (even though it is called so), but a "fixed page size" at the moment, as the page size neither shrinks nor expands according to the available space.

Crashes when row is empty

I have a model that represents my data table, however I get a crash when I attempt to use it. This first example, where I loop through the rows, passes

    DataTable(
        columns = headers,
        modifier = Modifier.fillMaxWidth()
    ) {
        table.rows.forEach { row ->
            row {
                cell { Text("A") }
                cell { Text("B") }
                cell { Text("C") }
                cell { Text("D") }
            }
        }
    }

However, if I then loop through the cells, I get an error

    DataTable(
        columns = headers,
        modifier = Modifier.fillMaxWidth()
    ) {
        table.rows.forEach { row ->
            row {
                row.cells.forEach { cell ->
                    cell { Text("A") }
                }
            }
        }
    }

Exception in thread "AWT-EventQueue-0" java.lang.ArrayIndexOutOfBoundsException: Index 5 out of bounds for length 5
	at com.seanproctor.datatable.BasicDataTableKt$BasicDataTable$1.measure-3p2s80s(BasicDataTable.kt:220)
	at androidx.compose.ui.layout.MultiContentMeasurePolicyKt$createMeasurePolicy$1$1.measure-3p2s80s(MultiContentMeasurePolicy.kt:206)
	at androidx.compose.ui.node.InnerNodeCoordinator.measure-BRTryo0(InnerNodeCoordinator.kt:103)
	at androidx.compose.foundation.layout.FillModifier.measure-3p2s80s(Size.kt:658)
	at androidx.compose.ui.node.BackwardsCompatNode.measure-3p2s80s(BackwardsCompatNode.kt:323)
	at androidx.compose.ui.node.LayoutModifierNodeCoordinator.measure-BRTryo0(LayoutModifierNodeCoordinator.kt:155)

The model is pretty simple, its just

Table(headers: List<DataColumn>, rows: List<Cell>) where Cell is a wrapper around a string

Allow lazy fetching in PaginatedDataTable

When using a PaginatedDataTable, it should be possible to fetch the contents of one page only at a time.

Material 3 version

Currently using M2-specific style. Factor out common usage and build M2 and M3 components

Possibility to have modifier at row and cell level

Hi,
great work porting the data-table, I had some hack before, but this implementation works well.

Just a feature nice to have and is to have modifiers at row or cell level, so for example is possible to add event on click of the row.

In any case this library already simplify a lot my life.

Option make the header row sticky

It seems that there is no such parameter.

It does not scroll !!!

Pagination count is wrong

Hey, I just imported the project and have still a hustle with the multiplatform thing.

Can't provide a patch but a quick shot:

val scope = PaginatedRowScope(start, start + state.pageSize, this)

should rather be

val scope = PaginatedRowScope(start, start + state.pageSize -1, this)

or something like that.

Allow scrolling horizontally

Can the table be scrolled horizontally?

Add compose multiplatform support

Should be pretty simple, mostly gradle changes.

Scroll state is not reset when changing page

When you scroll down on one page and change page using the controls on the bottom, the scroll state is not reset.
This can cause the second page to look seemingly empty, whereas in reality, the items on it are located under the header and can be revealed using a scroll down gesture.

Sort rows by column

I'm thinking to add a sortable flag to the column definition, and sortedBy and onSortClicked parameters and leave it to the user to supply the data sorted.

Please align maven repository version with your current release cycle

Hi there,

thanks for your efforts. I have a similar project in my drawer and where already deep in measurables, lazyColumn, sortable, etc.
As far as you keep developing so clean and steady, I'm gonna drop my project and rather contribute to yours.

But back to topic:

implementation("com.seanproctor:datatable:0.4.0"): Failed to resolve.

I'm looking forward, and many thanks in advance,

Sven

Selectable rows

The M2 spec describes how selected rows should be displayed.

https://m2.material.io/components/data-tables#anatomy

Support for wasmJs & ios targets

Hi Sean,
I started using your library in my app. And I must say it is great!!

The only thing I am really missing currently is the wasmJs and ios* targets.

Looking at your build files and version catalogue, I see nothing that would prevent it.
Could you please add those targets?

Lazy loading

I'm going to use this issue to form a bit of a strategy on implementing lazy loading.

There are a few different aspects that can improve performance here:

Avoid loading rows that are off the screen. This is a bit problematic as it means that we can't measure the cells. My idea is to have column widths that can be implemented without measurement and a flag passed to Table or different function to enable lazy loading and disable measuring every cell that will raise an exception if a column width that requires measuring is used.
Avoid rendering off-screen rows. Simple, can be done ASAP, not sure how much benefit it will be.
Pagination. Requires an expansion of the API. Every cell of the page could be measured relatively cheaply. If columns can change widths between pages.

Remove logging

Great stuff!

May I suggest removing logging from LayoutMeasurePolicy in Table.kt?

DSL row accept non-composable lambda - remember can't be use inside a row content

I have similar code and I can't use remember inside row, it seems to me that this is something that was not noticed, because at first glance it is easy to fix by adding the @composable annotation to the field declaration
DataTableScopeImpl.tableRows
val tableRows = mutableListOf<@Composable TableRowScope.() -> Unit>()

update the signature of the interface TableRowScope

    val content: List<Pair<String, BigDecimal>> = listOf()

    DataTable(
        columns = listOf(
            DataColumn { Text("Gun name") },
            DataColumn { Text("Damage") },
            DataColumn { Text("Damage on distance") },
            DataColumn { Text("Distance (m)") },
        )
    ) {
        content.forEach { (gunName, damage) ->
            row {
                val distance by remember { mutableStateOf(BigDecimal.valueOf(100)) } // compiler error: @Composable invocations can only happen from the context of a @Composable function
                cell { Text(gunName) }
                cell { Text(damage.toString()) }
                cell { Text(calcDamageOnDistance(damage, distance).toString()) } // damage on distance
                cell { OnlyNumberTextField(100) { newDistance -> distance = newDistance } }
            }
        }
    }

I'm a new in Kotlin Compose (but not new in Kotlin in general) maybe I need to use another beautiful way, IDK

The problem
I have table with 1 mutable column and then value in cell mutate I need mutate another value in same row