[{"data":1,"prerenderedAt":831},["ShallowReactive",2],{"navigation_docs":3,"-quick-start-setup-and-usage":29,"-quick-start-setup-and-usage-surround":828},[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":821,"links":822,"meta":823,"navigation":824,"path":17,"seo":825,"stem":18,"__hash__":827},"docs\u002F1.quick-start\u002Fsetup-and-usage.md",{"type":32,"value":33,"toc":809},"minimark",[34,39,436,440,805],[35,36,38],"h2",{"id":37},"basically","Basically",[40,41,42,47,145,149,212,220,373,377,426],"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 SongData( \u002F\u002F public ui data structure\n    val id: String,\n    val title: String,\n    val artist: String,\n    val durationMs: Long\n)\n","kotlin","",[62,63,64,89,104,116,128,139],"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"," SongData",[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,114],{"class":67,"line":106},3,[65,108,94],{"class":75},[65,110,111],{"class":83}," title: ",[65,113,100],{"class":79},[65,115,103],{"class":83},[65,117,119,121,124,126],{"class":67,"line":118},4,[65,120,94],{"class":75},[65,122,123],{"class":83}," artist: ",[65,125,100],{"class":79},[65,127,103],{"class":83},[65,129,131,133,136],{"class":67,"line":130},5,[65,132,94],{"class":75},[65,134,135],{"class":83}," durationMs: ",[65,137,138],{"class":79},"Long\n",[65,140,142],{"class":67,"line":141},6,[65,143,144],{"class":83},")\n",[43,146,148],{"id":147},"define-your-source-design-its-requirements","Define your source, design its requirements",[48,150,151],{},[55,152,154],{"className":57,"code":153,"language":59,"meta":60,"style":60},"\u002F\u002F this is a source that only allows to retrieve pages by index\ninterface SongSource {\n    fun getPage(pageIndex: Int): Flow\u003CList\u003CSongData>>\n}\n",[62,155,156,161,172,207],{"__ignoreMap":60},[65,157,158],{"class":67,"line":68},[65,159,160],{"class":87},"\u002F\u002F this is a source that only allows to retrieve pages by index\n",[65,162,163,166,169],{"class":67,"line":91},[65,164,165],{"class":75},"interface",[65,167,168],{"class":79}," SongSource",[65,170,171],{"class":83}," {\n",[65,173,174,177,181,184,187,190,193,196,199,201,204],{"class":67,"line":106},[65,175,176],{"class":75},"    fun",[65,178,180],{"class":179},"s2Zo4"," getPage",[65,182,183],{"class":83},"(pageIndex: ",[65,185,186],{"class":79},"Int",[65,188,189],{"class":83},"): ",[65,191,192],{"class":79},"Flow",[65,194,195],{"class":83},"\u003C",[65,197,198],{"class":79},"List",[65,200,195],{"class":83},[65,202,203],{"class":79},"SongData",[65,205,206],{"class":83},">>\n",[65,208,209],{"class":67,"line":118},[65,210,211],{"class":83},"}\n",[43,213,215,216,219],{"id":214},"use-the-source-definition-in-pageable-in-your-view-model","Use the source definition in ",[62,217,218],{},"pageable"," in your view model",[48,221,222],{},[55,223,225],{"className":57,"code":224,"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 SongListModel(source: SongSource, coroutineScope: CoroutineScope) {  \n    val songPageable = pageable(\n        coroutineScope,\n        onPage = { index -> source.getPage(index) },\n        pageItemKey = { it.id },\n        strategy = prefetchPageAmount( \u002F\u002F one of the default strategies\n            initialPage = 0, \n            minimumPageAmount = 2\n        )\n    )\n}\n",[62,226,227,232,237,260,276,281,303,314,330,345,356,362,368],{"__ignoreMap":60},[65,228,229],{"class":67,"line":68},[65,230,231],{"class":87},"\u002F\u002F the source will be implemented by some part of your code that\n",[65,233,234],{"class":67,"line":91},[65,235,236],{"class":87},"\u002F\u002F knows about the actual data source\n",[65,238,239,242,245,248,251,254,257],{"class":67,"line":106},[65,240,241],{"class":75},"class",[65,243,244],{"class":79}," SongListModel",[65,246,247],{"class":83},"(source: ",[65,249,250],{"class":79},"SongSource",[65,252,253],{"class":83},", coroutineScope: ",[65,255,256],{"class":79},"CoroutineScope",[65,258,259],{"class":83},") {  \n",[65,261,262,264,267,270,273],{"class":67,"line":118},[65,263,94],{"class":75},[65,265,266],{"class":83}," songPageable ",[65,268,269],{"class":75},"=",[65,271,272],{"class":179}," pageable",[65,274,275],{"class":83},"(\n",[65,277,278],{"class":67,"line":130},[65,279,280],{"class":83},"        coroutineScope,\n",[65,282,283,286,288,291,294,297,300],{"class":67,"line":141},[65,284,285],{"class":83},"        onPage ",[65,287,269],{"class":75},[65,289,290],{"class":83}," { index ",[65,292,293],{"class":71},"->",[65,295,296],{"class":83}," source.",[65,298,299],{"class":179},"getPage",[65,301,302],{"class":83},"(index) },\n",[65,304,306,309,311],{"class":67,"line":305},7,[65,307,308],{"class":83},"        pageItemKey ",[65,310,269],{"class":75},[65,312,313],{"class":83}," { it.id },\n",[65,315,317,320,322,325,327],{"class":67,"line":316},8,[65,318,319],{"class":83},"        strategy ",[65,321,269],{"class":75},[65,323,324],{"class":179}," prefetchPageAmount",[65,326,84],{"class":83},[65,328,329],{"class":87},"\u002F\u002F one of the default strategies\n",[65,331,333,336,338,342],{"class":67,"line":332},9,[65,334,335],{"class":83},"            initialPage ",[65,337,269],{"class":75},[65,339,341],{"class":340},"sbssI"," 0",[65,343,344],{"class":83},", \n",[65,346,348,351,353],{"class":67,"line":347},10,[65,349,350],{"class":83},"            minimumPageAmount ",[65,352,269],{"class":75},[65,354,355],{"class":340}," 2\n",[65,357,359],{"class":67,"line":358},11,[65,360,361],{"class":83},"        )\n",[65,363,365],{"class":67,"line":364},12,[65,366,367],{"class":83},"    )\n",[65,369,371],{"class":67,"line":370},13,[65,372,211],{"class":83},[43,374,376],{"id":375},"convert-the-pageable-to-usable-state-in-your-ui","Convert the pageable to usable state in your UI",[48,378,379],{},[55,380,382],{"className":57,"code":381,"language":59,"meta":60,"style":60},"val lazyListState = rememberLazyListState()\nval pageableState = songListModel.songPageable.toState(\n    lazyListState\n)\n",[62,383,384,400,417,422],{"__ignoreMap":60},[65,385,386,389,392,394,397],{"class":67,"line":68},[65,387,388],{"class":75},"val",[65,390,391],{"class":83}," lazyListState ",[65,393,269],{"class":75},[65,395,396],{"class":179}," rememberLazyListState",[65,398,399],{"class":83},"()\n",[65,401,402,404,407,409,412,415],{"class":67,"line":91},[65,403,388],{"class":75},[65,405,406],{"class":83}," pageableState ",[65,408,269],{"class":75},[65,410,411],{"class":83}," songListModel.songPageable.",[65,413,414],{"class":179},"toState",[65,416,275],{"class":83},[65,418,419],{"class":67,"line":106},[65,420,421],{"class":83},"    lazyListState\n",[65,423,424],{"class":67,"line":118},[65,425,144],{"class":83},[43,427,429,430,432,433],{"id":428},"optionally-configure-the-strategy-for-pageable-see-pageable-strategies","Optionally configure the strategy for ",[62,431,218],{},". See ",[434,435,26],"a",{"href":27},[35,437,439],{"id":438},"example-structure","Example Structure",[441,442,444,507,549,685],"code-tree",{"default-value":443},"songs\u002FSongListModel.kt",[55,445,448],{"className":57,"code":446,"filename":447,"language":59,"meta":60,"style":60},"\u002F\u002F UI model\ndata class SongData(\n    val id: String, \n    val title: String, \n    val artist: String, \n    val durationMs: Long\n)\n","songs\u002FSongData.kt",[62,449,450,455,465,475,485,495,503],{"__ignoreMap":60},[65,451,452],{"class":67,"line":68},[65,453,454],{"class":87},"\u002F\u002F UI model\n",[65,456,457,459,461,463],{"class":67,"line":91},[65,458,72],{"class":71},[65,460,76],{"class":75},[65,462,80],{"class":79},[65,464,275],{"class":83},[65,466,467,469,471,473],{"class":67,"line":106},[65,468,94],{"class":75},[65,470,97],{"class":83},[65,472,100],{"class":79},[65,474,344],{"class":83},[65,476,477,479,481,483],{"class":67,"line":118},[65,478,94],{"class":75},[65,480,111],{"class":83},[65,482,100],{"class":79},[65,484,344],{"class":83},[65,486,487,489,491,493],{"class":67,"line":130},[65,488,94],{"class":75},[65,490,123],{"class":83},[65,492,100],{"class":79},[65,494,344],{"class":83},[65,496,497,499,501],{"class":67,"line":141},[65,498,94],{"class":75},[65,500,135],{"class":83},[65,502,138],{"class":79},[65,504,505],{"class":67,"line":305},[65,506,144],{"class":83},[55,508,511],{"className":57,"code":509,"filename":510,"language":59,"meta":60,"style":60},"interface SongSource {\n    fun getPage(pageIndex: Int): Flow\u003CList\u003CSongData>>\n}\n","songs\u002FSongSource.kt",[62,512,513,521,545],{"__ignoreMap":60},[65,514,515,517,519],{"class":67,"line":68},[65,516,165],{"class":75},[65,518,168],{"class":79},[65,520,171],{"class":83},[65,522,523,525,527,529,531,533,535,537,539,541,543],{"class":67,"line":91},[65,524,176],{"class":75},[65,526,180],{"class":179},[65,528,183],{"class":83},[65,530,186],{"class":79},[65,532,189],{"class":83},[65,534,192],{"class":79},[65,536,195],{"class":83},[65,538,198],{"class":79},[65,540,195],{"class":83},[65,542,203],{"class":79},[65,544,206],{"class":83},[65,546,547],{"class":67,"line":106},[65,548,211],{"class":83},[55,550,552],{"className":57,"code":551,"filename":443,"language":59,"meta":60,"style":60},"class SongListModel(\n    private val source: SongSource, \n    coroutineScope: CoroutineScope\n) {\n    \u002F\u002F the default strategies use Int as page key\u002Findex,\n    \u002F\u002F but any page key type you want is possible   \n    val songPageable = pageable(\n        coroutineScope,\n        onPage = { index -> source.getPage(index) },\n        pageItemKey = { it.id },\n        strategy = prefetchPageAmount( \u002F\u002F one of the default strategies\n            initialPage = 0, \n            minimumPageAmount = 2\n        )\n    )\n}\n",[62,553,554,562,577,585,590,595,600,612,616,632,640,652,662,670,675,680],{"__ignoreMap":60},[65,555,556,558,560],{"class":67,"line":68},[65,557,241],{"class":75},[65,559,244],{"class":79},[65,561,275],{"class":83},[65,563,564,567,570,573,575],{"class":67,"line":91},[65,565,566],{"class":71},"    private",[65,568,569],{"class":75}," val",[65,571,572],{"class":83}," source: ",[65,574,250],{"class":79},[65,576,344],{"class":83},[65,578,579,582],{"class":67,"line":106},[65,580,581],{"class":83},"    coroutineScope: ",[65,583,584],{"class":79},"CoroutineScope\n",[65,586,587],{"class":67,"line":118},[65,588,589],{"class":83},") {\n",[65,591,592],{"class":67,"line":130},[65,593,594],{"class":87},"    \u002F\u002F the default strategies use Int as page key\u002Findex,\n",[65,596,597],{"class":67,"line":141},[65,598,599],{"class":87},"    \u002F\u002F but any page key type you want is possible   \n",[65,601,602,604,606,608,610],{"class":67,"line":305},[65,603,94],{"class":75},[65,605,266],{"class":83},[65,607,269],{"class":75},[65,609,272],{"class":179},[65,611,275],{"class":83},[65,613,614],{"class":67,"line":316},[65,615,280],{"class":83},[65,617,618,620,622,624,626,628,630],{"class":67,"line":332},[65,619,285],{"class":83},[65,621,269],{"class":75},[65,623,290],{"class":83},[65,625,293],{"class":71},[65,627,296],{"class":83},[65,629,299],{"class":179},[65,631,302],{"class":83},[65,633,634,636,638],{"class":67,"line":347},[65,635,308],{"class":83},[65,637,269],{"class":75},[65,639,313],{"class":83},[65,641,642,644,646,648,650],{"class":67,"line":358},[65,643,319],{"class":83},[65,645,269],{"class":75},[65,647,324],{"class":179},[65,649,84],{"class":83},[65,651,329],{"class":87},[65,653,654,656,658,660],{"class":67,"line":364},[65,655,335],{"class":83},[65,657,269],{"class":75},[65,659,341],{"class":340},[65,661,344],{"class":83},[65,663,664,666,668],{"class":67,"line":370},[65,665,350],{"class":83},[65,667,269],{"class":75},[65,669,355],{"class":340},[65,671,673],{"class":67,"line":672},14,[65,674,361],{"class":83},[65,676,678],{"class":67,"line":677},15,[65,679,367],{"class":83},[65,681,683],{"class":67,"line":682},16,[65,684,211],{"class":83},[55,686,689],{"className":57,"code":687,"filename":688,"language":59,"meta":60,"style":60},"@Composable\nfun SongListScreen(model: SongListModel) {\n    val lazyListState = rememberLazyListState()\n    val pageableState = model.songPageable.toState(lazyListState)\n\n    LazyColumn(lazyListState) { \u002F\u002F dont forget to use the state\n        \u002F\u002F this is an overload that automatically \n        \u002F\u002F uses the key lambda specified in model's pageable\n        \u002F\u002F declaration, in pageItemKey\n        items(pageableState) { song ->\n            SongItem(song)\n        }\n    }\n}\n","songs\u002FSongListScreen.kt",[62,690,691,696,712,724,740,746,757,762,767,772,783,791,796,801],{"__ignoreMap":60},[65,692,693],{"class":67,"line":68},[65,694,695],{"class":79},"@Composable\n",[65,697,698,701,704,707,710],{"class":67,"line":91},[65,699,700],{"class":75},"fun",[65,702,703],{"class":179}," SongListScreen",[65,705,706],{"class":83},"(model: ",[65,708,709],{"class":79},"SongListModel",[65,711,589],{"class":83},[65,713,714,716,718,720,722],{"class":67,"line":106},[65,715,94],{"class":75},[65,717,391],{"class":83},[65,719,269],{"class":75},[65,721,396],{"class":179},[65,723,399],{"class":83},[65,725,726,728,730,732,735,737],{"class":67,"line":118},[65,727,94],{"class":75},[65,729,406],{"class":83},[65,731,269],{"class":75},[65,733,734],{"class":83}," model.songPageable.",[65,736,414],{"class":179},[65,738,739],{"class":83},"(lazyListState)\n",[65,741,742],{"class":67,"line":130},[65,743,745],{"emptyLinePlaceholder":744},true,"\n",[65,747,748,751,754],{"class":67,"line":141},[65,749,750],{"class":179},"    LazyColumn",[65,752,753],{"class":83},"(lazyListState) { ",[65,755,756],{"class":87},"\u002F\u002F dont forget to use the state\n",[65,758,759],{"class":67,"line":305},[65,760,761],{"class":87},"        \u002F\u002F this is an overload that automatically \n",[65,763,764],{"class":67,"line":316},[65,765,766],{"class":87},"        \u002F\u002F uses the key lambda specified in model's pageable\n",[65,768,769],{"class":67,"line":332},[65,770,771],{"class":87},"        \u002F\u002F declaration, in pageItemKey\n",[65,773,774,777,780],{"class":67,"line":347},[65,775,776],{"class":179},"        items",[65,778,779],{"class":83},"(pageableState) { song ",[65,781,782],{"class":71},"->\n",[65,784,785,788],{"class":67,"line":358},[65,786,787],{"class":179},"            SongItem",[65,789,790],{"class":83},"(song)\n",[65,792,793],{"class":67,"line":364},[65,794,795],{"class":83},"        }\n",[65,797,798],{"class":67,"line":370},[65,799,800],{"class":83},"    }\n",[65,802,803],{"class":67,"line":672},[65,804,211],{"class":83},[806,807,808],"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":810},[811,820],{"id":37,"depth":91,"text":38,"children":812},[813,814,815,817,818],{"id":45,"depth":106,"text":46},{"id":147,"depth":106,"text":148},{"id":214,"depth":106,"text":816},"Use the source definition in pageable in your view model",{"id":375,"depth":106,"text":376},{"id":428,"depth":106,"text":819},"Optionally configure the strategy for pageable. See Pageable Strategies",{"id":438,"depth":91,"text":439},"md",null,{},{"icon":19},{"title":826,"description":60},"evolpagink Setup & Usage","TxSA_xni7gKU2p7z-_Kg80vkWw8Qq6yOfXQw6kpy70E",[829,830],{"title":11,"path":12,"stem":13,"description":60,"icon":14,"children":-1},{"title":26,"path":27,"stem":28,"description":60,"children":-1},1780265267242]