[{"data":1,"prerenderedAt":774},["ShallowReactive",2],{"navigation_docs":3,"-quick-start-setup-and-usage":29,"-quick-start-setup-and-usage-surround":771},[4,20],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Quick Start",false,"\u002Fquick-start","1.quick-start",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fquick-start\u002Finstallation","1.quick-start\u002Finstallation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Setup and Usage","\u002Fquick-start\u002Fsetup-and-usage","1.quick-start\u002Fsetup-and-usage","i-lucide-folder-tree",{"title":21,"icon":6,"path":22,"stem":23,"children":24,"page":6},"Basic Overview","\u002Fbasic-overview","basic-overview",[25],{"title":26,"path":27,"stem":28},"Pageable Strategies","\u002Fbasic-overview\u002Fpageable-strategies","basic-overview\u002Fpageable-strategies",{"id":30,"title":16,"body":31,"description":60,"extension":764,"links":765,"meta":766,"navigation":767,"path":17,"seo":768,"stem":18,"__hash__":770},"docs\u002F1.quick-start\u002Fsetup-and-usage.md",{"type":32,"value":33,"toc":752},"minimark",[34,39,421,425,748],[35,36,38],"h2",{"id":37},"basically","Basically",[40,41,42,47,124,128,191,199,343,347,411],"steps",{},[43,44,46],"h3",{"id":45},"define-your-ui-data","Define your UI data",[48,49,50,54],"collapsible",{},[51,52,53],"tip",{},"All items should have an identificator",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-kotlin shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","data class YourData( \u002F\u002F public ui data structure\n    val id: String,\n    val data: Something\n)\n","kotlin","",[62,63,64,89,104,118],"code",{"__ignoreMap":60},[65,66,69,73,77,81,85],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"spNyl","data",[65,74,76],{"class":75},"sMK4o"," class",[65,78,80],{"class":79},"sBMFI"," YourData",[65,82,84],{"class":83},"sTEyZ","( ",[65,86,88],{"class":87},"sHwdD","\u002F\u002F public ui data structure\n",[65,90,92,95,98,101],{"class":67,"line":91},2,[65,93,94],{"class":75},"    val",[65,96,97],{"class":83}," id: ",[65,99,100],{"class":79},"String",[65,102,103],{"class":83},",\n",[65,105,107,109,112,115],{"class":67,"line":106},3,[65,108,94],{"class":75},[65,110,111],{"class":71}," data",[65,113,114],{"class":83},": ",[65,116,117],{"class":79},"Something\n",[65,119,121],{"class":67,"line":120},4,[65,122,123],{"class":83},")\n",[43,125,127],{"id":126},"define-your-source-design-its-requirements","Define your source, design its requirements",[48,129,130],{},[55,131,133],{"className":57,"code":132,"language":59,"meta":60,"style":60},"\u002F\u002F this is a source that only allows to retrieve pages by index\ninterface YourSource {\n    fun getPage(pageIndex: Int): Flow\u003CList\u003CYourData>>\n}\n",[62,134,135,140,151,186],{"__ignoreMap":60},[65,136,137],{"class":67,"line":68},[65,138,139],{"class":87},"\u002F\u002F this is a source that only allows to retrieve pages by index\n",[65,141,142,145,148],{"class":67,"line":91},[65,143,144],{"class":75},"interface",[65,146,147],{"class":79}," YourSource",[65,149,150],{"class":83}," {\n",[65,152,153,156,160,163,166,169,172,175,178,180,183],{"class":67,"line":106},[65,154,155],{"class":75},"    fun",[65,157,159],{"class":158},"s2Zo4"," getPage",[65,161,162],{"class":83},"(pageIndex: ",[65,164,165],{"class":79},"Int",[65,167,168],{"class":83},"): ",[65,170,171],{"class":79},"Flow",[65,173,174],{"class":83},"\u003C",[65,176,177],{"class":79},"List",[65,179,174],{"class":83},[65,181,182],{"class":79},"YourData",[65,184,185],{"class":83},">>\n",[65,187,188],{"class":67,"line":120},[65,189,190],{"class":83},"}\n",[43,192,194,195,198],{"id":193},"use-the-source-definition-in-pageable-in-your-view-model","Use the source definition in ",[62,196,197],{},"pageable"," in your view model",[48,200,201],{},[55,202,204],{"className":57,"code":203,"language":59,"meta":60,"style":60},"\u002F\u002F the source will be implemented by some part of your code that\n\u002F\u002F knows about the actual data source\nclass YourModel(source: YourSource, coroutineScope: CoroutineScope) {  \n    val yourPageableageable = pageable(\n        coroutineScope,\n        onPage = { index -> source.getPage(index) },\n        strategy = prefetchPageAmount( \u002F\u002F one of the default strategies\n            initialPage = 0, \n            pageAmountSurroundingVisible = 2\n        )\n    )\n}\n",[62,205,206,211,216,239,255,261,284,300,315,326,332,338],{"__ignoreMap":60},[65,207,208],{"class":67,"line":68},[65,209,210],{"class":87},"\u002F\u002F the source will be implemented by some part of your code that\n",[65,212,213],{"class":67,"line":91},[65,214,215],{"class":87},"\u002F\u002F knows about the actual data source\n",[65,217,218,221,224,227,230,233,236],{"class":67,"line":106},[65,219,220],{"class":75},"class",[65,222,223],{"class":79}," YourModel",[65,225,226],{"class":83},"(source: ",[65,228,229],{"class":79},"YourSource",[65,231,232],{"class":83},", coroutineScope: ",[65,234,235],{"class":79},"CoroutineScope",[65,237,238],{"class":83},") {  \n",[65,240,241,243,246,249,252],{"class":67,"line":120},[65,242,94],{"class":75},[65,244,245],{"class":83}," yourPageableageable ",[65,247,248],{"class":75},"=",[65,250,251],{"class":158}," pageable",[65,253,254],{"class":83},"(\n",[65,256,258],{"class":67,"line":257},5,[65,259,260],{"class":83},"        coroutineScope,\n",[65,262,264,267,269,272,275,278,281],{"class":67,"line":263},6,[65,265,266],{"class":83},"        onPage ",[65,268,248],{"class":75},[65,270,271],{"class":83}," { index ",[65,273,274],{"class":71},"->",[65,276,277],{"class":83}," source.",[65,279,280],{"class":158},"getPage",[65,282,283],{"class":83},"(index) },\n",[65,285,287,290,292,295,297],{"class":67,"line":286},7,[65,288,289],{"class":83},"        strategy ",[65,291,248],{"class":75},[65,293,294],{"class":158}," prefetchPageAmount",[65,296,84],{"class":83},[65,298,299],{"class":87},"\u002F\u002F one of the default strategies\n",[65,301,303,306,308,312],{"class":67,"line":302},8,[65,304,305],{"class":83},"            initialPage ",[65,307,248],{"class":75},[65,309,311],{"class":310},"sbssI"," 0",[65,313,314],{"class":83},", \n",[65,316,318,321,323],{"class":67,"line":317},9,[65,319,320],{"class":83},"            pageAmountSurroundingVisible ",[65,322,248],{"class":75},[65,324,325],{"class":310}," 2\n",[65,327,329],{"class":67,"line":328},10,[65,330,331],{"class":83},"        )\n",[65,333,335],{"class":67,"line":334},11,[65,336,337],{"class":83},"    )\n",[65,339,341],{"class":67,"line":340},12,[65,342,190],{"class":83},[43,344,346],{"id":345},"convert-the-pageable-to-usable-state-in-your-ui","Convert the pageable to usable state in your UI",[48,348,349],{},[55,350,352],{"className":57,"code":351,"language":59,"meta":60,"style":60},"val lazyListState = rememberLazyListState()\nval pageableState = yourModel.pageable.toState(\n    lazyListState,\n    key = { item -> item.id }\n)\n",[62,353,354,370,387,392,407],{"__ignoreMap":60},[65,355,356,359,362,364,367],{"class":67,"line":68},[65,357,358],{"class":75},"val",[65,360,361],{"class":83}," lazyListState ",[65,363,248],{"class":75},[65,365,366],{"class":158}," rememberLazyListState",[65,368,369],{"class":83},"()\n",[65,371,372,374,377,379,382,385],{"class":67,"line":91},[65,373,358],{"class":75},[65,375,376],{"class":83}," pageableState ",[65,378,248],{"class":75},[65,380,381],{"class":83}," yourModel.pageable.",[65,383,384],{"class":158},"toState",[65,386,254],{"class":83},[65,388,389],{"class":67,"line":106},[65,390,391],{"class":83},"    lazyListState,\n",[65,393,394,397,399,402,404],{"class":67,"line":120},[65,395,396],{"class":83},"    key ",[65,398,248],{"class":75},[65,400,401],{"class":83}," { item ",[65,403,274],{"class":71},[65,405,406],{"class":83}," item.id }\n",[65,408,409],{"class":67,"line":257},[65,410,123],{"class":83},[43,412,414,415,417,418],{"id":413},"optionally-configure-the-strategy-for-pageable-see-pageable-strategies","Optionally configure the strategy for ",[62,416,197],{},". See ",[419,420,26],"a",{"href":27},[35,422,424],{"id":423},"example-structure","Example Structure",[426,427,429,508,614],"code-tree",{"default-value":428},"yourFeature\u002FYourModel.kt",[55,430,433],{"className":57,"code":431,"filename":432,"language":59,"meta":60,"style":60},"data class YourData(val id: String, val data: Something)\n\ninterface YourSource {\n    fun getPage(pageIndex: Int): Flow\u003CList\u003CYourData>>\n}\n","yourFeature\u002FYourSource.kt",[62,434,435,466,472,480,504],{"__ignoreMap":60},[65,436,437,439,441,443,446,448,450,452,455,457,459,461,464],{"class":67,"line":68},[65,438,72],{"class":71},[65,440,76],{"class":75},[65,442,80],{"class":79},[65,444,445],{"class":83},"(",[65,447,358],{"class":75},[65,449,97],{"class":83},[65,451,100],{"class":79},[65,453,454],{"class":83},", ",[65,456,358],{"class":75},[65,458,111],{"class":71},[65,460,114],{"class":83},[65,462,463],{"class":79},"Something",[65,465,123],{"class":83},[65,467,468],{"class":67,"line":91},[65,469,471],{"emptyLinePlaceholder":470},true,"\n",[65,473,474,476,478],{"class":67,"line":106},[65,475,144],{"class":75},[65,477,147],{"class":79},[65,479,150],{"class":83},[65,481,482,484,486,488,490,492,494,496,498,500,502],{"class":67,"line":120},[65,483,155],{"class":75},[65,485,159],{"class":158},[65,487,162],{"class":83},[65,489,165],{"class":79},[65,491,168],{"class":83},[65,493,171],{"class":79},[65,495,174],{"class":83},[65,497,177],{"class":79},[65,499,174],{"class":83},[65,501,182],{"class":79},[65,503,185],{"class":83},[65,505,506],{"class":67,"line":257},[65,507,190],{"class":83},[55,509,511],{"className":57,"code":510,"filename":428,"language":59,"meta":60,"style":60},"class YourModel(source: YourSource, coroutineScope: CoroutineScope) {\n    \u002F\u002F the default startegies use Int as page key\u002Findex,\n    \u002F\u002F but any page key type you want is possible   \n    val yourPageableageable = pageable(\n        coroutineScope,\n        onPage = { index -> source.getPage(index) },\n        strategy = prefetchPageAmount( \u002F\u002F one of the default strategies\n            initialPage = 0, \n            pageAmountSurroundingVisible = 2\n        )\n    )\n}\n",[62,512,513,530,535,540,552,556,572,584,594,602,606,610],{"__ignoreMap":60},[65,514,515,517,519,521,523,525,527],{"class":67,"line":68},[65,516,220],{"class":75},[65,518,223],{"class":79},[65,520,226],{"class":83},[65,522,229],{"class":79},[65,524,232],{"class":83},[65,526,235],{"class":79},[65,528,529],{"class":83},") {\n",[65,531,532],{"class":67,"line":91},[65,533,534],{"class":87},"    \u002F\u002F the default startegies use Int as page key\u002Findex,\n",[65,536,537],{"class":67,"line":106},[65,538,539],{"class":87},"    \u002F\u002F but any page key type you want is possible   \n",[65,541,542,544,546,548,550],{"class":67,"line":120},[65,543,94],{"class":75},[65,545,245],{"class":83},[65,547,248],{"class":75},[65,549,251],{"class":158},[65,551,254],{"class":83},[65,553,554],{"class":67,"line":257},[65,555,260],{"class":83},[65,557,558,560,562,564,566,568,570],{"class":67,"line":263},[65,559,266],{"class":83},[65,561,248],{"class":75},[65,563,271],{"class":83},[65,565,274],{"class":71},[65,567,277],{"class":83},[65,569,280],{"class":158},[65,571,283],{"class":83},[65,573,574,576,578,580,582],{"class":67,"line":286},[65,575,289],{"class":83},[65,577,248],{"class":75},[65,579,294],{"class":158},[65,581,84],{"class":83},[65,583,299],{"class":87},[65,585,586,588,590,592],{"class":67,"line":302},[65,587,305],{"class":83},[65,589,248],{"class":75},[65,591,311],{"class":310},[65,593,314],{"class":83},[65,595,596,598,600],{"class":67,"line":317},[65,597,320],{"class":83},[65,599,248],{"class":75},[65,601,325],{"class":310},[65,603,604],{"class":67,"line":328},[65,605,331],{"class":83},[65,607,608],{"class":67,"line":334},[65,609,337],{"class":83},[65,611,612],{"class":67,"line":340},[65,613,190],{"class":83},[55,615,618],{"className":57,"code":616,"filename":617,"language":59,"meta":60,"style":60},"@Composable\nfun YourScreen(model: PaginationModel) {\n    val lazyListState = rememberLazyListState()\n    val pageableState = yourModel.pageable.toState(\n        lazyListState, \u002F\u002F will be observed for automatic pageable state updates\n        key = { item -> item.id }\n    )\n\n    LazyColumn(lazyListState) { \u002F\u002F dont forget to use the state\n        \u002F\u002F this is an overload that automatically uses the key lambda from `.toState` above\n        items(pageableState) { item ->\n            YourItem(item)\n        }\n    }\n}\n","yourFeature\u002FYourScreen.kt",[62,619,620,625,641,653,667,675,688,692,696,707,712,723,731,737,743],{"__ignoreMap":60},[65,621,622],{"class":67,"line":68},[65,623,624],{"class":79},"@Composable\n",[65,626,627,630,633,636,639],{"class":67,"line":91},[65,628,629],{"class":75},"fun",[65,631,632],{"class":158}," YourScreen",[65,634,635],{"class":83},"(model: ",[65,637,638],{"class":79},"PaginationModel",[65,640,529],{"class":83},[65,642,643,645,647,649,651],{"class":67,"line":106},[65,644,94],{"class":75},[65,646,361],{"class":83},[65,648,248],{"class":75},[65,650,366],{"class":158},[65,652,369],{"class":83},[65,654,655,657,659,661,663,665],{"class":67,"line":120},[65,656,94],{"class":75},[65,658,376],{"class":83},[65,660,248],{"class":75},[65,662,381],{"class":83},[65,664,384],{"class":158},[65,666,254],{"class":83},[65,668,669,672],{"class":67,"line":257},[65,670,671],{"class":83},"        lazyListState, ",[65,673,674],{"class":87},"\u002F\u002F will be observed for automatic pageable state updates\n",[65,676,677,680,682,684,686],{"class":67,"line":263},[65,678,679],{"class":83},"        key ",[65,681,248],{"class":75},[65,683,401],{"class":83},[65,685,274],{"class":71},[65,687,406],{"class":83},[65,689,690],{"class":67,"line":286},[65,691,337],{"class":83},[65,693,694],{"class":67,"line":302},[65,695,471],{"emptyLinePlaceholder":470},[65,697,698,701,704],{"class":67,"line":317},[65,699,700],{"class":158},"    LazyColumn",[65,702,703],{"class":83},"(lazyListState) { ",[65,705,706],{"class":87},"\u002F\u002F dont forget to use the state\n",[65,708,709],{"class":67,"line":328},[65,710,711],{"class":87},"        \u002F\u002F this is an overload that automatically uses the key lambda from `.toState` above\n",[65,713,714,717,720],{"class":67,"line":334},[65,715,716],{"class":158},"        items",[65,718,719],{"class":83},"(pageableState) { item ",[65,721,722],{"class":71},"->\n",[65,724,725,728],{"class":67,"line":340},[65,726,727],{"class":158},"            YourItem",[65,729,730],{"class":83},"(item)\n",[65,732,734],{"class":67,"line":733},13,[65,735,736],{"class":83},"        }\n",[65,738,740],{"class":67,"line":739},14,[65,741,742],{"class":83},"    }\n",[65,744,746],{"class":67,"line":745},15,[65,747,190],{"class":83},[749,750,751],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":60,"searchDepth":91,"depth":91,"links":753},[754,763],{"id":37,"depth":91,"text":38,"children":755},[756,757,758,760,761],{"id":45,"depth":106,"text":46},{"id":126,"depth":106,"text":127},{"id":193,"depth":106,"text":759},"Use the source definition in pageable in your view model",{"id":345,"depth":106,"text":346},{"id":413,"depth":106,"text":762},"Optionally configure the strategy for pageable. See Pageable Strategies",{"id":423,"depth":91,"text":424},"md",null,{},{"icon":19},{"title":769,"description":60},"evolpagink Setup & Usage","KhjcGsNG4rHgxyhtYLDElAc4nhgGY87wJqD7ZN6z-K4",[772,773],{"title":11,"path":12,"stem":13,"description":60,"icon":14,"children":-1},{"title":26,"path":27,"stem":28,"description":60,"children":-1},1776821076056]