> For the complete documentation index, see [llms.txt](https://cognitox.gitbook.io/cognito-kmm-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cognitox.gitbook.io/cognito-kmm-docs/showing-paginated-data.md).

# Showing Paginated Data

### LazyColumnWithLoading Composable: A Reusable Component for Paginated Data

**Purpose:**

The `LazyColumnWithLoading` composable is a reusable component designed to efficiently handle paginated data within a `LazyColumn`. It automatically manages loading states, error handling, and data rendering.

**Parameters:**

* **`remoteData`:** A `RemoteData<T>` object representing the paginated data.
* **`modifier`:** A `Modifier` to apply to the surface.
* **`itemView`:** A composable function that takes an item and returns the content to be displayed.

**Functionality:**

1. **Loading State:**
   * Checks if `remoteData` is `None` (initial state or loading).
   * If `None`, displays a loading view.
2. **Error State:**
   * Checks if `remoteData` is `Some(Left(ErrMessage))`.
   * If `Left`, displays an error view.
3. **Content State:**
   * Checks if `remoteData` is `Some(Right(Page<T>))`.
   * If `Right`, renders the paginated data using a `LazyColumn`.

**Key Features:**

* **Automatic Loading:** Handles loading states and displays a loading indicator while data is being fetched.
* **Error Handling:** Displays an error message if an error occurs during data fetching.
* **Pagination:** Efficiently renders paginated data using a `LazyColumn`.
* **Customizable:** Allows you to customize the loading and error views.

**Example Usage:**

Kotlin

```kotlin
LazyColumnWithLoading(
    remoteData = todoViewModel.todos.collectAsState().value,
    itemView = { todo -> TodoItemView(todo) }
)
```

**Additional Notes:**

* The `RemoteData` type is used to represent the data, which includes the paginated data and potential errors.
* The `LazyColumn` is used to efficiently render the paginated content, avoiding unnecessary rendering of off-screen items.
* You can customize the loading and error views by providing your own composables to the `LazyColumnWithLoading` component.

By using `LazyColumnWithLoading`, you can simplify the process of handling paginated data in your KMM applications and provide a better user experience.