TableΒΆ
A Table component is implemented using the HTML.table()
class method
to generate the HTML object that can be added to a form:
def __init__(self, *args, **kwargs):
super(TabsForm, self).__init__(*args, **kwargs)
caption = "This week"
headers = ["Case manager", "Cases opened", "Cases closed"]
rows = [
["David Francis", "24", "18"],
["Paul Farmer", "16", "20"],
["Rita Patel", "24", "27"],
]
header_css = [
"govuk-!-width-one-half",
"govuk-table__header--numeric",
"govuk-table__header--numeric",
]
row_css = [
"",
"govuk-table__cell--numeric",
"govuk-table__cell--numeric"
]
self.helper = FormHelper()
self.helper.layout = Layout(
HTML.table(
headers, rows, caption=caption, header_css=header_css, row_css=row_css
)
)
The method is simple to use but rather basic. The caption and the header are
optional. Set them to None
if not needed. The number of columns in the
header and each row should match - you cannot leave entries out if the contents
are blank.
The Design System CSS classes needed to style the table are added
by default. You can add additional classes to set the column widths or alignment
by passing one or more CSS classes as a string in the header_css
or row_css
arguments.
The method works perfectly well for small amounts of data, particularly on public-facing pages where the intent is just data presentation. For more sophisticated uses where the volume of data is large and splitting the table across pages or being able to sort data in columns is needed then consider looking at a package such django-tables2.