# androidx.paging.compose

# androidx.paging.compose

Common/All

## Classes

|-----------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|
| [LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems) | The class responsible for accessing the data from a[Flow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html)of[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData). | Cmn |

## Extension functions summary

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|
| [LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)`<T>`                                                               | `@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable) `<T : `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`> `[Flow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html)`<`[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData)`<T>>.`[collectAsLazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/package-summary#(kotlinx.coroutines.flow.Flow).collectAsLazyPagingItems(kotlin.coroutines.CoroutineContext))`(` ` context: `[CoroutineContext](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.coroutines/-coroutine-context/index.html) `)` Collects values from this[Flow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html)of[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData)and represents them inside a[LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)instance. | Cmn |
| `(index: `[Int](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)`) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`?` | `<T : `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`> `[LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)`<T>.`[itemContentType](https://developer.android.com/reference/kotlin/androidx/paging/compose/package-summary#(androidx.paging.compose.LazyPagingItems).itemContentType(kotlin.Function1))`(contentType: ((item) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`?)?)` Returns a factory for the content type of the item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Cmn |
| `(index: `[Int](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)`) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)    | `<T : `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`> `[LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)`<T>.`[itemKey](https://developer.android.com/reference/kotlin/androidx/paging/compose/package-summary#(androidx.paging.compose.LazyPagingItems).itemKey(kotlin.Function1))`(key: ((item) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`)?)` Returns a factory of stable and unique keys representing the item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Cmn |

## Extension functions

### collectAsLazyPagingItems

Cmn  
Artifact:[androidx.paging:paging-compose](https://developer.android.com/jetpack/androidx/releases/paging)  
[View Source](https://cs.android.com/search?q=file:androidx/paging/compose/LazyPagingItems.kt+function:collectAsLazyPagingItems)  
Added in[3.2.0](https://developer.android.com/jetpack/androidx/releases/paging#3.2.0)  

```
@Composable
fun <T : Any> Flow<PagingData<T>>.collectAsLazyPagingItems(
    context: CoroutineContext = EmptyCoroutineContext
): LazyPagingItems<T>
```

Collects values from this[Flow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html)of[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData)and represents them inside a[LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)instance. The[LazyPagingItems](https://developer.android.com/reference/kotlin/androidx/paging/compose/LazyPagingItems)instance can be used for lazy foundations such as`LazyListScope.items`in order to display the data obtained from a[Flow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html)of[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData).  

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp
import androidx.paging.LoadState
import androidx.paging.Pager
import androidx.paging.PagingConfig
import androidx.paging.compose.collectAsLazyPagingItems

val myBackend = remember { TestBackend(DATA) }

val pager = remember {
    Pager(
        PagingConfig(
            pageSize = myBackend.DataBatchSize,
            enablePlaceholders = true,
            maxSize = 200,
        )
    ) {
        myBackend.getAllData()
    }
}

val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

LazyColumn {
    if (lazyPagingItems.loadState.refresh == LoadState.Loading) {
        item {
            Text(
                text = "Waiting for items to load from the backend",
                modifier =
                    Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally),
            )
        }
    }

    items(count = lazyPagingItems.itemCount) { index ->
        val item = lazyPagingItems[index]
        Text("Index=$index: $item", fontSize = 20.sp)
    }

    if (lazyPagingItems.loadState.append == LoadState.Loading) {
        item {
            CircularProgressIndicator(
                modifier =
                    Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
            )
        }
    }
}
```  

|                                                                       Parameters                                                                       |
|--------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `context: `[CoroutineContext](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.coroutines/-coroutine-context/index.html)` = EmptyCoroutineContext` | the[CoroutineContext](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.coroutines/-coroutine-context/index.html)to perform the collection of[PagingData](https://developer.android.com/reference/kotlin/androidx/paging/PagingData)and[CombinedLoadStates](https://developer.android.com/reference/kotlin/androidx/paging/CombinedLoadStates). |

### itemContentType

Cmn  
Artifact:[androidx.paging:paging-compose](https://developer.android.com/jetpack/androidx/releases/paging)  
[View Source](https://cs.android.com/search?q=file:androidx/paging/compose/LazyFoundationExtensions.kt+function:itemContentType)  

```
fun <T : Any> LazyPagingItems<T>.itemContentType(
    contentType: ((item) -> Any?)? = null
): (index: Int) -> Any?
```

Returns a factory for the content type of the item.

ContentTypes are generated with the contentType lambda that is passed in. If null is passed in, contentType of all items will default to`null`. If[PagingConfig.enablePlaceholders](https://developer.android.com/reference/kotlin/androidx/paging/PagingConfig#enablePlaceholders())is true, LazyPagingItems may return null items. Null items will automatically default to placeholder contentType.

This factory can be applied to Lazy foundations such as`LazyGridScope.items`or Pagers. Examples:  

```kotlin
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" },
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}
```  

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyColumn {
    stickyHeader(key = "Header", contentType = "My Header") {
        Box(
            modifier = Modifier.padding(bottom = 10.dp).background(Color.Red).fillMaxWidth(),
            contentAlignment = Alignment.Center,
        ) {
            Text(text = "Header", fontSize = 32.sp)
        }
    }
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" },
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}
```  

|                                                     Parameters                                                      |
|---------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `contentType: ((item) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`?)? = null` | a factory of the content types for the item. The item compositions of the same type could be reused more efficiently. Note that null is a valid type and items of such type will be considered compatible. |

### itemKey

Cmn  
Artifact:[androidx.paging:paging-compose](https://developer.android.com/jetpack/androidx/releases/paging)  
[View Source](https://cs.android.com/search?q=file:androidx/paging/compose/LazyFoundationExtensions.kt+function:itemKey)  

```
fun <T : Any> LazyPagingItems<T>.itemKey(key: ((item) -> Any)? = null): (index: Int) -> Any
```

Returns a factory of stable and unique keys representing the item.

Keys are generated with the key lambda that is passed in. If null is passed in, keys will default to a placeholder key. If[PagingConfig.enablePlaceholders](https://developer.android.com/reference/kotlin/androidx/paging/PagingConfig#enablePlaceholders())is true, LazyPagingItems may return null items. Null items will also automatically default to a placeholder key.

This factory can be applied to Lazy foundations such as compose foundation's`LazyGridScope`or Pagers. Examples:  

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.paging.Pager
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()
val pagerState = rememberPagerState { lazyPagingItems.itemCount }

HorizontalPager(
    modifier = Modifier.fillMaxSize(),
    state = pagerState,
    pageSize = PageSize.Fixed(200.dp),
    key = lazyPagingItems.itemKey { it },
) { index ->
    val item = lazyPagingItems[index]
    PagingItem(item = item)
}
```  

```kotlin
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" },
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}
```  

|                                                 Parameters                                                 |
|------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `key: ((item) `->` `[Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)`)? = null` | a factory of stable and unique keys representing the item. Using the same key for multiple items in the list is not allowed. Type of the key should be saveable via Bundle on Android. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. |