Tables

These components located in ludic.catalog.tables are in an experimental mode. There is the possibility to automatically create tables even containing form fields and actions from annotations, but it is far from production-ready.

The Table component accepts a TableHead as the first item and any number of TableRow items.

from ludic.catalog.tables import Table, TableHead, TableRow

Table(
    TableHead("First Name", "Last Name","Age"),
    TableRow("John", "Doe", 42),
    TableRow("Jane", "Smith", 23),
    classes=["text-align-center"],
)

You can also specify different types of header and body. It might happen that you created your own component representing the table head and body:

from ludic.catalog.tables import Table

from your_app.components import PersonHead, PersonRow

Table[PersonHead, PersonRow](
    PersonHead("Name", "Age"),
    PersonRow("John", 42),
    PersonRow("Jane", 23),
)

Note that the type specification in the square brackets is only for the type-checkers to pass.

The create_rows function can be used to generate rows in the table based on given specification. Here is an example:

from typing import Annotated

from ludic.attrs import Attrs
from ludic.catalog.tables import ColumnMeta, Table, create_rows

class PersonAttrs(Attrs):
    id: Annotated[int, ColumnMeta(label="ID")]
    name: Annotated[str, ColumnMeta(label="Full Name")]
    email: Annotated[str, ColumnMeta(label="Email")]

people: list[PersonAttrs] = [
    {"id": 1, "name": "John Doe", "email": "john@j.com"},
    {"id": 2, "name": "Jane Smith", "email": "jane@s.com"},
]

rows = create_rows(people, spec=PersonAttrs)
table = Table(*rows)

This would render the following table:

There is also an experimental support for tables containing form fields.The way it works is that you wrap your table in a form and use the create_rows function to generate the rows. Here is an example:

from typing import Annotated

from ludic.attrs import Attrs
from ludic.catalog.tables import ColumnMeta, Table, create_rows

class ContactAttrs(Attrs):
    id: Annotated[int, ColumnMeta(identifier=True)]
    name: Annotated[str, ColumnMeta(label="Full Name")]
    email: Annotated[str, ColumnMeta(label="Email")]
    active: Annotated[
        bool,
        ColumnMeta(
            label="Active", kind=FieldMeta(kind="checkbox", label=None)
        )
    ]

contacts: list[ContactAttrs] = [
    {"id": 1, "name": "John Doe", "email": "john@j.com", "active": True},
    {"id": 2, "name": "Jane Smith", "email": "jane@s.com", "active": False},
]

rows = create_rows(contacts, spec=ContactAttrs)
table = Table(*rows)

The role of the identifier column is to be able to parse the form data using the ListParser function as documented in the Parsers section of the documentation.