title: Sticky headers with paging library in Jetpack Compose
body: <p>I'm currently playing around with the new Jetpack compose UI toolkit and I like it a lot. One thing I could not figure out is how to use <code>stickyHeaders</code> in a <code>LazyColumn</code> which is populated by the paging library. The non-paging example from the <a href="https://developer.android.com/jetpack/compose/lists#sticky-headers" rel="noreferrer">documentation</a> is:</p>
  <pre><code>val grouped = contacts.groupBy { it.firstName[0] }
  
  fun ContactsList(grouped: Map&lt;Char, List&lt;Contact&gt;&gt;) {
      LazyColumn {
          grouped.forEach { (initial, contactsForInitial) -&gt;
              stickyHeader {
                  CharacterHeader(initial)
              }
  
              items(contactsForInitial) { contact -&gt;
                  ContactListItem(contact)
              }
          }
      }
  }
  </code></pre>
  <p>Since I'm using the paging library I cannot use the <code>groupedBy</code> so I tried to use the <code>insertSeparators</code> function on <code>PagingData</code> and insert/create the headers myself like this (please ignore the legacy <code>Date</code> code, it's just for testing):</p>
  <pre><code>// On my flow
  .insertSeparators { before, after -&gt;
          when {
              before == null -&gt; ListItem.HeaderItem(after?.workout?.time ?: 0)
              after == null -&gt; ListItem.HeaderItem(before.workout.time)
              (Date(before.workout.time).day != Date(after.workout.time).day) -&gt;
                  ListItem.HeaderItem(before.workout.time)
              // Return null to avoid adding a separator between two items.
              else -&gt; null
          }
      }
  
  // In my composeable
  LazyColumn {
      items(workoutItems) {
          when(it) {
              is ListItem.HeaderItem -&gt; this@LazyColumn.stickyHeader { Header(it) }
              is ListItem.SongItem -&gt; WorkoutItem(it)
          }
      }
  }
  </code></pre>
  <p>But this produces a list of all my items and the header items are appended at the end. Any ideas what is the right way to use the <code>stickyHeader</code> function when using the paging library?</p>