Table appears in the middle when using pinned config

[Rohit-554]

Hi, I am trying to display the pinned table and hide the pin configuration it is not visible in the screen but the table is coming in the middle of the screen

Column(
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it)
            ) {
                var settings by remember { mutableStateOf(Settings()) }

                if (itemWiseReport.isEmpty()) {
                    Text(text = "No Data Found")
                } else {
//                    Settings(
//                        settings = settings,
//                        onChange = { settings = it },
//                    )
                    LazyTable(
//                        pinConfiguration = pinConfiguration(settings),
//                        dimensions = dimensions(settings),
                        modifier = Modifier.fillMaxSize()

[oleksandrbalan]

You can try to remove .fillMaxSize() modifier from the LazyTable, then it should measure table by its content and thus align it right below other elements in Column.

[Rohit-554]

I tried but now the table won't show up, when i am using .fillMaxSize(0.8) then it shows but not the whole table

[oleksandrbalan]

Hmm, could you please share the whole screen layout? Or is your issue reproducible in the demo app?

[Rohit-554]

I have to use paging does it support if it how to do that?

[oleksandrbalan]

How the paging is related to the gap you asked before? 😅

As to the paging, no, it is not supported by default. But you could observe minaBoxState in lazytable's state to get current X and Y and use them to fetch more data to show.

[Rohit-554]

Yeah 😂, Android people always forgets Contexts (just like i have forgotten to switch the question context) , Thanks, I will try using the minaBoxState

[Rohit-554]

can you demonstrate an example for this minaboxState, as i m little confuseed

[oleksandrbalan]

Sure 👌

val columns = 10
var rows by remember { mutableStateOf(20) }
val cells = remember(rows) { createCells(columns, rows) }

// Define a threshold when the next page will be fetched
val threshold = 100.dp
val thresholdPx = with(LocalDensity.current) { threshold.roundToPx() }

// Create a state (do not forget to set it to LazyTable)
val lazyTableState = rememberLazyTableState()

// Calculate a flag which determines when user reaches a bottom (or near a bottom)
// See more here: https://medium.com/@giorgos.patronas1/endless-scrolling-in-android-with-jetpack-compose-af1f55a03d1a
val reachedBottom by remember {
    derivedStateOf {
        val translate = lazyTableState.minaBoxState.translate
        if (translate != null) {
            val offset = translate.maxY - translate.y
            offset < thresholdPx
        } else {
            false
        }
    }
}

// Observe the flag, and add more rows if needed
LaunchedEffect(reachedBottom) {
    if (reachedBottom) {
        // Add the next page of rows
        rows += 10
    }
}

Text("Total number of rows: $rows")

LazyTable(state = lazyTableState) {
    items(
        items = cells,
        layoutInfo = { LazyTableItem(it.first, it.second) }
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(MaterialTheme.colorScheme.surface)
                .border(Dp.Hairline, MaterialTheme.colorScheme.onSurface)
        ) {
            Text(text = "$it")
        }
    }
}

https://github.com/oleksandrbalan/lazytable/assets/20944869/7500ae49-261a-48d8-b6bf-a666db0e0cc3

[Rohit-554]

Thank you @oleksandrbalan 😊

[oleksandrbalan]

@Rohit-554 Hey 👋 Did you manage to solve your original issue?

[Rohit-554]

Hmm I tried, it worked but not as expected, so i quite and used webview to show the table

[sardonicus87]

Just change the modifier from ".fillMaxSize()" to ".fillMaxWidth()"