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({
        'hx-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/")
def get(idx:int|None = 0):
    return generate_table_part(idx)

Live Demo

Infinite Scroll

Infinite Scroll

name	email	id
Agent Smith	void0@matrix.com	6e91129e-fc34-442a-b810-bbb4f1078d52
Agent Smith	void1@matrix.com	929c569f-8601-4419-9e6d-887bf013be1a
Agent Smith	void2@matrix.com	520d315b-9b0b-4e80-823d-aec4a9c37e46
Agent Smith	void3@matrix.com	df3de3e0-c284-4b51-aed4-8b80599e5f37
Agent Smith	void4@matrix.com	ca9cc9a0-f098-42b3-a8ba-79b6c82222eb
Agent Smith	void5@matrix.com	816bab47-7983-475f-904f-b59352f5b2e4
Agent Smith	void6@matrix.com	5d37bfbf-39ba-4113-82fd-d92ef375ad99
Agent Smith	void7@matrix.com	c20ae3f4-71eb-4131-b2bd-e0afbc518098
Agent Smith	void8@matrix.com	c747a315-341e-4811-a583-f50f63124142
Agent Smith	void9@matrix.com	cc9c0c92-0584-4596-a060-63b8ec6eee29
Agent Smith	void10@matrix.com	f1604f74-966e-4bae-b62d-6928f34fa08f
Agent Smith	void11@matrix.com	82d87ca2-fcf2-4982-8b07-147964427654
Agent Smith	void12@matrix.com	d62ef23f-e677-4f86-a51b-66f4cb80a7cb
Agent Smith	void13@matrix.com	12adfbfb-9367-4820-8de8-3b794d7c0f64
Agent Smith	void14@matrix.com	e15ccccc-e8a0-4b7c-8c50-c9ab7052c3de
Agent Smith	void15@matrix.com	014a754c-a53c-4764-9830-f970a9f2a049
Agent Smith	void16@matrix.com	7921f8dc-5d84-4f8c-a3d4-949227cfae71
Agent Smith	void17@matrix.com	333169f3-d4c7-4404-9566-056f4a65f1c6
Agent Smith	void18@matrix.com	f46df25f-6c8b-4411-825a-4b1d064ad31e
Agent Smith	void19@matrix.com	34ffd509-160d-4b7c-91b8-bec914759a47