Source Code

             from fasthtml.common import *
import uuid

column_names = ('name', 'email', 'id')

def generate_contact(id: int) -> Dict[str, str]:
    return {'name': 'Agent Smith',
            'email': f'void{str(id)}@matrix.com',
            'id': str(uuid.uuid4())
            }

def generate_table_row(row_num: int) -> Tr:
    contact = generate_contact(row_num)
    return Tr(*[Td(contact[key]) for key in column_names])

def generate_table_part(part_num: int = 1, size: int = 20) -> Tuple[Tr]:
    paginated = [generate_table_row((part_num - 1) * size + i) for i in range(size)]
    paginated[-1].attrs.update({
        'get': f'page?idx={part_num + 1}',
        'hx-trigger': 'revealed',
        'hx-swap': 'afterend'})
    return tuple(paginated)

app, rt = fast_app(hdrs=(picolink))

app.get("/")
def homepage():
    return Titled('Infinite Scroll',
                  Div(Table(
                      Thead(Tr(*[Th(key) for key in column_names])),
                      Tbody(generate_table_part(1)))))

@rt("/page/", name="page")
def get(idx:int|None = 0):
    return generate_table_part(idx)
           

Live Demo

Infinite Scroll

Infinite Scroll

name email id
Agent Smith [email protected] 7edb185c-9a6f-4cf5-949e-2d68c0499d4a
Agent Smith [email protected] ae7d5c32-2cc3-467a-9eb4-236e202370c8
Agent Smith [email protected] a844a17a-d762-49d5-a82b-d97239c2c5b3
Agent Smith [email protected] a7c055e0-cd98-4b14-9373-3e7cb7389038
Agent Smith [email protected] cbce3829-0cc8-4bf2-b169-61b5fa9e4051
Agent Smith [email protected] bfb9c061-788c-47f7-b376-0071a696c587
Agent Smith [email protected] 993b4cfb-2f24-400e-9dd6-718ebb42b8b0
Agent Smith [email protected] 58d6d09e-b5e6-4f25-97ff-42554c4b0406
Agent Smith [email protected] 77fa023a-85c6-4d63-89bc-b6eaa137a5c3
Agent Smith [email protected] daf32c18-cce5-4438-80a3-738f3a7fbbfc
Agent Smith [email protected] 387a0da3-c2fa-4efb-bd67-4a4a467239c2
Agent Smith [email protected] 277a409d-2249-4ebf-bb64-61114c66a6c9
Agent Smith [email protected] 5b6fff1b-634f-476b-a065-ab2b6e53be7e
Agent Smith [email protected] 0dacd50a-cb38-417b-bdab-f247deee73eb
Agent Smith [email protected] 41797f1f-a000-4c09-9265-1a2e00ee8f73
Agent Smith [email protected] 7c55d4dd-b9d4-4564-94f8-5b026d5e3357
Agent Smith [email protected] 48af4a30-8f65-416e-8a4f-408e0d5038c9
Agent Smith [email protected] 86c3d662-8ef8-4ff1-a691-a61ae02a9de3
Agent Smith [email protected] 27c25c47-5e8e-409f-a49f-ac4345dcb619
Agent Smith [email protected] ce070d7c-0b7a-4cf1-9db2-fedb15a8071c