Pagination Component with Page Numbers

[dsqrwym]

Hello,
I would like to ask whether it would be possible to add a pagination component that supports page numbers (e.g., <Pre, 1, ..., 5, Nex>), in addition to or instead of simple previous/next controls. This would be especially helpful for datasets with a larger number of pages, where direct navigation is important for usability.

Thank you for your time and for maintaining this project

[xelon-ua]

Thank you for your interest in the project and for the feature request!

Current Pagination Support

The table-paging module does support pagination, but uses a scroll-based approach rather than traditional page
number controls. This design choice offers several advantages:

How It Works

• Data is loaded incrementally through PagingData<T> integration
• Users navigate the dataset by scrolling through the table
• The scrollbar represents the total size of the dataset
• New pages are loaded automatically as users scroll (lazy loading)
• Load states (loading, empty, error) are handled via handleLoadState()

Advantages

1. Seamless UX: Users can navigate large datasets naturally without clicking through individual pages
2. Visual feedback: The scrollbar size accurately reflects the total amount of data available
3. Efficient: Only visible items and nearby pages are loaded into memory
4. Familiar pattern: Matches the behavior users expect from modern applications (similar to infinite scroll)

Real-World Usage

This approach is successfully used in production applications. The scroll-based pagination eliminates the need for separate pagination controls while providing efficient data loading and a smooth user experience.

Code Example

Here's how to use the table-paging module with scroll-based pagination. The module integrates with paging-kmp library for data management:

@Composable
fun PeopleTableWithPaging(
    pagingData: PagingData<Person>,
    onPersonClick: (Person) -> Unit,
) {
    // Create table state
    val tableState = rememberTableState(
        columns = PersonField.entries.toImmutableList(),
        settings = TableSettings(
            stripedRows = true,
        )
    )

    // Define columns
    val columns = tableColumns<Person, PersonField, Unit> {
        column(PersonField.Name, valueOf = { it.name }) {
            header("Name")
            cell { person, _ -> Text(person.name) }
            sortable()
        }
        column(PersonField.Age, valueOf = { it.age }) {
            header("Age")
            cell { person, _ -> Text(person.age.toString()) }
            sortable()
        }
    }

    // Scroll states for scrollbars
    val verticalState = rememberLazyListState()
    val horizontalState = rememberScrollState()

    // Render table with scrollbars
    Box {
        Table(
            items = pagingData,  // Pass PagingData directly
            state = tableState,
            columns = columns,
            onRowClick = onPersonClick,
            verticalState = verticalState,
            horizontalState = horizontalState,
        )

        // Vertical scrollbar shows total dataset size
        VerticalScrollbar(
            adapter = rememberScrollbarAdapter(verticalState),
            modifier = Modifier.align(Alignment.CenterEnd)
        )

        // Horizontal scrollbar
        HorizontalScrollbar(
            adapter = rememberScrollbarAdapter(horizontalState),
            modifier = Modifier.align(Alignment.BottomStart)
        )
    }
}

Key points:

• Pass PagingData<T> directly to the items parameter
• The scrollbar size reflects the total dataset size, not just loaded pages
• Data loads automatically as users scroll
• No separate pagination controls needed

Traditional Page Number Controls

If your use case specifically requires traditional pagination controls (e.g., < Prev | 1 ... 5 | Next >), this functionality is not currently implemented in the library.

However, we welcome community contributions! If you'd like to add a pagination UI component with page numbers, please
consider opening a Pull Request. Design considerations should include:

• The component should be optional and composable separately from the table
• It should integrate cleanly with the existing PagingData API
• Consider different layouts for various screen sizes
• Follow the Material 3 design system used throughout the library

Such a component would complement the existing scroll-based approach, giving users the choice between both navigation styles.

Summary

The table-paging module already provides pagination functionality through scroll-based navigation, which works well for most use cases. If you specifically need traditional page number controls, we encourage you to contribute this feature to the project!

Feel free to reach out if you have questions or would like to discuss the implementation details.