Table

component

A table of data, which scrolls sideways inside its own box on a small screen.

Preview

Light

The next events
Name
Workshop

Code

<twig:Table>
    <twig:Table:Caption>The next events</twig:Table:Caption>
    <twig:Table:Header><twig:Table:Row><twig:Table:Head>Name</twig:Table:Head></twig:Table:Row></twig:Table:Header>
    <twig:Table:Body><twig:Table:Row><twig:Table:Cell>Workshop</twig:Table:Cell></twig:Table:Row></twig:Table:Body>
</twig:Table>

Dark

The next events
Name
Workshop

Code

<twig:Table>
    <twig:Table:Caption>The next events</twig:Table:Caption>
    <twig:Table:Header><twig:Table:Row><twig:Table:Head>Name</twig:Table:Head></twig:Table:Row></twig:Table:Header>
    <twig:Table:Body><twig:Table:Row><twig:Table:Cell>Workshop</twig:Table:Cell></twig:Table:Row></twig:Table:Body>
</twig:Table>

Installation

php bin/console ux:install table --kit=github.com/parler-haut-interagir-librement/ux-kit

Accessibility

A real table, its caption the name; a header cell is scope="col" unless the attribute says row.

Files to copy

templates/components/Table.html.twig

<div class="isScrollable" data-slot="table-container"><table data-slot="table"{{ attributes.defaults({class: 'isTable'}) }}>
{##- The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer`. -#}
{%- block content %}{% endblock -%}
</table></div>

templates/components/Table/Body.html.twig

<tbody data-slot="table-body"{{ attributes.defaults({class: 'isTableBody'}) }}>
{##- The table body rows, typically `Table:Row` components. -#}
{%- block content %}{% endblock -%}
</tbody>

templates/components/Table/Caption.html.twig

<caption data-slot="table-caption"{{ attributes.defaults({class: 'isTableCaption'}) }}>
{##- The table caption text. -#}
{%- block content %}{% endblock -%}
</caption>

templates/components/Table/Cell.html.twig

<td data-slot="table-cell"{{ attributes.defaults({class: 'isTableCell'}) }}>
{##- The cell content. -#}
{%- block content %}{% endblock -%}
</td>

templates/components/Table/Footer.html.twig

<tfoot data-slot="table-footer"{{ attributes.defaults({class: 'isTableFooter'}) }}>
{##- The table footer rows, typically `Table:Row` components. -#}
{%- block content %}{% endblock -%}
</tfoot>

templates/components/Table/Head.html.twig

<th data-slot="table-head"{{ attributes.defaults({class: 'isTableHead', scope: 'col'}) }}>
{##- The header cell content. -#}
{%- block content %}{% endblock -%}
</th>

templates/components/Table/Header.html.twig

<thead data-slot="table-header"{{ attributes.defaults({class: 'isTableHeader'}) }}>
{##- The header row(s), typically a `Table:Row` with `Table:Head` cells. -#}
{%- block content %}{% endblock -%}
</thead>

templates/components/Table/Row.html.twig

<tr data-slot="table-row"{{ attributes.defaults({class: 'isTableRow'}) }}>
{##- The row cells, typically `Table:Cell` or `Table:Head` components. -#}
{%- block content %}{% endblock -%}
</tr>