Add a pagination built-in to `Kino.Layout`

[Zach Allaun]

There are situations where basic pagination would be really useful, e.g. to "scrub through" the steps of a transformation of some kind. Kino.Layout.tabs/1 almost fits the bill, but it comes a bit unwieldly when you have a lot of tabs:

I'd love a Kino.Layout.pagination (or pages, not sure which is better) that is very similar to tabs, but takes a list of items to render and displays standard pagination controls.

Options that could be implemented:

• :position - :top | :bottom (defaults to :top)
• :keyboard_controls - boolean (defaults to false probably), allows using left/right arrow keys to scrub through pages when the cell is focused in normal mode

[José Valim]

Hi @zachallaun! I am wondering if it would be possible to implement those using the existing functionality? something like:

Kino.Layout.grid([
  controls,
  frame
])

where controls is Kino.JS.Live with state and event handling, and frame is used to render stuff? Then perhaps it could be its own kino_paginate lib?

[Zach Allaun]

You're right, and digging into the code further, it looks like :tabs and :grid are "Livebook-native" outputs that Kino is just wrapping. My primary reason for wanting to implement pagination directly in Kino was for code-sharing, but to do that, it would actually have to be mostly implemented in Livebook.

Given that, it probably makes the most sense to implement it on top of grid for now!

[Jonatan Kłosko]

@zachallaun yeah, and the difference is that :tabs and :grid are stateless, all the contents are sent to Livebook and these are just way of laying out the contents. For pagination it would make more sense if the user passed get_page function and it would be called as needed. This way we don't need to send 100 renderings to Livebook at once.