headless/dev.fritz2.headless.components/dataCollection

dataCollection

fun <T, C : HTMLElement> RenderContext.dataCollection(classes: String? = null, id: String? = null, scope: ScopeContext.() -> Unit = {}, tag: TagFactory<Tag<C>>, initialize: DataCollection<T, C>.() -> Unit): Tag<C>

Factory function to create a DataCollection.

API-Sketch:

dataCollection<T>() {
    val data: CollectionDataProperty<T>
    val sortBy: SimpleHandler<SortingOrder<T>?>
    val toggleSorting: SimpleHandler<Sorting<T>>
    val filterBy: SimpleHandler<((List<T>) -> List<T>)?>
    val selection: SelectionMode<T>

    fun filterByText(toString: (T) -> String) : SimpleHandler<String>

    // use multiple times
    dataCollectionSortButton(sort: Sorting<T>) {
        val direction: Flow<SortDirection>
    }

    dataCollectionItems() {
        val scrollIntoView: ScrollIntoViewProperty
        val items: Flow<List<T>>

        // items.renderEach T {
            dataCollectionItem(item: T) {
                val selected: Flow<Boolean>
                val active: Flow<Boolean>
            }
        // }
    }
}

For more information refer to the official documentation

fun <T> RenderContext.dataCollection(classes: String? = null, id: String? = null, scope: ScopeContext.() -> Unit = {}, initialize: DataCollection<T, HTMLDivElement>.() -> Unit): Tag<HTMLDivElement>

Factory function to create a DataCollection with a HTMLDivElement as default root Tag.

API-Sketch:

dataCollection<T>() {
    val data: CollectionDataProperty<T>
    val sortBy: SimpleHandler<SortingOrder<T>?>
    val toggleSorting: SimpleHandler<Sorting<T>>
    val filterBy: SimpleHandler<((List<T>) -> List<T>)?>
    val selection: SelectionMode<T>

    fun filterByText(toString: (T) -> String) : SimpleHandler<String>

    // use multiple times
    dataCollectionSortButton(sort: Sorting<T>) {
        val direction: Flow<SortDirection>
    }

    dataCollectionItems() {
        val scrollIntoView: ScrollIntoViewProperty
        val items: Flow<List<T>>

        // items.renderEach T {
            dataCollectionItem(item: T) {
                val selected: Flow<Boolean>
                val active: Flow<Boolean>
            }
        // }
    }
}

For more information refer to the official documentation